Diseño CSS flex (elástico) detallado
Creo que todos están familiarizados con la caja flexible de CSS y se usa en muchos lugares de la vida diaria. Recientemente, con la profundización gradual del aprendizaje, descubrí que la caja flexible de CSS se usa cada vez más, y esto word tiene una impresión en mí Cuando todavía estaba aprendiendo CSS, no sabía mucho al respecto en ese momento, pero ahora me di cuenta de lo importante que es la caja flexible de CSS, así que escribí este blog esta vez para compensarlo.
diseño flexible css inicial
Flex layout es la abreviatura de flexble box, es decir, diseño elástico
Todos los elementos pueden usar un diseño flexible (nivel de bloque, nivel de fila)
El atributo flexible se agrega principalmente al elemento principal, y los elementos secundarios elásticos del elemento principal al que se agrega el atributo flexible se organizan en filas (lo mismo que agregar flotadores en la misma fila)
<body>
<div class="total">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
<style>
.total{
display: flex;
}
.one{
width: 200px;
height: 200px;
background-color: red;
}
.two{
width: 200px;
height: 200px;
background-color: blue;
}
.three{
width: 200px;
height: 200px;
background-color: green;
}
</style>
Entonces comprendamos algunas propiedades de flex
dirección de flexión
Determinar la dirección del eje principal, es decir, la dirección de disposición de los subelementos elásticos
flex-direction:row //主轴是水平方向，起点在左边。也就是从左往右排(默认的是这个)
flex-direction:row-reverse //主轴是水平，起点在右边
flex-direction:column //主轴是垂直方向,起点在上沿
flex-direction:column-reverse //主轴是垂直方向，起点在下沿
envoltura flexible
Deje que los elementos flexibles se dividan cuando sea necesario
flex-wrap: wrap; //自动换行
flex-wrap: nowrap; //不换行，平均挤压
<style>
.total{
width: 400px;
height: 200px;
display: flex;
flex-wrap: wrap;
}
.one{
width: 200px;
height: 200px;
background-color: red;
}
.two{
width: 200px;
height: 200px;
background-color: blue;
}
.three{
width: 200px;
height: 200px;
background-color: green;
}
</style>
Cuando establecemos el ancho y la altura del elemento principal, si el ancho de los elementos secundarios impide que se organicen en la misma línea, si se agrega el ajuste flexible, el elemento se ajustará automáticamente, de la siguiente manera
Y lo que se agrega es flex-nowarp
Podemos encontrar que los elementos están comprimidos en la misma línea para mostrar
alinear-contenido
La forma en que los elementos secundarios se organizan verticalmente, de acuerdo con el elemento principal.
align-content:center //主轴在中间，也就是垂直居中
align-content：flex-start //主轴在父元素的顶部
align-content:flex-end //主轴在父元素的底部
align-content:space-around //上下中均留边距
align-content:between //紧贴上下边距
justificar-contenido
La disposición horizontal de los elementos secundarios es similar a la de los elementos verticales.
justify-content:center
justify-content：flex-start
justify-content:flex-end
justify-content:space-around
justify-content:between
alinear elementos
Es un poco como justificar contenido, pero align-items es principalmente para alineación vertical
flex-start：弹性盒子元素的（Y）轴起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的（Y）轴起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的（Y）轴上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两
Beneficios de la caja flexible
Las ventajas son obvias, muy fáciles y convenientes.Es fácil lograr un cierto efecto de diseño al operar en una pieza de elementos.
También hay desventajas, es decir, el problema de la compatibilidad, solo es compatible con ie9 y superior.
En general, las cajas elásticas se utilizan cada vez más en la actualidad, y el dominio temprano de esto será de gran ayuda para futuros estudios.