flex

zfh大约 11 分钟约 3351 字...

基础概念

flex 容器：采用 flex 布局的元素，称为 flex 容器
flex 项目：flex 容器的所有子元素自动成为容器成员，称为 flex 项目
容器默认存在两根轴：水平的主轴main axis和垂直的交叉轴cross axis
项目默认沿主轴排列

容器的属性

display

决定了是否使用 flex 布局

display:flex将对象作为弹性伸缩盒显示

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

.container {
  display: flex;
  background-color: #f1f1f1;
}
.box {
  background-color: #7ea5ff;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}

diisplay:inline-flex 将对象作为内联块级弹性伸缩盒显示

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

.container {
  display: inline-flex;
  background-color: #f1f1f1;
}
.box {
  background-color: #7ea5ff;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}

flex-direction

决定主轴的方向（即项目的排列方向）

row（默认值）主轴为水平方向，起点在左端

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

.container {
  display: flex;
  flex-direction: row;
  background-color: #f1f1f1;
}
.box {
  background-color: #7ea5ff;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}

row-reverse 主轴为水平方向，起点在右端

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

.container {
  display: flex;
  flex-direction: row-reverse;
  background-color: #f1f1f1;
}
.box {
  background-color: #7ea5ff;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}

column 主轴为垂直方向，起点在上沿

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

.container {
  display: flex;
  flex-direction: column;
  background-color: #f1f1f1;
}
.box {
  background-color: #7ea5ff;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}

column-reverse 主轴为垂直方向，起点在下沿

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

.container {
  display: flex;
  flex-direction: column-reverse;
  background-color: #f1f1f1;
}
.box {
  background-color: #7ea5ff;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}

flex-wrap

默认情况下，项目都排在一条轴线上，flex-wrap 属性定义，如一果条轴线排不下，如何换行

nowrap（默认值）不换行

如果项目的宽度加和超过容器的宽度会自动压缩每个项目的宽度

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

.container {
  display: flex;
  flex-wrap: nowrap;
  background-color: #f1f1f1;
  width: 180px;
}
.box {
  background-color: #7ea5ff;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}

wrap 换行第一行在上方

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  background-color: #f1f1f1;
  width: 180px;
}
.box {
  background-color: #7ea5ff;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}

wrap-reverse 换行第一行在下方

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap-reverse;
  background-color: #f1f1f1;
  width: 180px;
}
.box {
  background-color: #7ea5ff;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}

flex-flow

flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap

justify-content

定义了项目在主轴上的对齐方式

flex-start(默认值) 左对齐

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

.container {
  display: flex;
  justify-content: flex-start;
  background-color: #f1f1f1;
}
.box {
  background-color: #7ea5ff;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}

flex-end 右对齐

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

.container {
  display: flex;
  justify-content: flex-end;
  background-color: #f1f1f1;
}
.box {
  background-color: #7ea5ff;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}

center 居中

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

.container {
  display: flex;
  justify-content: center;
  background-color: #f1f1f1;
}
.box {
  background-color: #7ea5ff;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}

space-between 两端对齐，项目之间的间隔都相等

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

.container {
  display: flex;
  justify-content: space-between;
  background-color: #f1f1f1;
}
.box {
  background-color: #7ea5ff;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}

space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

.container {
  display: flex;
  justify-content: space-around;
  background-color: #f1f1f1;
}
.box {
  background-color: #7ea5ff;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}

align-items

定义项目在交叉轴上如何对齐

stretch(默认值)：如果 Flex 项目未设置交叉轴方向的大小，将占满整个容器交叉轴方向的大小

<div class="container">
  <div class="box">1</div>
  <div class="box box-height">2</div>
  <div class="box box-height">3</div>
  <div class="box ">4</div>
</div>

.container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.box {
  background-color: #7ea5ff;
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}
.box-height {
  height: 100px;
  line-height: 100px;
}

flex-start 交叉轴的起点对齐

<div class="container">
  <div class="box box-height">1</div>
  <div class="box">2</div>
  <div class="box box-height">3</div>
  <div class="box ">4</div>
</div>

.container {
  display: flex;
  align-items: flex-start;
  background-color: #f1f1f1;
}

.box {
  background-color: #7ea5ff;
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}
.box-height {
  height: 100px;
  line-height: 100px;
}

flex-end 交叉轴的终点对齐

<div class="container">
  <div class="box box-height">1</div>
  <div class="box">2</div>
  <div class="box box-height">3</div>
  <div class="box ">4</div>
</div>

.container {
  display: flex;
  align-items: flex-end;
  background-color: #f1f1f1;
}

.box {
  background-color: #7ea5ff;
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}
.box-height {
  height: 100px;
  line-height: 100px;
}

center 交叉轴的中点对齐(垂直居中)

<div class="container">
  <div class="box box-height">1</div>
  <div class="box">2</div>
  <div class="box box-height">3</div>
  <div class="box ">4</div>
</div>

.container {
  display: flex;
  align-items: center;
  background-color: #f1f1f1;
}

.box {
  background-color: #7ea5ff;
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}
.box-height {
  height: 100px;
  line-height: 100px;
}

baseline项目的第一行文字的基线对齐

<div class="container">
  <div class="box box-height">1</div>
  <div class="box">2</div>
  <div class="box box-height">3</div>
  <div class="box ">4</div>
</div>

.container {
  display: flex;
  align-items: baseline;
  background-color: #f1f1f1;
}

.box {
  background-color: #7ea5ff;
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
  text-decoration: underline red;
}
.box-height {
  font-size: 15px;
  height: 100px;
  line-height: 100px;
}

align-content

定义了存在多根主轴线时，flex 项目在交叉轴上的对齐方式

如果项目只有一根主轴线，该属性不起作用

stretch(默认值) 主轴线平分 Flex 容器交叉轴方向上的空间
和align-item一样，如果 Flex 项目未设置交叉轴方向的大小或设为 auto，将占满整个容器交叉轴方向的大小

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  background-color: #f1f1f1;
  width: 200px;
  height: 300px;
}
.box {
  background-color: #7ea5ff;
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}

flex-start 交叉轴的起点对齐

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  background-color: #f1f1f1;
  width: 200px;
  height: 300px;
  align-content: flex-start;
}
.box {
  background-color: #7ea5ff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}

flex-end 交叉轴的终点对齐

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  background-color: #f1f1f1;
  width: 200px;
  height: 300px;
  align-content: flex-end;
}
.box {
  background-color: #7ea5ff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}

center 与交叉轴的中点对齐

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  background-color: #f1f1f1;
  width: 200px;
  height: 300px;
  align-content: center;
}
.box {
  background-color: #7ea5ff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}

space-between 与交叉轴的两端对齐，轴线之间的间隔平均分布

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  background-color: #f1f1f1;
  width: 200px;
  height: 300px;
  align-content: space-between;
}
.box {
  background-color: #7ea5ff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}

space-around 每根轴线两侧的间隔都相等，所以轴线之间的间隔比轴线与边框大一倍

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  background-color: #f1f1f1;
  width: 200px;
  height: 300px;
  align-content: space-around;
}
.box {
  background-color: #7ea5ff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}

项目的属性

order

属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0。

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

.container {
  display: flex;
  background-color: #f1f1f1;
}
.box {
  background-color: #7ea5ff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}
.container .box:nth-child(3) {
  order: -1;
}

flex-grow

属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有项目的 flex-grow 属性都为 1，则它们将等分主轴剩余空间（如果有的话）。如果一个项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的主轴剩余空间将是其他项的 2 倍。

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

.container {
  display: flex;
  background-color: #f1f1f1;
  width: 400px;
}
.box {
  background-color: #7ea5ff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}
.container .box:nth-child(3) {
  flex-grow: 1;
}

如果有的项目有 flex-grow 属性，有的项目没有 flex-grow 属性,但有 width 属性，有 flex-grow 属性的项目将等分主轴剩余空间

<div class="container">
  <div class="boX">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

.container {
  display: flex;
  background-color: #f1f1f1;
  width: 400px;
}
.box {
  background-color: #7ea5ff;
  flex-grow: 1;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}
.boX {
  background-color: #7ea5ff;
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}

flex-shrink

属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小。
负值对该属性无效。

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

.container {
  display: flex;
  background-color: #f1f1f1;
  width: 200px;
}
.box {
  background-color: #7ea5ff;
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 40px;
}
.container .box:nth-child(3) {
  flex-shrink: 0;
}

flex-basis

优先级高于 width(或 height)
属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex

属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。

关键字值

单值语法

一个无单位数(number),会被当作 flex:number 1 0;
- flex:1 ; 平分剩余空间
一个有效的宽度width值，它会被当作 flex-basis 的值(会被当作flex:1 1 width)
关键字 none，auto 或 initial
- flex: auto; 元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 "flex: 1 1 auto"
- flex: initial;元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。相当于将属性设置为"flex: 0 1 auto"
- flex: none; 元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto"

双值语法

第一个值必须为一个无单位数，并且它会被当作 flex-grow 的值。第二个值必须为以下之一：

一个无单位数：它会被当作 flex-shrink 的值
一个有效的宽度值: 它会被当作 flex-basis 的值

三值语法

第一个值必须为一个无单位数，并且它会被当作 flex-grow 的值
第二个值必须为一个无单位数，并且它会被当作 flex-shrink 的值。
第三个值必须为一个有效的宽度值，并且它会被当作 flex-basis 的值

align-self

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

该属性可能取 6 个值，除了 auto，其他都与 align-items 属性完全一致。

flex

# 基础概念

# 容器的属性

# display

# flex-direction

# flex-wrap

# flex-flow

# justify-content

# align-items

# align-content

# 项目的属性

# order

# flex-grow

# flex-shrink

# flex-basis

# flex

# 关键字值

# 单值语法

# 双值语法

# 三值语法

# align-self

预览:

基础概念

容器的属性

display

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

项目的属性

order

flex-grow

flex-shrink

flex-basis

flex

关键字值

单值语法

双值语法

三值语法

align-self