flex 布局详解

·  阅读 133
flex 布局详解

平时开发各种布局基本上可以 flex 一把梭,不用再纠结 float 这个神奇属性了。但一直又没有专门去记忆一下 flex 的属性,开发的时候还是顺手百度下属性的含义,略显不够专业[旺柴]。索性抽时间把每个属性就都总结下吧,查漏补缺。

总览

flex

下边按照上图的顺序来详细说明下每个属性的作用,并且参考 W3C 提到的代码结构:

<!DOCTYPE html>
<html>
<head>
<style>
// 父元素
.flex-container {
  display: flex;
  flex-direction: row;
  background-color: DodgerBlue;
}

// 子元素
.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

</body>
</html>
复制代码

代码总体结构都是上边的样子,下边介绍的时候就省略了。

各属性

flex

display: flex;

父元素变为 flex 布局,并且为 block 块级元素。

.flex-container {
  display: flex;
  background-color: DodgerBlue;
  margin: 10px;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>
<div class="flex-container">
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>
复制代码

display: inline-flex;

父元素变为 flex 布局,并且是行内元素。

.flex-container {
  display: inline-flex;
  background-color: DodgerBlue;
  margin: 10px;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>
<div class="flex-container">
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>
复制代码

两个元素会在同一行展示。

flex-direction

display: flex/inline-flex -> 父元素 -> flex-flow: -> flex-direction: -> row

row 为默认值

.flex-container {
  display: flex;
  flex-direction: row;
  background-color: DodgerBlue;
}
复制代码

在水平方向从左到右排列,同时决定了主轴为水平方向。

display: flex/inline-flex -> 父元素 -> flex-flow: -> flex-direction: -> row-reverse

.flex-container {
  display: flex;
  flex-direction: row-reverse;
  background-color: DodgerBlue;
}
复制代码

在水平方向从右到左排列,同时决定了主轴为水平方向。

display: flex/inline-flex -> 父元素 -> flex-flow: -> flex-direction: -> column

.flex-container {
  display: flex;
  flex-direction: column;
  background-color: DodgerBlue;
}
复制代码

在垂直方向从上到下排列,同时决定了主轴为垂直方向。

display: flex/inline-flex -> 父元素 -> flex-flow: -> flex-direction: -> column-reverse

.flex-container {
  display: flex;
  flex-direction: column-reverse;
  background-color: DodgerBlue;
}
复制代码

在垂直方向从下到上排列,同时决定了主轴为垂直方向。

下边为了简明,各属性都是默认主轴为水平方向进行举例

flex-wrap

display: flex/inline-flex -> 父元素 -> flex-flow: ->flex-wrap: -> wrap

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: DodgerBlue;
}
复制代码

当空间不够的时候自动换行。

display: flex/inline-flex -> 父元素 -> flex-flow: -> flex-direction: -> nowrap

nowrap 为默认值。

.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
}
复制代码

当空间不够不进行换行,默认会进行压缩。

display: flex/inline-flex -> 父元素 -> flex-flow: -> flex-direction: -> wrap-reverse

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
  background-color: DodgerBlue;
}
复制代码

在水平方向从左到右排列,同时使交叉轴的排列方向反向。

默认交叉轴是垂直方向,并且是从上到下。所以加了 wrap-reverse 就是从下到上了。

flex-flow

display: flex/inline-flex -> 父元素 -> flex-flow:

上边介绍的 flex-directionflex-wrap 可以合写为 flex-flow ,它们共同决定了主轴和交叉轴的排列方向,从左到右(从右到左)和从上到下(从下到上)的组合。

.flex-container {
  display: flex;
  flex-flow: row-reverse wrap-reverse;
  background-color: DodgerBlue;
}
复制代码

主轴为水平方向,row-reverse 从右到左,wrap-reverse 交叉轴从下到上。

justify-content

display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> (主轴-默认水平方向)justify-content: -> center

.flex-container {
  display: flex;
  justify-content: center;
  background-color: DodgerBlue;
}
复制代码

子元素居中

image-20211129094950145

display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> (主轴-默认水平方向)justify-content: -> flex-start

.flex-container {
  display: flex;
  justify-content: flex-start;
  background-color: DodgerBlue;
}
复制代码

子元素靠左对齐,并且 flex-start 为默认值。

image-20211130080749495

display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> (主轴-默认水平方向)justify-content: -> flex-end

.flex-container {
  display: flex;
  justify-content: flex-end;
  background-color: DodgerBlue;
}
复制代码

子元素靠右对齐。

image-20211130081000845

display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> (主轴-默认水平方向)justify-content: -> space-around

.flex-container {
  display: flex;
  justify-content: space-around;
  background-color: DodgerBlue;
}
复制代码

子元素均匀分布,元素之间的空白是两边的两倍。

image-20211130081237620

display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> (主轴-默认水平方向)justify-content: -> space-between

.flex-container {
  display: flex;
  justify-content: space-between;
  background-color: DodgerBlue;
}
复制代码

子元素均匀分布,两边不留白。

image-20211130081549052

display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> (主轴-默认水平方向)justify-content: -> space-evenly

.flex-container {
  display: flex;
  justify-content: space-evenly;
  background-color: DodgerBlue;
}
复制代码

