html - examples - flexbox guia
Horizontalmente centro el elemento flexible entre 2 elementos flexibles de diferentes anchuras (4)
Esta pregunta ya tiene una respuesta aquí:
Digamos que tengo 3 divs mostrados horizontalmente con flexbox
:
| |-div1-| |-center-div-| |-wider-div-| |
Y quiero que el centro div esté alineado con el centro del padre. ¿Cómo puedo lograr esto? justify-content
centrará los 3 de los divs basándose en la suma de todos sus anchos, y aplicar align-self: center
al div del medio no hace nada porque la propiedad de align manipula el posicionamiento en el otro eje.
¿Hay una solución de CSS receptiva o debería recurrir a jQuery?
ul {
display: flex;
justify-content: center;
width: 100%;
background-color: purple;
}
li {
background-color: red;
border: 5px solid blue;
list-style: none;
}
<ul>
<li><a href = "#">short</a></li>
<li><a href = "#">want center</a></li>
<li><a href = "#">loooooooooooooooooong</a></li>
</ul>
Ilustración de este problema: https://jsfiddle.net/7w8mp8Lj/2/
Puede establecer la primera y última li
para crecer flex: 1
, y establecer como a
bloque en línea y texto alinear 1/2/3 li
como derecha / centro / izquierda.
ul {
display: flex;
justify-content: center;
width: 100%;
background-color: purple;
list-style: none;
padding: 0;
}
li:nth-child(1) {
text-align: right;
flex: 1;
}
li:nth-child(2) {
text-align: center;
}
li:nth-child(3) {
text-align: left;
flex: 1;
}
li a {
display: inline-block;
background-color: red;
border: 5px solid blue;
}
<ul>
<li><a href="#">short</a></li>
<li><a href="#">want center</a></li>
<li><a href="#">loooooooooooooooooong</a></li>
</ul>
Puede usar el posicionamiento absoluto para sacar los artículos no centrados del flujo de salida, de modo que no afecten el centrado.
ul {
display: flex;
justify-content: center;
background-color: purple;
padding: 0;
list-style: none;
}
li {
position: relative;
}
li > a {
display: block;
background-color: red;
border: 5px solid blue;
}
li:first-child > a {
position: absolute;
right: 0;
}
li:last-child > a {
position: absolute;
left: 0;
}
<ul>
<li><a href="#">short</a></li>
<li><a href="#">want center</a></li>
<li><a href="#">loooooooooooooooooong</a></li>
</ul>
Sin embargo, tenga en cuenta que perderá flexibilidad debido a que los hijos de un contenedor de flexión absolutamente posicionados no participan en el diseño de flexión (excepto en el paso de reordenación).
Utilizo un contenedor flexible con tres cajas en el interior, dos de las cuales, izquierda y derecha, tienen el mismo ancho y son contenedores flexibles, envolviendo el contenido de ancho arbitrario:
[(a box) ] [centered content] [ (a longer box)]
left wrapper right wrapper
Aquí está el código:
<div class="test">
<div class="wrapper left">
<div class="box one"></div>
</div>
<div class="box two"></div>
<div class="wrapper right">
<div class="box three"></div>
</div>
</div>
CSS:
.test {
height: 50px;
display: flex;
justify-content: center;
}
.wrapper {
width: 33%;
display: flex;
}
.wrapper.left {
justify-content: flex-end;
}
.box {
border: 1px solid red;
}
.one {
width: 100px;
}
.two {
width: 50px;
}
.three {
width: 150px;
}
Aquí hay un método flexible que centra perfectamente el artículo medio con:
- no jQuery
- sin posicionamiento absoluto
- sin cambios al HTML
ul {
display: flex;
padding: 0;
}
li {
display: flex;
justify-content: center;
flex: 1;
background-color: red;
border: 2px solid blue;
}
li:first-child > a {
margin-right: auto;
}
li:last-child > a {
margin-left: auto;
}
<ul>
<li>
<a href="#">short</a>
</li>
<li>
<a href="#">want center</a>
</li>
<li>
<a href="#">loooooooooooooooooong</a>
</li>
</ul>
jsFiddle
Así es como funciona:
- El
ul
es el contenedor primario de flexión. - Cada elemento
li
flex recibeflex: 1
para una distribución igual de espacio contenedor. - Ahora los
li
s están consumiendo todo el espacio en la fila y tienen el mismo ancho. - Haga que cada
li
un contenedor flexible y añadajustify-content: center
- Ahora cada elemento de anclaje es un elemento flex centrado.
- Utilice los márgenes
auto
flexibles para desplazar los anclajes externos hacia la izquierda y hacia la derecha.