flex布局及常用属性，学flex收藏这个就够用了，超详细分析“建议收藏”

目录

常见父项属性

子项常见属性

背景线性渐变

---

常见父项属性

flex-direction:设置主轴方向

(主轴是y轴，那侧轴就是x轴，反之一样)

默认x轴（从左到右）：row

从右到左：row-reverse

y轴（从上到下）：column

从下到上：column-reverse

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

flex-start:默认值从头开始

flex-end:从尾部开始

center:在主轴居中对齐

space-around:平均分配剩余空间

space-between:先两边贴边再平分剩余空间

flex-wrap:设置元素是否换行

nowrap:默认值，不换行

wrap:换行

align-content:设置侧轴上的子元素排列方式（多行）//侧轴就是上下，贴上还是贴下或者上下居中

flex-start：默认在侧轴的头部开始排列

flex-end：在侧轴的尾部开始排列

center：在侧轴的中间显示

space-around：子项在侧轴平分剩余空间

space-between：子项在侧轴先分布在两头，再分剩余空间

stretch：设置子项元素高度平分父元素高度

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

flex-start:默认值从上到下

flex-end:从下到上

center:挤在一起居中

stretch:拉伸

flex-flow:复合属性，相当于flex-direction和lex-wrap

子项常见属性

flex:子项目的份数，写数值即可

align-self:控制子项在自己侧轴的排列方式

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

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

order:属性定义子项的排列顺序（前后顺序）

数值越小越靠前，默认为0，跟z-index不一样

背景线性渐变

background:linear-gradient(起始方向,颜色1,颜色2,...);

背景渐变必须加浏览器私有前缀

起始方向可以是：方位名词或度数，如果忽略默认就是top