flex布局的盒子模型

Posted 2021-01-14 lia-633

flex盒子模型由容器（flex container）以及容器的直接子元素（flex item）组成。

以容器（flex container）定义，有主轴（main axis）以及交叉轴（cross axis）,主轴的开始位置（与边框的交叉点）叫做main start,结束位置叫做main end.交叉轴的开始位置叫做cross start，结束位置叫做cross end。

（注意:当布局排列方式变化的时候，main axis跟cross axis的方向也会跟着变化,这一点非常重要）主轴(main axis)可以是水平方向,也可以是垂直方向,而交叉轴(cross axis)始终是与主轴垂直

display: flex | inline-flex(适用于父类容器元素上)

定义一个flex容器，内联或者根据指定的值，来作用于下面的子类容器。

box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本2009）

flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本2011）

flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本）

首先得指定元素是flex布局     块状元素 -> display:flex     行内元素 -> display:inline-flex     例如:     .box{       display:flex;      }

flex-direction(适用于父类容器的元素上)：确定主轴的方向

flex-direction: row | row-reverse | column | column-reverse

row(默认):主轴为水平方向,从左到右

row-reverse：主轴为水平方向.从右到左

column：主轴为垂直方向,从上到下

column-reverse：主轴为垂直方向,从下到上

flex-wrap(适用于父类容器上)：伸缩盒对象的子元素超出父容器时是否换行

flex-wrap: nowrap | wrap | wrap-reverse

nowrap：当子元素溢出父容器时不换行。

wrap：当子元素溢出父容器时自动换行。

wrap-reverse：反转 wrap 排列,(下一行位置与交叉轴位置相反)

 

flex-flow (适用于父类容器上) //flex-direction和flexwrap的符合写法

flex-flow: <‘flex-direction’> || <‘flex-wrap’> [ flex-direction ]：定义弹性盒子元素的排列方向。 [ flex-wrap ]：定义弹性盒子元素溢出父容器时是否换行。

例如：flex-flow:row nowrap;

justify-content (适用于父类容器上)：确定在主轴方向上的对齐方式

justify-content: flex-start | flex-end | center | space-between | space-around

flex-start：该行起始位置(默认值)

flex-end：该行结束位置

center：该行中央,空间不足,则超出空间

space-between：平均地分布在行里

space-around：平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。

 

space-evenly:均匀的排列每个元素，每个元素之间的距离相等

align-items(适用于父类容器上)：确定在交叉轴上的对齐方式

align-items: flex-start | flex-end | center | baseline | stretch

flex-start：交叉轴的起始位置

flex-end：交叉轴的结束位置

center：在交叉轴居中

baseline：在基准线上保持对齐

stretch：如果条目的交叉轴尺寸的计算值是“auto”，则其实际使用的值会使得盒子在交叉轴方向上尽可能地占满。（设置高度后是不起作用的）

align-content (适用于父类容器上)：用来处理交叉轴空白空间（对单行不起作用）

align-content: flex-start | flex-end | center | space-between | space-around | stretch 

flex-start：行集中于容器的交叉轴起始位置

flex-end:行集中于容器的交叉轴结束位置

center：行集中于容器的中央

space-between：行在容器中均匀分布。

space-around：行在容器中均匀分布，两端保留子元素与子元素之间间距大小的一半。

space-evenly:均匀的分布在交叉轴中

stretch：伸展行来占满剩余的空间。多余的空间在行之间平均分配，使得每一行的交叉轴尺寸变大。

align-self (适用于子类容器上)：

 

align-self: flex-start | flex-end | center | baseline | stretch

 

flex-start：交叉轴的起始位置

 

flex-end：交叉轴的结束位置

 

center：在交叉轴居中

 

baseline：在基准线上保持对齐

 

stretch：如果条目的交叉轴尺寸的计算值是“auto”，则其实际使用的值会使得盒子在交叉轴方向上尽可能地占满。（设置高度后是不起作用的）

 

 

当"align-self"的值为 auto 时，其计算值是父节点的属性"align-items"的值。如果该节点没有父节点，则计算值为"stretch"。

用来覆写容器指定的对齐方式

 

 

order (适用于子元素)：用来设置自容器的排列顺序

用整数值来定义排列顺序，数值小的排在前面。可以为负值。

flex:适用于子类容器:设置或检索伸缩盒对象的子元素如何分配空间。

复合属性。

如果缩写flex:1, 则其计算值为：1 1 0%；none：none关键字的计算值为: 0 0 auto

flex:auto  1 1 auto; flex:2 100px; 2 1 100px;

flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

[ flex-grow ]：定义弹性盒子元素的扩展比率。默认值：0（当有内容剩余时，每个子容器按照这个比例扩展内容）

[ flex-shrink ]：定义弹性盒子元素的收缩比率。默认值：1（收缩比例，当有内容溢出时，这个属性才会起作用）

[ flex-basic ]：定义弹性盒子元素的默认基准值。默认值：auto（扩展或收缩内容时，以这个值为基准）若为auto,则以width为基准。其余以值为基准