flex基础属性 | Ryo的小站

以下所有代码的示例都在仓库

基本概念

flex 是弹性布局，任何一个容器都可以指定为 flex 布局。只需要设置display: flex即可。在设为 flex 布局后，子元素的float,clear,vertical-align属性会失效

应用在容器上的属性

1. flex-direction 设置项目的主轴

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

2. flex-wrap 设置项目是否换行

nowrap(默认值): 不换行
wrap: 换行
wrap-reverse: 换行，第一行在下方

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

3. flex-flow 以上两个的简写

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row
  nowrap。
  .container {
  flex-flow: <flex-direction> || <flex-wrap>;
}

4. justify-content 设置项目在主轴上的对齐方式

flex-start: 在主轴的开始位置按顺序排序
flex-end: 在主轴的结束位置按顺序排序
center: 项目集中在主轴的中间
space-between: 两边对齐，项目之间的间隔相等
space-around: 每个项目两侧的间隔相等，所以，项目和项目之间的间隔比项目与边框的间隔大一倍

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

5. align-items 设置所有项目在交叉轴上的位置

stretch（默认值）：如果项目未设置高度或设为 auto，将占满整个容器的高度。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

6. align-content 用来分配交叉轴方向的剩余空间表现行为和 justify-content 属性一致，除了多出一个 stretch.

stretch（默认值）：轴线占满整个交叉轴。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

如果 flex 项目未显式设置height或block-size时，除了设置 stretch 属性会拉伸 flex 项目，设置为其他属性时会改变 flex 项目的高度为内容最大高度

.container {
  align-content: flex-start | flex-end | center | space-between | space-around |
    stretch;
}

应用在项目上的属性

1. order 属性定义项目的排列顺序，数值越小，月考勤，默认为 0（不推荐使用，性能损耗大）

.item {
  order: <number>;
}

2. flex-grow 定义项目的放大比例，默认为 0。即存在剩余空间也不放大。

在一个 flex 容器内，如果给项目设置了 flex-grow,那么会每个设置了 flex-grow 的项目都会多分到: (剩余空间宽度/flex-grow 总数) * 当前项目 flex-grow 数
假设容器宽度为 600px,有三个项目 width 都为 100px, 后两个分别设置了以下属性，那么最后计算出来的宽度就是
item1: 100px,item2:200px, item3: 300px;

.item2 {
  flex-grow: 1;
}
.item3 {
  flex-grow: 2;
}

3. flex-shrink

.item {
  flex-shrink: <number>;
}

定义项目的缩小比例，默认为 1，即如果容器空间不足，容器内的项目缩小。
但是 flex-shrink 会组织 flex 项目缩小为 0。所以继续缩小会按照min-content的大小计算。
这就是为什么显式设置flex:1不一定能让所有 flex 项目宽度相等的主要原因之一。所以有一个小技巧就是
要实现等分列布局效果时，显示的在 flex 项目上设置min-width:0，避免内容不等长，造成列不等分

4. flex-basis

.item {
  flex-basis: <length> | auto; /* default auto */
}

默认值时 auto ，用于给项目设置一个初始化的尺寸(理想的尺寸)。之所以说是理想的尺寸，是因为根据浏览器会
根据 content ➜ width ➜ flex-basis 来决定用哪个值来初始化 Flex 项目的假设主尺寸。如果 Flex 项目显式设置了 flex-basis 属性，则会忽略 width 和 content 。但最终浏览器计算出来的 Flex 项目主尺寸（计算后的 flex-basis 属性的值）会受到 CSS 的 min-* 和 max-* 属性值的限制，其中 min-* 用来设置 Flex 项目的下限值，max-*用来设置 Flex 项目的上限值。

5. flex(建议优先使用 flex 属性，而不是单独写三个分离的属性) 该属性是 flex-grow, flex-shrink, flex-basis 的简写，默认值是`0 1 auto`，后两个属性可选

.item {
  flex: none | [ < "flex-grow" > < "flex-shrink" >? || < "flex-basis" >];
}

6. align-self

该属性可用于设置单个项目与其他项目不同的对齐方式，会覆盖 align-items 属性，默认值为 auto(继承容器的 align-items 属性，如果父元素没设值则为 stretch)

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}