【CSS篇】Flex布局知识点汇总

Flex简介

Flex（弹性布局）

1. 兼容性：支持大部分主流浏览器以及IE10+，若想兼容低版本，只能用float来处理，具体情况具体对待。
2. 块元素设 置[ display:flex ],行内元素设置[ display:inline-flex]
3. 如果是Webkit内核(Safair)，应这么写display: -webkit-flex
4. 设置为flex布局后，子元素的float / clear / vertical-align失效。子元素的子集不受影响

Flex属性

Flex轴相关

1. 主轴: main，起始main-start，结束main-end
2. 交叉轴: cross，起始cross-start，结束cross-end

下图为阮一峰大大博客中的图，借鉴一下：

父元素属性

1. flex-direction : 主轴方向
   • row： (默认值)从左向右
   • row-reverse： 从右向左
   • column： 从上向下
   • column-reverse： 从下向上
2. flex-wrap: 元素的换行方式
   • nowrap: （默认值）不换行
   • wrap：换行
   • wrap-reverse：反向换行
3. flex-flow: < flex-directio n> < flex-wrap > 这两个元素的简写形式，默认值同这两个属性的默认值
4. justify-content: 主轴上的对齐方式
   • flex-start：（默认值）主轴起始的对齐
   • flex-end：主轴结束的对齐
   • center：居中对齐
   • spance-between：两端对齐，所有元素的中间间隙相等
   • space-around：间隙左右相等
5. aline-items: 交叉轴的对齐方式
   • stretch：（默认值）拉伸，无宽或者高时，起效
   • flex-start：交叉轴起始的对齐
   • flex-end：交叉轴结束的对齐
   • center：居中对齐
   • baseline：根据文本对齐
6. aline-content: 多行轴对齐方式，在wrap时，起效
   • stretch：（默认值）拉伸，无宽或者高时，起效
   • flex-start：交叉轴起始的对齐
   • flex-end：交叉轴结束的对齐
   • center：居中对齐
   • spance-between：两端对齐，所有元素的中间间隙相等
   • space-around：间隙左右相

子元素属性

1. order：数值 | 子元素的排列顺序，默认为0
2. flex-grow：数值 | 子元素的放大比例，默认为0
3. flex-shrink：数值 | 子元素的缩小比例，只有溢出且不换行时才起效，默认为1

   计算公式如下：
   

4. flex-basis：数值px | 可覆盖width，主轴为横向时，可完全覆盖，主轴为纵向时，只有大于width才可以覆盖，默认为0
5. flex：< flex-grow > < flez-shrink > < flex-basis > 缩写，后两个参数可省略，且有两个简写,
   • [ 0 1 auto ]：默认值
   • auto：[ 1 1 auto ]
   • none： [ 0 0 auto ]
6. aline-self：子元素，可单独设置对齐方式，覆盖align-item属性
   • auto：（默认值）集成父元素的属性
   • flex-start：交叉轴起始的对齐
   • flex-end：交叉轴结束的对齐
   • center：居中对齐
   • baseline：根据文本对齐
   • stretch：拉伸，无宽或者高时，起效