属性与用法

常用父项属性

• 通过父元素属性, 控制子项的布局, 使用时给父元素样式中加上display: flex 即可启用
• web中主轴默认为水平方向(row), react-native中默认是竖直方向
• 子元素沿着主轴排列

以下 6 个属性是对父元素设置的:

1. flex-direction：设置主轴的方向
2. justify-content：设置主轴上的子元素排列方式 (居左, 居中, 居右)
3. flex-wrap：设置子元素是否换行 (默认不换行)
4. align-content：设置侧轴上的子元素的排列方式（多行）
5. align-items：设置侧轴上的子元素排列方式（单行）
6. flex-fow：复合属性，相当于同时设置了 flex- direction 和 flex-wrap

---

justify-content

• space-around: 先用总空间 减去 所有已知宽度的元素长度之和 ,再把剩余的空间平均分给每个元素的左右两边

• space-between: 最左边元素的左边和最右边元素的右边不分配空间

  Tips: 剩余空间指的是总宽度减去所有已知宽度元素的宽度之和,

  未指定宽度的元素视宽度为0

align-items

控制子项在侧轴上的排列方式, 仅在子项为单行时有效

align-content

控制子项在侧轴上的排列方式, 仅在子项为多行(判断依据是子元素有换行)时有效

常用子项属性

• flex : 表示剩余空间分配完成后, 某子项的宽度(高度)与其他子项的比例关系
• align-self : 控制子项自己在侧轴的排列方式
• order : 定义子项的排列顺序（前后顺序）

flex

例如有3个未设宽度的元素, 希望他们的宽度比例为3:2:1, 则可以分别设置他们的flex值为3,2,1 这3个元素将按照3:2:1分配所有剩余宽度 当只有一个元素时, 设置flex值为1. 表示独占所有剩余宽度

align-self

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。 默认值为 auto，表示继承父元素的 align- items 属性，如果没有父元素，则等同于 stretch

order

默认值为0, 若设为负数元素将前置, 设为更大的数值元素则后置