flex布局--css

flex布局

flex：弹性

html标签会把内容分成小盒子，默认属性block（块）。

display: flex 弹性盒子：可以控制下级盒子的位置

当flex盒子出现的时候，自动有了一个坐标轴和三个默认属性。坐标轴分为主轴和交叉轴。

容器属性（设置在父元素上）

flex- direction: 弹性-方向 ：控制盒子的主轴方向

flex- direction : row 行 元素从左向右排列，主轴为水平方向，起点在左端（默认）

flex- direction : row- reverse 元素从右往左排序，主轴为水平方向，起点在右端

flex- direction : column 列 元素从上往下排序，主轴为垂直方向，起点在上沿

flex- direction : column- reverse 元素从下向上排序，主轴为垂直方向，起点在下沿

justify-content: 对齐-内容 ：控制下级盒子在主轴上的位置

justify-content : flex-start 起点 下级盒子放在起点开头

justify-content : flex-end 下级盒子放在主盒子末尾

justify-content : center 居中

justify-content : space-between 两端对齐，项目之间间隔都相等

justify-content : space-around 每个项目之间的间隔相等，所以项目之间的间隔比两头的间隔要大

justify-content : space-evenly 均匀排列每个元素，每个元素之间的间隔相等

align-items: 对齐-条目：控制下级盒子在交叉轴上的位置

align-items : stretch 把下级盒子占满拉伸（默认）

align-items : flex-start 子元素在父元素起点顶部展示

align-items : flex-end 子元素在父元素起点底部展示

align-items : center 子元素在父元素主轴水平居中线上展示

align-items : baseline 让子元素的第一行字水平对齐（以高度最高的子元素为基准）

flex-wrap:控制子元素是否在一行

flex-wrap : nowrap 不换行（默认）

flex-wrap : wrap 换行，第一行在上方

flex-wrap : wrap- reverse 换行，第一行在下方

align-content: 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

align-content : flex-start 子元素与父元素交叉轴起点对齐

align-content : flex-end 子元素与父元素交叉轴终点对齐

align-content : center 子元素与父元素交叉轴中点对齐

align-content : stretch 轴线占满整个交叉轴

align-content : space-between 与交叉轴两端对齐，轴线之间平均分配

align-content : space-around 每根轴线的两侧都相等，所以子级之间的间隔比两端大

**flex-flow: 是flex-dirsction和flex-wrap的缩写 **

flex-flow: | | ;

默认值row nowrap；(单行显示，不换行)；

元素属性（设置在子元素上）

align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

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

默认值auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
order：定义项目的排列顺序，数值越小，排列越靠前

order : <integer> （默认0）

flex-grow：定义项目放大的比例

flex-grow : <number> （默认0，即如果存在剩余空间，也不放大）

flex-shrink：定义项目缩小比例

flex- shrink : <number> （默认1，即如果空间不足，该项目将缩小）

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效

flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）

浏览器根据这个属性，计算主轴是否有多余空间

flex-basis : <length> （默认auto，即项目本来大小）

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间

flex：是flex-grow, flex-shrink 和 flex-basis的简写

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

默认值为0 1 auto。后两个属性可省略

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

如果其中一个子元素属性写flex: 1 ，它会默认占满剩余空间；一个子元素属性写flex: 1,一个子元素写flex:2,他们会占满整个剩余空间，并且flex2元素是flex1元素的二倍。

---

---