跳至主要內容

flex

zfh大约 11 分钟约 3351 字

基础概念

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

容器的属性

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-shrinkflex-basis 的简写,默认值为 0 1 auto。后两个属性可选。

关键字值

单值语法

  • 一个无单位数(number),会被当作 flex:number 1 0;
    • flex:1 ; 平分剩余空间
  • 一个有效的宽度width值,它会被当作 flex-basis 的值(会被当作flex:1 1 width)
  • 关键字 noneauto 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 属性完全一致。
上次编辑于:
本站勉强运行 小时