前端文档

Appearance

On this page

父容器属性

WARNING

需要注意的是: 当设置了 flex 布局之后，子元素的 float 、clear 、vertical-align 的属性将失效。

1. display

css
.container {
  display: flex | inline-flex;
}
.container {
  display: flex | inline-flex;
}
  • flex 将对象作为弹性伸缩盒显示

效果: 没有为父元素设置 宽度 和 高度，flex 属性将容器设置为 块级元素，所以将宽度为100%，高度 由子元素 高度 自适应。

1
2
3
4
5
  • inline-flex 将对象作为内联块级弹性伸缩盒显示

效果: 未给父元素设置 宽度 和 高度，inline-flex 将容器设置为 内联元素，宽高 根据子元素内容自适应。

1
2
3
4
5

2. flex-direction

决定主轴的方向(即子项的排列方向)

css
.container {
  flex-direction: row | row-reverse | column | column-reverse; //row 为默认值
}
.container {
  flex-direction: row | row-reverse | column | column-reverse; //row 为默认值
}
  • row 默认值，主轴为水平方向，从左到右排列。
1
2
3
4
5
  • row-reverse 主轴为水平方向，从右到左排列。
1
2
3
4
5
  • column 主轴为垂直方向，从上到下排列。
1
2
3
4
5
  • column-reverse 主轴为垂直方向，从下到上排列。
1
2
3
4
5

3. flex-wrap

决定容器内子项是否可换行

css
.container {
  flex-wrap: nowrap | wrap | wrap-reverse; //nowrap 默认值
}
.container {
  flex-wrap: nowrap | wrap | wrap-reverse; //nowrap 默认值
}
  • nowrap 默认值, 不换行，即当主轴宽度固定时，当空间不足时，子项宽度将失效，子项宽度会随之调整而并不会挤到下一行。
1
2
3
4
5
  • wrap 子项总宽度超出容器时换行，第一行在上方。
1
2
3
4
5
  • wrap-reverse 换行，第一行在下方。
1
2
3
4
5

4. flex-flow

flex-direction 和 flex-wrap 的简写形式

css
.container {
  // 默认值 flex-flow: row nowrap
  flex-flow: <flex-direction> || <flex-wrap>;
}
.container {
  // 默认值 flex-flow: row nowrap
  flex-flow: <flex-direction> || <flex-wrap>;
}

5. justify-content

定义了子项在主轴的对齐方式。

css
.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; //flex-start 默认值
}
.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; //flex-start 默认值
}
  • flex-start 默认值, 所有子项左对齐
1
2
3
4
5
  • flex-end 所有子项右对齐
1
2
3
4
5
  • center 所有子项居中对齐
1
2
3
4
5
  • space-between 两端对齐，子项间距相等
1
2
3
4
5
  • space-around 子项左右间距相等
1
2
3
4
5
  • space-evenly 子项间距相等
1
2
3
4
5

5. align-items

定义了子项在交叉轴上的对齐方式

css
.container {
  align-items: flex-start | flex-end | center | baseline | stretch; //stretch 默认值
}
.container {
  align-items: flex-start | flex-end | center | baseline | stretch; //stretch 默认值
}
  • stretch 默认值，如果子项未设置高度或者设为 auto，将占满整个容器的高度。如何子项设置了具体高度，则按设置高度值为准
  1. 不设置高度或者设为 auto，子项高度将撑满
1
2
3
4
5
  1. 设置子项高度为 50px
1
2
3
4
5
  • flex-start 交叉轴的起点对齐
1
2
3
4
5
  • flex-end 交叉轴的终点对齐
1
2
3
4
5
  • center 交叉轴的中点对齐
1
2
3
4
5
  • baseline 子项的第一行文字底部的基线对齐
1
2
3
4
5