子元素真均匀分布,空白全部相同。

image-20211130081932235

align-items

display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> (交叉轴-默认垂直方向)align-items: -> center

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
  background-color: DodgerBlue;
}
复制代码

子元素垂直方向居中。

image-20211130082846108

display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> (交叉轴-默认垂直方向)align-items: -> flex-start

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
  background-color: DodgerBlue;
}
复制代码

子元素垂直方向顶部。

image-20211130083006758

display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> (交叉轴-默认垂直方向)align-items: -> flex-end

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
  background-color: DodgerBlue;
}
复制代码

子元素垂直方向底部。

image-20211130083115323

display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> (交叉轴-默认垂直方向)align-items: -> stretch

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
  background-color: DodgerBlue;
}
复制代码

子元素垂直方向拉伸,stretch 为默认值。

image-20211130083228595

display: flex/inline-flex -> 父元素 -> 单行元素的对齐方式 -> (交叉轴-默认垂直方向)align-items: -> baseline

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
  background-color: DodgerBlue;
}

<div class="flex-container">
  <div><h1>1</h1></div>
  <div><h6>2</h6></div>
  <div><h3>3</h3></div>  
  <div><small>4</small></div>  
</div>
复制代码

当字体大小不一致的时候,根据字体的 baseline 对齐。

image-20211130083432539

align-content

display: flex/inline-flex -> 父元素 -> 多行元素的对齐方式 -> (交叉轴-垂直方向)align-content: -> space-between

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
  background-color: DodgerBlue;
}
复制代码

垂直方向,均匀分布,顶部底部没有空白。

image-20211130084315882

display: flex/inline-flex -> 父元素 -> 多行元素的对齐方式 -> (交叉轴-垂直方向)align-content: -> space-around

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
  background-color: DodgerBlue;
}
复制代码

垂直方向,均匀分布,顶部底部有空白,是元素之前空白的一半。

image-20211130084802439

display: flex/inline-flex -> 父元素 -> 多行元素的对齐方式 -> (交叉轴-垂直方向)align-content: -> space-evenly

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-evenly;
  background-color: DodgerBlue;
}
复制代码

垂直方向,真均匀分布,空白全部相同。

image-20211130085611844

display: flex/inline-flex -> 父元素 -> 多行元素的对齐方式 -> (交叉轴-垂直方向)align-content: -> stretch

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
  background-color: DodgerBlue;
}
复制代码

垂直拉伸占据空间剩余的空间,stretch 为默认值。

image-20211130084946459

display: flex/inline-flex -> 父元素 -> 多行元素的对齐方式 -> (交叉轴-垂直方向)align-content: -> flex-start

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
  background-color: DodgerBlue;
}
复制代码

垂直方向,顶部对齐。

image-20211130085211401

display: flex/inline-flex -> 父元素 -> 多行元素的对齐方式 -> (交叉轴-垂直方向)align-content: -> flex-end

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
  background-color: DodgerBlue;
}
复制代码

垂直方向,底部对齐。

image-20211130085257855

order

display: flex/inline-flex -> 子元素 -> order

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

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>
复制代码

根据 order 排列。

image-20211130093043919

flex-grow

display: flex/inline-flex -> 子元素 -> flex -> flex-grow

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

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>
复制代码

当有剩余空间时,是否进行拉伸,默认值 0 ,不拉伸。

有多个元素设置 flex-grow 的时候,值代表他们要增加的长度各自占额外空间的比例。

image-20211130093159628

flex-shrink

display: flex/inline-flex -> 子元素 -> flex -> flex-shrink

.flex-container {
  display: flex;
  background-color: #f1f1f1;
}
.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>
复制代码

当空间不足时,是否进行压缩,默认值是 1,进行压缩,0 代表不压缩。

有多个元素设置 flex-shrink 的时候,值代表他们各自占要减少空间的比例。

image-20211130094702390

flex-basis

display: flex/inline-flex -> 子元素 -> flex-> flex-basis

.flex-container {
  display: flex;
  background-color: #f1f1f1;
}
.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis:200px">3</div>
  <div>4</div>
</div>
复制代码

主轴方向初始的宽度。

image-20211130095156537

flex

display: flex/inline-flex -> 子元素 -> flex

flex-growflex-shrinkflex-basis 三个属性的合并写法。

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

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>
复制代码

image-20211201072712816

align-self

align-items 的属性相同,优先级更高,覆盖父元素的属性。

.flex-container {
  display: flex;
  height: 200px;
  background-color: #f1f1f1;
}

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>
复制代码

默认是 stretch3 元素将会居中。

image-20211201073714384

举几个🌰

卡片类的image-20211201093202026

图文垂直居中的

image-20211201095347875

靠左靠右的,这种除了用 space-between ,也可以给右边的元素设置 margin-left: auto;

image-20211201095812357

等等还有很多,基本上 flex 都可以搞定。

上边就是 flex 的常用属性(不是全部)了,掌握以后就可以更加愉快的做「切图仔」了!

这些属性主要就是两类,一类决定排列的方向(从上到下、从下到上、从左到右、从右到左),一类决定对齐的方式(居中、居上、居下等)。

flex

分类:
前端
标签: