
La propiedad justify-content en CSS define la forma en que el navegador distribuye el espacio entre y alrededor de los elementos a lo largo del eje principal del contenedor flexible.
Funciones justify-content css
Valor inicial | flex-start |
---|---|
Aplicado a | Contenedores flexibles. |
Heredable | No |
Móvil | No |
Valor calculado | Como se especificó. |
/* Alineación espacial */ justify-content: center; justify-content: start; justify-content: end; justify-content: flex-start; justify-content: flex-end; justify-content: left; justify-content: right; /* Alineación de la línea de base */ justify-content: baseline; justify-content: first baseline; justify-content: last baseline; /* Distribución del espacio */ justify-content: space-between; justify-content: space-around; justify-content: space-evenly; justify-content: stretch; /* Controlar el desbordamiento del contenido */ justify-content: safe center; justify-content: unsafe center; /* Valores globales */ justify-content: inherit; justify-content: initial; justify-content: unset;
Ejemplos y aplicaciones en código
Un ejemplo del uso de todos los valores que son compatibles con la mayoría de los navegadores hoy en día, observe la forma en que los elementos y los espacios en blanco que quedan a su alrededor se distribuyen cuando se usan diferentes valores:
<code>justify-content: flex-start;</code> <div class="container flex-start"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item4">4</div> <div id="item5">5</div> <div id="item6">6</div> </div> <br> <code>justify-content: flex-end;</code> <div class="container flex-end"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item4">4</div> <div id="item5">5</div> <div id="item6">6</div> </div> <br> <code>justify-content: center;</code> <div class="container center"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item4">4</div> <div id="item5">5</div> <div id="item6">6</div> </div> <br> <code>justify-content: space-between;</code> <div class="container space-between"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item4">4</div> <div id="item5">5</div> <div id="item6">6</div> </div> <br> <code>justify-content: space-around;</code> <div class="container space-around"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item4">4</div> <div id="item5">5</div> <div id="item6">6</div> </div> <br> <code>justify-content: stretch;</code> <div class="container stretch"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item4">4</div> <div id="item5">5</div> <div id="item6">6</div> </div>
Código CSS:
.container { display: flex; flex-wrap: wrap; height:200px; width: 240px; background-color: #8c8c8c; } .flex-start { justify-content: flex-start; } .flex-end { justify-content: flex-end; } .center { justify-content: center; } .space-between { justify-content: space-between; } .space-around { justify-content: space-around; } .stretch { justify-content: stretch; } div > div { box-sizing: border-box; border: 2px solid #8c8c8c; width: 50px; display: flex; align-items: center; justify-content: center; } #item1 { background-color: #8cffa0; min-height: 30px; } #item2 { background-color: #a0c8ff; min-height: 50px; } #item3 { background-color: #ffa08c; min-height: 40px; } #item4 { background-color: #ffff8c; min-height: 60px; } #item5 { background-color: #ff8cff; min-height: 70px; } #item6 { background-color: #8cffff; min-height: 50px; font-size: 30px; }
Soporte de navegadores
Característica | Chrome | Firefox | IE | Opera | Safari |
---|---|---|---|---|---|
Soporte básico | 29.0 | 20.0 | 11 | 12.5 | 9.0 |
Espacio uniforme | No soportado | 52.0 | No soportado | No soportado | No soportado |
Comienzo y fin | No soportado | soportado | No soportado | No soportado | ؟ |
Izquierda y derecha | No soportado | 52.0 | No soportado | No soportado | ؟ |
Base | 57.0 | soportado | No soportado | 44.0 | ؟ |
Primera línea de base y última línea de base | No soportado | 52.0 | No soportado | No soportado | ؟ |
Estirarse | 57.0 | 52.0 | No soportado | 44.0 | ؟ |
Las versiones anteriores de algunos navegadores (como Chrome, IE y Safari) admitían flexbox pero con un uso anterior ( -webkit-
o -ms-
).
Características generales
La propiedad acepta los justify-content siguientes valores, tenga en cuenta que solo hemos explicado los valores no admitidos en algunos navegadores porque no funciona.
flex-start
Los objetos se alinearán uno al lado del otro comenzando desde el principio del eje principal del contenedor flexible (es decir, desde la parte superior del elemento en la mayoría de los casos).
flex-end
Los elementos se alinearán uno al lado del otro comenzando desde el final del eje principal del contenedor flexible (es decir, desde la parte inferior del elemento en la mayoría de los casos).
center
Los objetos se alinearán uno al lado del otro comenzando en el centro del eje principal del contenedor flexible.
space-between
Los elementos se distribuirán en el eje principal del contenedor flexible, el espaciado entre cada dos elementos sucesivos será constante, el primer elemento se alineará con el borde inicial y el último se alineará con el borde final.
space-around
Los elementos se distribuirán sobre el eje principal del contenedor flexible, el espaciado entre cada dos elementos sucesivos será constante, y el espacio vacío antes del primer elemento y después del último será la mitad del espacio entre dos elementos sucesivos.
Estructura justify-content css
justify-content: flex-start | flex-end | center | space-between | space-around;
Consulte también
- Página de sub-propiedades que esta conjuntos de propiedades son:
flex-basis
,flex-direction
,flex-flow
,flex-grow
,flex-shrink
yflex-wrap
- La página de propiedades
grid
que establece todas las propiedades que definen claramente las propiedades de la red. - La página de cada una de las propiedades
width
,height
que se encarga de configurar las dimensiones del elemento.
- Introducción al Lenguaje de Programación CSS
- Características text-decoration-style en CSS
- Características text-decoration-line en CSS
- Características text-decoration-color en CSS
- Características text-decoration en CSS
- Características text-align-last en CSS
- Características text-align en CSS
- Características tab-size en CSS
- Características overflow-wrap en CSS
- Características line-break en CSS
- Características letter-spacing en CSS
- Características direction en CSS
- Características line-height en CSS
- Características font-style en CSS
- Características font-weight en CSS
- Características font-stretch en CSS
- Características font en CSS
- Características font-size-adjust en CSS
- Características font-size en CSS
- Características font-kerning en CSS
- Características font-family en CSS
- Características order en CSS
- Características justify-content en CSS
- Características flex-wrap en CSS
- Características flex-shrink en CSS
- Características flex-grow en CSS
- Características flex-flow en CSS
- Características flex-direction en CSS
- Características flex-basis en CSS
- Características flex en CSS
- Características align-self en CSS
- Características align-items en CSS
- Características align-content en CSS
- Características overflow-y en CSS
- Características overflow-x en CSS
- Características overflow en CSS
- Características padding-right en CSS
- Características padding-left en CSS
- Características padding-bottom en CSS
- Características margin-top en CSS
- Características padding-top en CSS
- Características margin-right en CSS