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
最低0.47元/天 解锁文章
519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
