Uno: pantalla: diseño flexible
display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、
响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear
和vertical-align属性将失效。Dos: los seis atributos de flex
①, flex-direction La dirección de disposición de los elementos en el contenedor (la disposición predeterminada es horizontal)
1: flex-direction: row; Organizar los elementos de izquierda a derecha a lo largo del eje horizontal
2: flex-direction: column; Deje que los elementos estén dispuestos verticalmente de arriba a abajo a lo largo del eje vertical
3: flex-direction: row-reverse; organiza los elementos de derecha a izquierda a lo largo del eje horizontal
②, la envoltura de elementos en el contenedor de envoltura flexible (sin envoltura por defecto)
1：flex-wrap: nowrap; (默认)元素不换行,比如：一个div宽度100%，设置此属性后，
2个div宽度就自动变成各50%；
2：flex-wrap: wrap; 元素换行,比如：一个div宽度100%，设置此属性，第二个div就在第二行了；③, la disposición de los elementos de contenido justificado en el eje principal (página)
1: justify-content: center; los elementos están dispuestos en el centro en el eje principal (página)
2: justify-content: flex-start; los elementos se organizan desde la izquierda o arriba en el eje principal (página)
3: justify-content: flex-end; los elementos se organizan desde la derecha o desde abajo en el eje principal (página)
4: justify-content: space-between; los elementos comienzan a organizarse en los extremos izquierdo y derecho o en los extremos superior e inferior en el eje principal (página)
5: justify-content: space-around; El espacio en ambos lados de cada elemento es igual. Por lo tanto, el espacio entre los elementos es dos veces más grande que el espacio entre los elementos y el borde.
④ La alineación del elemento de alinear elementos en la dirección del eje horizontal (eje vertical) de la línea actual del eje principal (página)
1: align-items: flex-start; El límite de la posición inicial del eje lateral (eje vertical) del elemento de caja flexible está cerca del límite inicial del eje lateral de la fila (alineado arriba).
2: align-items: flex-end; El límite de la posición inicial del eje lateral (eje vertical) del elemento flexbox está cerca del límite final del eje lateral de la fila. (Alinear abajo)
3: align-items: center; El elemento de caja elástica se coloca en el centro del eje lateral (eje vertical) de la fila. (Alineado al centro)
4: align-items: baseline; Si el eje en línea y el eje lateral del elemento de caja flexible son iguales, este valor es equivalente a 'inicio-flex'. En otros casos, este valor participará en la alineación de la línea de base. (Alinear arriba)
⑤, align-content alinea los elementos del contenedor cuando los elementos del contenedor elástico no ocupan todo el espacio disponible en el eje transversal (vertical)
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:pink;"></div>
</div>#main {
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: flex-start;
}
#main div {
width: 70px;
height: 70px;
}1: align-content: flex-start; El elemento se encuentra al principio del contenedor. Las filas se apilan hacia la posición inicial del contenedor de caja elástica.
2: align-content: flex-end; El elemento se encuentra al final del contenedor. Las filas se apilan hacia el final del contenedor de caja elástica.
3: align-content: center; El elemento está ubicado en el centro del contenedor. Las filas se apilan hacia el centro del contenedor de caja elástica.
4: align-content: stretch; El valor predeterminado. Los elementos se estiran para adaptarse al contenedor. Las filas se estirarán para ocupar el espacio restante. Si el espacio restante es negativo, el valor es equivalente a'flex-start '.
5: align-content: space-between; El elemento está ubicado en un contenedor con un espacio en blanco entre las filas. Las filas se distribuyen uniformemente en el contenedor de caja elástica.
6: align-content: space-around; El elemento está ubicado en un contenedor con espacios en blanco antes, entre y después de cada línea. Las filas se distribuyen uniformemente en el contenedor flexbox, y la mitad de la distancia entre el elemento secundario y el elemento secundario está reservada en ambos extremos. Si el espacio restante es negativo o solo hay una fila en el contenedor flexbox, este valor es equivalente a 'centro'.
⑥ 、
Resumen de propiedades flexibles comunes
Alineación posicional
justify-content: center ;: organizar en el centro
justify-content: flex-start; / * organizar desde el principio de la línea /
justify-content: flex-end; / organizar desde el final de la línea * /
Autor: Yang Yang 1314
enlace: https: //www.jianshu.com/p/d9373a86b748/
Fuente: Libro de
Jane Los derechos de autor del libro de Jane están reservados por los autores, se reproducen en cualquier forma, por favor contacte al autor para obtener autorización e indicar la fuente .