在父项目上的可添加的属性
父属性必须拥有display:flex这一项 负责所有属性不起作用
-
flex-direction 决定主轴的方向
- row水平向右
- row-reverse 水平向左
- column 垂直向下
- column-reverse垂直向上
-
justily-content 设置主轴上子元素的排列方式
- flex-start 主轴方向从头到尾
- flex-end 侧轴方向从尾到头排列
- center 在主轴居中对齐
- space-around 平分剩余空间
- space-between 先两边贴边，在平分剩余空间
- space-evenly 每个子项目的间隔相等包裹贴边
-
align-items 设置侧轴上子元素的排列方式（单行）
- flex-start 侧轴方向从头到尾排列
- flex-end 侧轴方向从尾到头排列
- center 侧轴剧中排列
- stretch 如果项目未设置高度，则会自己拉伸到父项的高度
- baseLine 项目的第一行文字的基线对齐
-
align-content 设置侧轴上子元素的排列方式（多行）
- flex-start 侧轴方向从头到尾排列
- flex-end 侧轴方向从尾到头排列
- center 侧轴剧中排列
- space-around 子项在侧轴平分剩余空间
- space-between 子项在侧轴先贴向两边，在平分剩余空间
- stretch 如果项目未设置高度，则会自己拉伸到父项的高度
- space-evenly 每一行元素都完全上下等分。
-
flex-wrap 设置子元素是否换行
- wrap
- nowrap
- wrap-reverse
在子项目上可添加的属性
- flex 分配剩余空间 值为0-9999
-
align-self
1. auto 自动
2. flex-start 从头到尾
3. flex-end 从尾到头
4. center 居中
5. baseline 项目的第一行文字的基线对齐
6. stretch 拉伸
