CSS的Flex布局的学习

哔哩哔哩链接：https://www.bilibili.com/video/BV1iE411y7hb?p=131

Flex(弹性盒、伸缩盒)是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局，使元素具有弹性，让元素可以跟随页面的大小的改变而改变。

首先我们先简单创建一个网页，网页中有一个ul，ul中有3个li子元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{margin: 0;padding: 0;list-style: none;}ul{width: 500px;border: 10px red solid;         }li{width: 100px;height: 100px;background-color: #bfa;font-size: 50px;text-align: center;line-height: 100px;               }li:nth-child(1){}li:nth-child(2){background-color: pink;}li:nth-child(3){background-color: orange;        }</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li></ul>
</body>
</html>

我们想要li从左到右水平排列，按照以往的知识，我们需要给 li 设置浮动的效果，代码如下：

li{float: left;
}

但是我们发现ul的高度已经塌陷了，这是因为浮动带来的效果，我们可以开启BFC或一些其他方法进行处理，由于这不是我们这篇文章的讲解重点，此处不做过多讲解。

补充：高度塌陷，在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。

但是如果我们使用flex布局的话，就可以避免产生这些问题。要使用弹性盒（flex），此处我们需要先学习两个概念

弹性容器和弹性元素

- 弹性容器- 要使用弹性盒，必须先将一个元素设置为弹性容器- 我们通过 display 来设置弹性容器display:flex  设置为块级弹性容器（一般用这个），独占一行display:inline-flex 设置为行内的弹性容器，不独占一行- 弹性元素- 弹性容器的子元素是弹性元素（弹性项），例如ul的子元素li，这里需要注意的是如果ul子元素li中还有其他元素如div，那div不是弹性元素- 弹性元素可以同时是弹性容器，如我们给ul中的li加上display:flex，则它也变为弹性容器

理解了弹性容器和弹性元素的概念之后，我们该ul新增一个样式

ul{/* 设置ul为弹性容器 */display: flex;
}

我们保存刷新网页，发现元素已经自左向右进行排列了，那他是怎么做到的呢，这是因为弹性容器样式flex-direction的默认值为row，即自左向右进行弹性元素的排列。接下来我们进行弹性容器样式的学习。

flex-direction

主轴、侧轴

flex-direction 指定弹性容器中弹性元素的排列方式
可选值：row 默认值，弹性元素在容器中水平排列（左向右）- 主轴 自左向右row-reverse 弹性元素在容器中反向水平排列（右向左）- 主轴 自右向左column 弹性元素纵向排列（自上向下）- 主轴 自上向下column-reverse 弹性元素方向纵向排列（自下向上）- 主轴 自下向上主轴：弹性元素的排列方向称为主轴侧轴：与主轴垂直方向的称为侧轴

我们给ul指定flex-direction的值分别为row、row-reverse、column、column-reverse，效果如下：

ul{  /* 将ul设置为弹性容器*/display: flex;   /* 指定容器中弹性元素的排列方式 */flex-direction: row;
}

接下来我们学习弹性元素的样式flex-grow和flex-shrink

flex-grow

flex-grow 指定弹性元素的伸展的系数，默认值为0- 当父元素有多余空间的时，子元素如何伸展- 父元素的剩余空间，会按照比例进行分配- 为子元素设置的值越大，分配越多

我们指定ul的宽为500px，3个li的宽度为100px，则剩余空间为200px，

我们为每个li分别设置不同的flex-grow样式值，这里我们为

第一个li设置flex-grow: 1;

为第二个li设置flex-grow: 2;

为第三个li设置flex-grow: 3;

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{margin: 0;padding: 0;list-style: none;}ul{width: 500px;border: 10px red solid;      /* 将ul设置为弹性容器*/display: flex;   flex-direction: row;}li{width: 100px;height: 100px;background-color: #bfa;font-size: 50px;text-align: center;line-height: 100px;            }li:nth-child(1){flex-grow: 1;}li:nth-child(2){background-color: pink;flex-grow: 2;}li:nth-child(3){background-color: orange;  flex-grow: 3;      }</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li></ul>
</body>
</html>

我们发现剩余空间200px被分为6份分给了第一个li一份，第二个li两份，第三个li三份，我们得出：如果为弹性元素设置了flex-grow样式，则他的width样式不再有用（当父元素有剩余空间时）

flex-shrink

flex-shrink 指定弹性元素的收缩系数，默认值为1，- 当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩- 如果设置为0将不会自动进行收缩- 为子元素设置的值越大，收缩越多- 弹性元素的缩减系数，缩减系数的计算方式比较复杂，缩减多少是根据 缩减系数 和 元素大小来计算，元素越大缩减越多- 由于与flex-grow的原理是一样的，这里我们不再演示

案例：W3school导航条

我们使用flex布局的方式实现W3school导航条，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="css/reset.css"><style>.nav{width: 1210px;height: 48px;line-height: 48px;margin: 50px auto;background-color: #E8E7E3;/* 设置为弹性容器 */display: flex;}.nav li{/* 设置增长系数 */flex-grow: 1;}.nav a{display: block;color: #808080;text-decoration: none;font-size: 16px;text-align: center;}.nav a:hover{background-color: #636363;color: #fff;}</style>
</head>
<body><ul class="nav"><li><a href="#">HTML/CSS</a></li><li><a href="#">Browser Side</a></li><li><a href="#">Server Side</a></li><li><a href="#">Programming</a></li><li><a href="#">XML</a></li><li><a href="#">Web Building</a></li><li><a href="#">Reference</a></li></ul>
</body>
</html>

接下来我们继续学习弹性容器上的样式

弹性容器上的样式

flex-direction

前面已进行介绍，此处不再叙述。

flex-wrap

flex-wrap: 设置弹性元素是否在弹性容器中自动换行可选值：nowrap 默认值，元素不会自动换行wrap 元素沿着辅轴方向自动换行wrap-reverse 元素沿着辅轴反方向换行主轴：弹性元素的排列方向称为主轴侧轴：与主轴垂直方向的称为侧轴

如我们设置ul为500px，li为200px，分别设置flex-wrap为nowrap、wrap、wrap-reverse，代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;list-style: none;}ul {width: 500px;border: 10px red solid;/* 设置ul为弹性容器 */display: flex;/* flex-direction: column; *//* flex-wrap: 设置弹性元素是否在弹性容器中自动换行可选值：nowrap 默认值，元素不会自动换行wrap 元素沿着辅轴方向自动换行wrap-reverse 元素沿着辅轴反方向换行*/flex-wrap: nowrap;}li {width: 200px;background-color: #bfa;font-size: 50px;text-align: center;line-height: 100px;/* 如果设置为0将不会自动进行收缩 */flex-shrink: 0;}li:nth-child(1) {}li:nth-child(2) {background-color: pink;}li:nth-child(3) {background-color: orange;}</style>
</head><body><ul><li>1</li><li>2</li><li>3</li></ul></body></html>

flex-flow

flex-wrap 和 flex-direction 的简写样式
如：flex-flow: row wrap; 表示弹性元素从左到右排序，换行

justify-content

justify-content- 如何分配主轴上的空白空间（主轴上的元素如何排列）- 可选值：flex-start 元素沿着主轴起边排列flex-end 元素沿着主轴终边排列center 元素居中排列space-around 空白分布到元素两侧（平均分配到每个元素的两侧，中间的是两侧的两倍）space-between 空白均匀分布到元素间（两侧没有空白，平均分配到每个元素的两侧）space-evenly 空白分布到元素的单侧（平均分配到每个元素的两侧，大小都一样）

我们设置ul宽为500px，每个li宽为100px，分别设置justify-content的值为flex-start、flex-end、center、space-around、space-between、space-evenly，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{margin: 0;padding: 0;list-style: none;}ul{width: 500px;          border: 10px red solid;/* 设置ul为弹性容器 */display: flex;/* flex-direction: column; *//* flex-wrap: 设置弹性元素是否在弹性容器中自动换行可选值：nowrap 默认值，元素不会自动换行wrap 元素沿着辅轴方向自动换行wrap-reverse 元素沿着辅轴反方向换行*//* flex-wrap: wrap-reverse; *//* flex-flow:  wrap 和 direction 的简写样式 */flex-flow: row wrap;/*  justify-content- 如何分配主轴上的空白空间（主轴上的元素如何排列）- 可选值：flex-start 元素沿着主轴起边排列flex-end 元素沿着主轴终边排列center 元素居中排列space-around 空白分布到元素两侧（平均分配到每个元素的两侧，中间的是两侧的两倍）space-between 空白均匀分布到元素间（两侧没有空白，平均分配到每个元素的两侧）space-evenly 空白分布到元素的单侧（平均分配到每个元素的两侧，大小都一样）*/justify-content: center;        }li{width: 200px;background-color: #bfa;font-size: 50px;text-align: center;line-height: 100px;flex-shrink: 0;            }li:nth-child(1){         }li:nth-child(2){background-color: pink;}li:nth-child(3){background-color: orange;}   </style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li></ul>
</body>
</html>

align-items

align-items: - 元素在辅轴上如何对齐- 元素间的关系- 可选值：stretch 默认值，将元素的长度设置为相同的值（行与行的高度）flex-start 元素不会拉伸，沿着辅轴起边对齐（即所处的顶部）flex-end 沿着辅轴的终边对齐center 居中对齐baseline 基线对齐，即文字的基线（文字的底部）

我们设置ul的宽为450px，5个li的宽为150px，align-items的值分别设置为stretch、flex-start、flex-end、center、baseline，代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;list-style: none;}ul {width: 450px;border: 10px red solid;/* 设置ul为弹性容器 */display: flex;flex-flow: row wrap;/*align-items: - 元素在辅轴上如何对齐- 元素间的关系- 可选值：stretch 默认值，将元素的长度设置为相同的值（行与行的高度）   flex-start 元素不会拉伸，沿着辅轴起边对齐（即所处的顶部）flex-end 沿着辅轴的终边对齐center 居中对齐baseline 基线对齐，即文字的基线（文字的底部）*/align-items: stretch;}li {width: 150px;background-color: #bfa;font-size: 50px;text-align: center;line-height: 100px;flex-shrink: 0;}li:nth-child(1) {}li:nth-child(2) {background-color: pink;}li:nth-child(3) {background-color: orange;}li:nth-child(4) {background-color: yellow;}li:nth-child(5) {background-color: chocolate;}</style>
</head><body><ul><li>1</li><li>2<div>2</div></li><li>3<div>3</div><div>3</div></li><li>1</li><li>2<div>2</div></li></ul>
</body></html>

水平垂直居中

设置 justify-content: center;align-items: center;即可

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;list-style: none;}ul {width: 450px;height: 450px;border: 10px red solid;/* 设置ul为弹性容器 */display: flex;flex-flow: row wrap;justify-content: center;align-items: center;}li {width: 150px;background-color: #bfa;font-size: 50px;text-align: center;flex-shrink: 0;}</style>
</head><body><ul><li>1</li>    </ul>
</body></html>

align-content

align-content: - 辅轴空白空间的分布- 元素间的关系- 可选值：flex-start 元素沿着辅轴起边排列flex-end 元素沿着辅轴终边排列center 元素居中排列space-around 空白分布到元素两侧（平均分配到每个元素的两侧，中间的是两侧的两倍）space-between 空白均匀分布到元素间（两侧没有空白，平均分配到每个元素的两侧）space-evenly 空白分布到元素的单侧（平均分配到每个元素的两侧，大小都一样）

我们设置ul高为600px，每个li为的行高line-height: 100px; 分别设置align-content的值为flex-start、flex-end、center、space-around、space-between、space-evenly，代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;list-style: none;}ul {width: 450px;height: 600px;border: 10px red solid;/* 设置ul为弹性容器 */display: flex;flex-flow: row wrap;align-items: flex-start;/* align-content: - 辅轴空白空间的分布- 元素间的关系- 可选值：flex-start 元素沿着辅轴起边排列flex-end 元素沿着辅轴终边排列center 元素居中排列space-around 空白分布到元素两侧（平均分配到每个元素的两侧，中间的是两侧的两倍）space-between 空白均匀分布到元素间（两侧没有空白，平均分配到每个元素的两侧）space-evenly 空白分布到元素的单侧（平均分配到每个元素的两侧，大小都一样）*/align-content: flex-start;}li {width: 150px;background-color: #bfa;font-size: 50px;text-align: center;line-height: 100px;flex-shrink: 0;}li:nth-child(1) {}li:nth-child(2) {background-color: pink;}li:nth-child(3) {background-color: orange;}li:nth-child(4) {background-color: yellow;}li:nth-child(5) {background-color: chocolate;}</style>
</head><body><ul><li>1</li><li>2<div>2</div></li><li>3<div>3</div><div>3</div></li><li>1</li><li>2<div>2</div></li></ul>
</body></html>

弹性元素上的样式

flex-grow

前面已进行介绍，此处不再叙述。

flex-shrink

前面已进行介绍，此处不再叙述。

align-self

用来覆盖当前弹性元素上的align-items

align-self: - 用来覆盖当前弹性元素上的align-items- 可选值：stretch 默认值，将元素的长度设置为相同的值（行与行的高度）flex-start 元素不会拉伸，沿着辅轴起边对齐（即所处的顶部）flex-end 沿着辅轴的终边对齐center 居中对齐baseline 基线对齐，即文字的基线（文字的底部）

如我们本来的布局是以下这样的：

当我们给第一个li加上 align-self: stretch;这个样式后，代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;list-style: none;}ul {width: 450px;height: 600px;border: 10px red solid;/* 设置ul为弹性容器 */display: flex;flex-flow: row wrap;align-items: flex-start;/* align-content: - 辅轴空白空间的分布- 元素间的关系- 可选值：flex-start 元素沿着辅轴起边排列flex-end 元素沿着辅轴终边排列center 元素居中排列space-around 空白分布到元素两侧（平均分配到每个元素的两侧，中间的是两侧的两倍）space-between 空白均匀分布到元素间（两侧没有空白，平均分配到每个元素的两侧）space-evenly 空白分布到元素的单侧（平均分配到每个元素的两侧，大小都一样）*/align-content: flex-start;}li {width: 150px;background-color: #bfa;font-size: 50px;text-align: center;line-height: 100px;flex-shrink: 0;}li:nth-child(1) {align-self: stretch;}li:nth-child(2) {background-color: pink;}li:nth-child(3) {background-color: orange;}li:nth-child(4) {background-color: yellow;}li:nth-child(5) {background-color: chocolate;}</style>
</head><body><ul><li>1</li><li>2<div>2</div></li><li>3<div>3</div><div>3</div></li><li>1</li><li>2<div>2</div></li></ul>
</body></html>

发现覆盖了当前弹性元素上的align-items

flex-basis

元素基础长度flex-basis 指定的是元素在主轴上的基础长度如果主轴是 横向的 则 该值指定的就是元素的宽度如果主轴是 纵向的 则 该值指定的是就是元素的高度- 默认值是 auto，表示参考元素自身的高度或宽度(即上方为li设置的宽高)- 如果传递了一个具体的数值，则以该值为准（即为li设定的宽width无效，flex-basis：100px;）

flex

flex 可以设置弹性元素所有的三个样式flex 增长 缩减 基础;flex: 1 1 auto;initial为默认值即为 "flex: 0 1 auto".auto 相当于 "flex: 1（可增） 1（可减） auto"none 相当于 "flex: 0 0 auto" 弹性元素没有弹性（不会缩不会减）

order

order 决定弹性元素的排列顺序，如order: 2;即元素排在第二的位置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{margin: 0;padding: 0;list-style: none;}ul{width: 900px;border: 10px red solid;/* 设置弹性盒 */display: flex;}li{width: 200px;height: 100px;background-color: #bfa;font-size: 50px;text-align: center;line-height: 100px;/* 弹性的增长系数，它们子元素的比例都是一样的*//* flex-grow: 1; *//* 弹性元素的缩减系数- 缩减系数的计算方式比较复杂- 缩减多少是根据 缩减系数 和 元素大小来计算*//* flex-shrink: 1; *//* 元素基础长度flex-basis 指定的是元素在主轴上的基础长度如果主轴是 横向的 则 该值指定的就是元素的宽度如果主轴是 纵向的 则 该值指定的是就是元素的高度- 默认值是 auto，表示参考元素自身的高度或宽度(即上方为li设置的宽高)- 如果传递了一个具体的数值，则以该值为准（即上方为li设定的宽高无效，flex-basis：100px;）*//* flex-basis: auto; *//* flex 可以设置弹性元素所有的三个样式flex 增长 缩减 基础;flex: 1 1 auto;initial为默认值即为 "flex: 0 1 auto".auto 相当于 "flex: 1（可增） 1（可减） auto"none 相当于 "flex: 0 0 auto" 弹性元素没有弹性（不会缩不会减）*/flex: initial;}li:nth-child(1){/* order 决定弹性元素的排列顺序   order: 2;即元素排在第二的位置*/order: 2;}li:nth-child(2){background-color: pink;/* flex-grow: 2; */order: 3;}li:nth-child(3){background-color: orange;/* flex-grow: 3; */order: 1;}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li></ul>
</body>
</html>

使用order指定弹性元素的排列顺序：

喜欢请关注我

至此，我们的CSS的Flex布局的学习就告一段落了。喜欢我的话可以关注我的微信公众号我爱学习呀嘻嘻，不定期分享各类资源哦。