html - transmisiones - poleas diseño mecanico
Centro y elementos flexibles de alineación inferior (3)
A continuación hay cinco opciones para lograr este diseño:
- Posicionamiento CSS
- Flexbox con elemento DOM invisible
- Flexbox con pseudo-elemento invisible
-
Flexbox con
flex: 1 - Diseño de cuadrícula CSS
Método # 1: Propiedades de posicionamiento CSS
Aplicar
position: relative
al contenedor flexible.
Aplicar
position: absolute
al elemento verde flex.
Ahora el cuadrado verde está absolutamente posicionado dentro del contenedor flexible.
Más específicamente, el cuadrado verde se elimina del flujo de documentos pero permanece dentro de los límites del antepasado posicionado más cercano .
Use las propiedades de desplazamiento CSS
top
,
bottom
,
left
y
right
para mover el cuadrado verde.
flex-container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
position: relative;
border: 4px solid blue;
height: 300px;
width: 300px;
}
flex-container > flex-item:first-child {
display: flex;
}
flex-container > flex-item:first-child > flex-item {
border: 4px solid aqua;
height: 50px;
width: 50px;
margin: 0 5px;
}
flex-container > flex-item:last-child {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%); /* fine tune horizontal centering */
border: 4px solid chartreuse;
height: 50px;
width: 50px;
}
<flex-container>
<flex-item><!-- also flex container -->
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-item>
<flex-item></flex-item>
</flex-container>
Una advertencia: es posible que algunos navegadores no eliminen por completo un elemento flexible en una posición absoluta del flujo normal. Esto cambia la alineación de una manera inesperada y no estándar. Más detalles: el elemento flexible colocado de forma absoluta no se elimina del flujo normal en Firefox e IE11
Método n. ° 2: márgenes automáticos flexibles y elemento flexible invisible (elemento DOM)
Con una combinación de
márgenes
auto
y un nuevo elemento flexible invisible, se puede lograr el diseño.
El nuevo elemento flexible es idéntico al elemento inferior y se coloca en el extremo opuesto (el superior).
Más específicamente, debido a que la alineación flexible se basa en la distribución del espacio libre, el nuevo elemento es un contrapeso necesario para mantener los tres cuadros azules centrados verticalmente. El nuevo elemento debe tener la misma altura que el elemento verde existente, o los cuadros azules no estarán centrados con precisión.
El nuevo elemento se elimina de la vista con
visibility: hidden
.
En breve:
- Crea un duplicado del cuadro verde.
- Colóquelo al principio de la lista.
-
Use márgenes
autoflexibles para mantener centrados los cuadros azules, con ambos cuadros verdes creando el mismo equilibrio desde ambos extremos. -
Aplicar
visibility: hiddenal cuadro verde duplicado.
flex-container {
display: flex;
flex-direction: column;
align-items: center;
border: 4px solid blue;
height: 300px;
width: 300px;
}
flex-container > flex-item:first-child {
margin-top: auto;
visibility: hidden;
}
flex-container > flex-item:nth-child(2) {
margin-top: auto;
display: flex;
}
flex-container > flex-item:last-child {
margin-top: auto;
margin-bottom: auto;
}
flex-container > flex-item:first-child,
flex-container > flex-item:last-child {
border: 4px solid chartreuse;
height: 50px;
width: 50px;
}
flex-container > flex-item:nth-child(2) > flex-item {
border: 4px solid aqua;
height: 50px;
width: 50px;
margin: 0 5px;
}
<flex-container>
<flex-item></flex-item>
<flex-item><!-- also flex container -->
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-item>
<flex-item></flex-item>
</flex-container>
Método n. ° 3: márgenes automáticos flexibles y elemento flexible invisible (pseudo-elemento)
Este método es similar al # 2, excepto que es más limpio semánticamente y se debe conocer la altura del cuadro verde.
- Cree un pseudo-elemento con la misma altura que el cuadro verde existente.
-
Colóquelo al comienzo del contenedor con
::before. -
Use márgenes
autoflexibles para mantener centrados los cuadros azules, con los pseudo elementos verdes y los elementos DOM creando el mismo equilibrio desde ambos extremos.
flex-container {
display: flex;
flex-direction: column;
align-items: center;
border: 4px solid blue;
height: 300px;
width: 300px;
}
flex-container::before {
content: "";
margin-top: auto;
height: calc(50px + 8px); /* height + borders */
visibility: hidden;
}
flex-container > flex-item:first-child {
margin-top: auto;
display: flex;
}
flex-container > flex-item:last-child {
margin-top: auto;
margin-bottom: auto;
border: 4px solid chartreuse;
height: 50px;
width: 50px;
}
flex-container > flex-item:first-child > flex-item {
border: 4px solid aqua;
height: 50px;
width: 50px;
margin: 0 5px;
}
<flex-container>
<flex-item><!-- also flex container -->
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-item>
<flex-item></flex-item>
</flex-container>
Método 4: agregue
flex: 1
a los elementos superior e inferior
Comenzando con el Método n. ° 2 o n. ° 3 anterior, en lugar de preocuparse por la misma altura para que los elementos superiores e inferiores mantengan el mismo equilibrio, solo dé a cada uno
flex: 1
.
Esto los obligará a ambos a consumir el espacio disponible, centrando así el elemento central.
Luego puede agregar
display: flex
al elemento inferior para alinear el contenido.
Método 5: diseño de cuadrícula CSS
Este puede ser el método más limpio y eficiente. No hay necesidad de posicionamiento absoluto, elementos falsos u otros hackers.
Simplemente cree una cuadrícula con tres filas. Luego, alinee los elementos en la segunda y tercera fila. La primera fila puede permanecer vacía.
grid-container {
display: grid;
grid-template-rows: repeat(3, 1fr);
align-items: center;
justify-items: center;
border: 4px solid blue;
height: 300px;
width: 300px;
}
grid-item:nth-child(2) {
display: flex;
}
grid-item:nth-child(2)>flex-item {
width: 50px;
height: 50px;
margin: 0 5px;
border: 4px solid aqua;
}
grid-item:nth-child(3) {
border: 4px solid chartreuse;
height: 50px;
width: 50px;
}
<grid-container>
<grid-item></grid-item>
<grid-item><!-- also flex container -->
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</grid-item>
<grid-item></grid-item>
</grid-container>
Tengo un contenedor flexible (el cuadrado azul) con las siguientes propiedades:
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
Por lo tanto, sus elementos secundarios (los cuadrados azules claros) se organizan como se ve a continuación.
Sin embargo, me gustaría agregar otro hijo (el cuadrado verde) fuera del flujo normal y colocarlo en relación con su padre.
Para colocarlo como se ve a continuación, lo ideal sería escribir algo como
bottom: 20px;
y
margin: auto;
.
Traté de jugar con
z-index
en vano.
¿Cómo debería abordar esto?
¿Debo recurrir a crear otro elemento padre?
deje que el contenedor con
position: relative
y el cuadrado verde con
position:absolute;
body {
margin: 0;
}
#container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
width: 192px;
height: 192px;
border: 4px solid indigo;
position: relative;
background: lavender;
}
.blue {
margin: 10px;
width: 30px;
height: 30px;
outline: 4px solid skyblue;
background: honeydew;
}
#green {
position: absolute;
width: 30px;
height: 30px;
left: 0;
right: 0;
margin: auto;
bottom: 20px;
outline: 4px solid yellowgreen;
background: greenyellow;
}
<div id=container>
<div class=blue></div><div class=blue></div><div class=blue></div>
<div id=green></div>
</div>
puede usar un pseudo para moverse hacia abajo una fila de los primeros tres contenedores y luego aplicar un
margin:auto
al último
div {
display:flex;
flex-wrap:wrap;
border:#0066FD solid;;
width:200px;
height:200px;
justify-content:space-around;
/* show me box center */
background:linear-gradient(to top,rgba(0,0,0,0.2) 50%, transparent 50%),linear-gradient(to left,rgba(0,0,0,0.2) 50%, transparent 50%)
}
span, div:before {
width:50px;
height:50px;
border:solid #01CDFF;
margin:0 auto 0;
}
span:last-of-type , div:before{
margin: 12px auto;
border:solid #01FE43;
}
div:before {
content:'''';
width:100%;
border:none;
}
span {
/* show me box center */
background:linear-gradient(45deg,rgba(0,0,0,0.1) 50%, transparent 50%),linear-gradient(-45deg,rgba(0,0,0,0.1) 50%, transparent 50%)
}
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>