一篇文章带你掌握Flex布局的所有用法（上）-阿里云开发者社区

一篇文章带你掌握Flex布局的所有用法（上）

2023-06-26 59

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 一篇文章带你掌握Flex布局的所有用法（上）

Flex 布局目前已经非常流行了,现在几乎已经兼容所有浏览器了。在文章开始之前我们需要思考一个问题:我们为什么要使用 Flex 布局?

其实答案很简单,那就是 Flex 布局好用。一个新事物的出现往往是因为旧事物不那么好用了,比如,如果想让你用传统的 css 布局来实现一个块元素垂直水平居中你会怎么做?实现水平居中很简单,margin: 0 auto就行,而实现垂直水平居中则可以使用定位实现:

<div class="container">
  <div class="item"></div>
</div>

.container {
  position: relative;
  width: 300px;
  height: 300px;
  background: red;
}
.item {
  position: absolute;
  background: black;
  width: 50px;
  height: 50px;
  margin: auto;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

或者

.item {
  position: absolute;
  background: black;
  width: 50px;
  height: 50px;
  margin: auto;
  left: calc(50% - 25px);
  top: calc(50% - 25px);
}

但是这样都显得特别繁琐,明明可以一个属性就能解决的事情没必要写这么麻烦。而使用 Flex 则可以使用 place-content 属性简单的实现(place-content 为 justify-content 和 align-content 简写属性)

.container {
  width: 300px;
  height: 300px;
  background: red;
  display: flex;
  flex-wrap:wrap;
  place-content: center;
}
.item {
  background: black;
  width: 50px;
  height: 50px;
}

接下来的本篇文章将会带领大家一起来探讨Flex布局

基本概念

我们先写一段代码作为示例(部分属性省略)

html

<div class="container">
  <div class="item">flex项目</div>
  <div class="item">flex项目</div>
  <div class="item">flex项目</div>
  <div class="item">flex项目</div>
</div>

.container {
  display: flex;
  width: 800px;
  gap: 10px;
}
.item {
  color: #fff;
}

flex 容器

我们可以将一个元素的 display 属性设置为 flex,此时这个元素则成为flex 容器比如container元素

flex 项目

flex 容器的子元素称为flex 项目,比如item元素

轴

flex 布局有两个轴,主轴和交叉轴,至于哪个是主轴哪个是交叉轴则有flex 容器的flex-direction属性决定,默认为:flex-direction:row,既横向为主轴,纵向为交叉轴,

flex-direction还可以设置其它三个属性,分别为row-reverse,column,column-reverse。

row-reverse

column

column-reverse

从这里我们可以看出 Flex 轴的方向不是固定不变的,它受到flex-direction的影响

不足空间和剩余空间

当 Flex 项目总宽度小于 Flex 容器宽度时就会出现剩余空间

当 Flex 项目总宽度大于 Flex 容器宽度时就会出现不足空间

Flex 项目之间的间距

Flex 项目之间的间距可以直接在 Flex 容器上设置 gap 属性即可,如

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
</div>

.container {
  display: flex;
  width: 500px;
  height: 400px;
  gap: 10px;
}
.item {
  width: 150px;
  height: 40px;
}

Flex 属性

flex属性是flex-grow,flex-shrink,flex-basis三个属性的简写。下面我们来看下它们分别是什么。

flex-basis可以设定 Flex 项目的大小,一般主轴为水平方向的话和 width 解析方式相同,但是它不一定是 Flex 项目最终大小,Flex 项目最终大小受到flex-grow,flex-shrink以及剩余空间等影响,后面文章会告诉大家最终大小的计算方式
flex-grow为 Flex 项目的扩展系数,当 Flex 项目总和小于 Flex 容器时就会出现剩余空间,而flex-grow的值则可以决定这个 Flex 项目可以分到多少剩余空间
flex-shrink为 Flex 项目的收缩系数,同样的,当 Flex 项目总和大于 Flex 容器时就会出现不足空间,flex-shrink的值则可以决定这个 Flex 项目需要减去多少不足空间

既然flex属性是这三个属性的简写,那么flex属性简写方式分别代表什么呢?

flex属性可以为 1 个值,2 个值,3 个值,接下来我们就分别来看看它们代表什么意思

一个值

如果flex属性只有一个值的话,我们可以看这个值是否带单位,带单位那就是flex-basis,不带就是flex-grow

.item {
  flex: 1;
  /* 相当于 */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}
 .item {
  flex: 30px;
  /* 相当于 */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 30px;
}

两个值

当flex属性有两个值的话,第一个无单位的值就是flex-grow,第二个无单位的值则是flex-shrink,有单位的就是flex-basis

.item {
  flex: 1 2;
  /* 相当于 */
  flex-grow: 1;
  flex-shrink: 2;
  flex-basis: 0;
}
 .item {
  flex: 30px 2;
  /* 相当于 */
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: 30px;
}

三个值

当flex属性有三个值的话,第一个无单位的值就是flex-grow,第二个无单位的值则是flex-shrink,有单位的就是flex-basis

.item {
  flex: 1 2 10px;
  /* 相当于 */
  flex-grow: 1;
  flex-shrink: 2;
  flex-basis: 10px;
}
 .item {
  flex: 30px 2 1;
  /* 相当于 */
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: 30px;
}
 .item {
  flex: 2 30px 1;
  /* 相当于 */
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: 30px;
}

另外,flex 的值还可以为initial,auto,none。

initial

initial 为默认值,和不设置 flex 属性的时候表现一样,既 Flex 项目不会扩展,但会收缩,Flex 项目大小有本身内容决定

.item {
  flex: initial;
  /* 相当于 */
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

auto

当 flex 设置为 auto 时,Flex 项目会根据自身内容确定flex-basis,既会拓展也会收缩

.item {
  flex: auto;
  /* 相当于 */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

none

none 表示 Flex 项目既不收缩,也不会扩展

.item {
  flex: none;
  /* 相当于 */
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}