Diseño
El diseño de la página web (diseño) es una aplicación clave de CSS.
La solución tradicional del diseño se basa en el modelo de caja. La pantalla: atributo inline | block | inline-block, atributo de posición y flotante se utilizan para implementar el diseño. Carece de flexibilidad y algunos efectos de adaptación son difíciles de lograr.
Diseño flexible: llámelo "diseño flexible"
En 2009, w3c propuso una nueva solución: diseño Flex. Ken tiene una implementación simple, completa y receptiva de varios diseños de página. Soporte de navegador: Chrome21 +, Opera12.1 +, Firefox22 +, Safari6.1 +, IE10 +
Recordatorio: cualquier recipiente están dispuestos a designando como pantalla de diseño Flex: Flex; los elementos en línea también está dispuesto a tener el uso de la pantalla de diseño de Flex: inline-flex;; Webkit explorador básico Hay que añadir -webkit prefijo
Set Flex Disposición del más tarde, el niño: Nota elementos flex, cleary los vertical-alignatributos se producirá un error
Conceptos básicos de diseño Flex
- Los elementos que usan el diseño Flex se denominan contenedores Flex, o "contenedores" para abreviar.
- Todos sus elementos secundarios se convierten automáticamente en miembros del contenedor, denominado elemento flexible (elemento flexible), denominado "elemento".
Hay dos ejes en el contenedor por defecto:
- El eje horizontal x se llama eje principal (eje principal)
- El eje vertical y se llama eje transversal (eje transversal)
Las propiedades del
contenedor de configuración son : configuración del contenedor, que se usa para administrar de manera uniforme el diseño de los elementos en el contenedor, es decir, administrar la disposición y la alineación de los elementos
/* 将容器设置为 Flex 布局 */
display: flex;
/* 通过设置坐标轴, 来设置项目排列方向 */
flex-direction: row(默认) | row-reverse | column | column-reverse;
row: 默认值, 水平方向, 从左到右排列
row-reverse: 水平方向, 从右到左排列
column: 垂直方向, 从上到下排列
column-reverse: 垂直方向, 从下到上排列
/* 设置是否允许项目多行排列, 以及多行排列时换行的方向 */
flex-wrap: nowrap(默认) | wrap | wrap-reverse;
nowrap: 默认值, 不换行。如果单行内容过多, 则溢出容器。
wrap: 换行, 第一行在上方
wrap-reverse: 换行, 第一行在下方
/* 设置项目在主轴方向上对其方式，以及分配项目之间及周围多余的空间 */
justify-content: flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;
flex-state: 默认值, 左对齐, 项目间不留空隙
flex-end: 右对齐, 项目间不留空隙
center: 居中排列, 项目间不留空隙
space-between: 两端对齐, 项目之间的间隔都相等
space-arond: 第一个项目的起点和最后一个项目的终点离主轴的距离是中间项目间距的一半
space-evenly: 项目和项目及主轴的边距离均等
/* 设置项目在行中的对齐方式 */
align-items: stretch(默认) | flex-start | center | flex-end | baseline;
stretch: (默认值) 项目拉伸至填满行高
flex-start: 交叉轴的起点对齐
flex-end: 交叉轴的终点对齐
center: 交叉轴的居中对齐
baseline: 项目的第一行文字的基线对齐
/* 多行排列时, 设置行在交叉轴方向的对齐方式, 以及分配行之间及周围多余的空间 */
align-content: stretch(默认) | flex-start | center | flex-end | space-between | space-around | space-evenly;
stretch: 默认值, 当未设置项目尺寸, 将各行中的项目拉伸至填满交叉轴。当设置了项目尺寸, 项目尺寸不变, 项目行拉伸至填满交叉轴
flex-start: 首行在交叉轴起点开始排列, 行间不留间距
center: 行在交叉轴中点排列, 行间不留间距, 首行和尾行离容器距离相等
flex-end: 尾行在交叉轴终点开始排列, 行间不留间距
space-between: 行与行间距相等, 首尾和容器距离为0
space-around: 行与行间距相等, 首尾和容器距离是行与行间距的一半
space-evenly: 首尾和容器及行与行的距离都相等
Las propiedades de los
elementos de configuración son elementos de configuración, que se utilizan para establecer el tamaño y la posición del elemento, y para realizar configuraciones especiales para la alineación del elemento.
/* 设置项目沿主轴方向上的排列顺序, 数值越小, 排列越靠前, 属性值为整数 */
order: 0(默认)
/* 设置项目的缩小比例, 默认为1, 如空间不足, 该项目将缩小 */
flex-shrink: 1(默认)
注意: 如果所有项目属性都为1, 当空间不足时, 都将等比例缩小。如果一个项目的属性为0, 其他为1, 则空间不足时, 前者不缩小。负值对该属性无效
/* 设置项目的放大比例, 默认为0, 如果存在剩余空间, 也不放大 */
flex-grow: 0(默认)
注意: 如果所有项目属性为1, 则等分剩余空间。如一个项目的属性为2, 其他为1, 则前者占据的剩余空间将比其他项多一倍
/* 设置项目占据的主轴空间 */
flex-basis: auto(默认)
注意: 当flex-basis 和 width\height, 其中一个属性值为auto时, 非auto的优先级更高
/* 多个属性的简写形式 */
flex: none | auto | @flex-grow @flex-shrink @flex-basis;
注意: flex 是 flex-grow、flex-shrink、flex-basis 的简写形式
none 等价于 0 0 auto;
auto 等价于 1 1 auto;
/* 设置项目在行中交叉轴上的对齐方式 */
align-self: auto(默认) | flex-start | flex-end | baseline | stretch;
注意: 属性允许单个项目有与其他项目不一样的对齐方式, 可覆盖 align-items 属性。默认 auto, 表示继承父元素的 align-items 属性, 如果没有父元素, 则等同于 stretch
Sitio web de referencia de aprendizaje
Las notas anteriores son transcripciones solo para profundizar la comprensión ...