Flex

6 阅读4分钟

1. flexDirection

flexDirection 属性决定了主轴(main axis)的方向。子元素会根据主轴方向排列。

  • row(默认值):子元素沿水平方向排列(从左到右)。
  • row-reverse:子元素沿水平方向排列(从右到左)。
  • column:子元素沿垂直方向排列(从上到下)。
  • column-reverse:子元素沿垂直方向排列(从下到上)。
container: {
  flexDirection: 'row',  // 默认,水平排列
}

2. justifyContent

justifyContent 用于在主轴方向上对齐子元素。它控制子元素如何沿主轴分布。

  • flex-start:将子元素对齐到主轴的开始位置。
  • flex-end:将子元素对齐到主轴的结束位置。
  • center:将子元素居中对齐。
  • space-between:子元素均匀分布,第一个和最后一个子元素靠近容器两端。
  • space-around:子元素均匀分布,每个子元素两侧都有相等的空隙。
  • space-evenly:子元素均匀分布,空隙相等,包括子元素的两端。
container: {
  justifyContent: 'center',  // 子元素沿主轴居中
}

3. alignItems

alignItems 控制子元素在交叉轴(与主轴垂直的方向)上的对齐方式。

  • flex-start:将子元素对齐到交叉轴的开始位置。
  • flex-end:将子元素对齐到交叉轴的结束位置。
  • center:将子元素沿交叉轴居中对齐。
  • stretch(默认值):子元素拉伸以填满交叉轴。
  • baseline:将子元素的基线对齐。
container: {
  alignItems: 'center',  // 子元素沿交叉轴居中
}

4. alignSelf

alignSelf 用来覆盖 alignItems 对单个子元素的对齐设置。它允许单个元素在交叉轴方向上有不同的对齐方式。

  • auto(默认):使用父容器的 alignItems 设置。
  • flex-start:将该元素对齐到交叉轴的开始位置。
  • flex-end:将该元素对齐到交叉轴的结束位置。
  • center:将该元素沿交叉轴居中对齐。
  • stretch:将该元素拉伸以填满交叉轴。
  • baseline:将该元素的基线对齐。
item: {
  alignSelf: 'flex-end',  // 单个元素在交叉轴上靠末尾对齐
}

5. flexWrap

flexWrap 控制子元素是否换行。如果子元素的宽度超过了父容器的宽度,它们是否应该换行。

  • nowrap(默认值):子元素不换行。
  • wrap:子元素换行,且新行会按照主轴方向排列。
  • wrap-reverse:子元素换行,但新行排列的顺序与默认相反。
container: {
  flexWrap: 'wrap',  // 允许子元素换行
}

6. flex

flex 是一个简写属性,决定了元素如何在父容器内分配剩余空间。它是由 flexGrow, flexShrinkflexBasis 组合而成。

  • flexGrow:决定元素如何增长。值越大,元素在父容器中占据的空间越多。
  • flexShrink:决定元素如何缩小。值越大,元素在空间不足时会缩小得越多。
  • flexBasis:设置元素的初始大小。它是元素占据空间的基本值,通常用于设定元素的固定宽度或高度。

flex 简写:

  • flex: 1:表示 flexGrow: 1, flexShrink: 1, flexBasis: 0%。即元素可以占据所有剩余空间并且会根据容器的空间变化进行伸缩。
  • flex: 0.5:表示 flexGrow: 0.5, flexShrink: 1, flexBasis: 0%。即元素占据剩余空间的一部分,并且可以缩小。
  • flex: 'none' :等同于 flex: 0,表示元素不会伸展,保持其初始大小。
item: {
  flex: 1,  // 元素占据所有剩余空间
}

7. flexGrow

flexGrow 是指子元素相对于其他元素的增长因子。如果容器有多余的空间,flexGrow 值大的元素将占据更多的空间。

item: {
  flexGrow: 2,  // 该元素占据两倍于其他元素的剩余空间
}

8. flexShrink

flexShrink 控制元素在空间不足时如何缩小。当父容器的空间不足时,flexShrink 值较大的元素会缩小得更多。

item: {
  flexShrink: 1,  // 元素在空间不足时进行缩小
}

9. flexBasis

flexBasis 设置元素的初始大小,通常用于设置固定宽度或高度。

item: {
  flexBasis: 100,  // 元素的初始大小为100px
}

10. alignContent

alignContent 在多行的情况下控制行与行之间的对齐方式。

  • flex-start:行与行对齐到容器的起始位置。
  • flex-end:行与行对齐到容器的结束位置。
  • center:行与行居中对齐。
  • space-between:行与行之间均匀分布,第一行和最后一行靠近容器两端。
  • space-around:行与行之间均匀分布,每行两侧有相等的空隙。
  • stretch:行与行拉伸以填满容器的交叉轴。
container: {
  alignContent: 'space-between',  // 多行时,行之间均匀分布
}

总结

  • flexDirection:决定主轴方向。
  • justifyContent:控制主轴方向上子元素的对齐方式。
  • alignItems:控制交叉轴方向上子元素的对齐方式。
  • alignSelf:控制单个子元素在交叉轴上的对齐方式。
  • flexWrap:控制子元素是否换行。
  • flex:组合了 flexGrow, flexShrink, flexBasis,用于控制元素如何伸展和缩小。
  • flexGrow:控制元素如何增长。
  • flexShrink:控制元素如何缩小。
  • flexBasis:设置元素的初始大小。
  • alignContent:多行时控制行与行之间的对齐方式。