flex布局(学习笔记)

flex 是 flexible Box 的缩写，弹性布局。当我们为父盒子设为 flex 布局以后，子元素的 float、 vertical-align 属性将会失效。

flex布局父级常用的属性：

flex-direction：设置主轴的方向
flex-wrap：设置子元素是否换行
flex-flow：可以同时设置flex-direction、flex-wrap属性
justify-content：设置主轴上的子元素排列方式
align-content：设置侧轴上的子元素的排列方式（多行使用）
align-items：设置侧轴上的子元素排列方式（单行使用）

flex-direction设置主轴的方向

在 flex 布局中，是分为主轴和侧轴两个方向，默认主轴方向就是 x 轴方向，水平向右，默认侧轴方向就是 y 轴方向，水平向下。
flex-direction：row(默认值从左到右)，row-reverse(从右到左)，column(从上到下)，column-reverse(从下到上)。

flex-wrap设置是否换行

flex布局中默认是不换行的。Nowrap (默认)不换行，wrap 换行。

flex-flow：可以同时设置flex-direction、flex-wrap属性

flex-flow:row wrap;

justify-content：设置主轴上的子元素排列方式

flex-strat:默认值从头部开始如果主轴是x轴，则从左到右
flex-end:从尾部开始排列
center:在主轴居中对齐(如果主轴是x轴则水平居中)
space - around:平分剩余空间
space-between:先两边贴边再平分剩余空间

align-content：设置侧轴上的子元素的排列方式（多行使用，单行没有效果）

flex-strat:默认值从头部开始如果主轴是x轴，则从左到右
flex-end:从尾部开始排列
center:在主轴居中对齐(如果主轴是x轴则水平居中)
space - around:平分剩余空间
space-between:先两边贴边再平分剩余空间
stretch:设置子项元素高度平分父元素高度

align-items：设置侧轴上的子元素排列方式（单行使用）

flex-start:从头部开始
flex-end:从尾部开始
center:居中显示
stretch:拉伸

flex布局子级常用属性（在子级元素设置）

flex:子级元素占的份数
order:属性定义子元素的排列顺序（前后顺序）

flex：子级元素占的份数

flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。

.son { flex: num; /* 默认值 0 */ }

order：属性定义子元素的排列顺序（前后顺序）

数值越小，排列越靠前，默认为0。注意：和 z-index 不一样的。

.son { order: num; }

flex布局