1. 弹性盒子基础
为了能够让元素对不同的屏幕尺寸和不同的显示设备做好自适应的准备，W3C引出弹性盒模型。弹性盒模型非常依赖父子级关系，在块级元素上声明 display: flex 便可以激活弹性盒布局，这个元素称为弹性容器 ，负责所占空间内子元素的布置。弹性容器内的元素称为弹性元素。
2. 举个例子
xml
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {
width: 500px;
display: flex;
height: 120px;
background-color: pink;
}
p {
background-color: yellow;
}
.child {
margin: 0 10px;
background-color: skyblue;
align-self: stretch;
}
</style>
<div class="box">
<p>我是p标签，块级标签哦！</p>
<span class="child">span标签</span>
<p class="child">3</p>
</div>
值得注意的是：我们为div元素开启弹性盒模型之后，只有直接子元素才会开启弹性盒布局，其后代的布局方式不会受到影响。在弹性容器中，各个弹性元素在主轴上排列，我们可以通过改变主轴的方向的方式改变弹性盒子的排列方式。通过效果图可以清楚的看到弹性盒子并没有占满整个弹性容器，我们可以通过设置对应的属性将多余的空间合理的分配给每一个弹性盒子。
3. 弹性容器中的属性
3.1. flex-direction
| 作用 | 将所有的弹性盒子改为从左到右、从右到左、从上到下、从下到上的排列方式。 |
|---|---|
| 值 | row row-reverse column column-reverse |
| 默认值 | row |
xml
<style>
ul{
display: flex;
}
#one {
background-color: pink;
flex-direction: row;
}
#two {
background-color: yellow;
flex-direction: row-reverse;
}
#three {
background-color: blue;
flex-direction: column-reverse;
}
#four {
background-color: purple;
flex-direction: column;
}
</style>
<ul id="one">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul id="two">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul id="three">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul id="four">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
3.2. flex-wrap
当弹性盒子在弹性容器的主轴上放置不下的时候，默认情况下是不会换行的，也不会自动设置尺寸。这样就导致弹性盒子会超出弹性容器的边界。
这个行为是可以被我们控制的，我们可以允许弹性元素换行展示，这样就有效的避免了弹性元素从弹出容器中溢出。
| 作用 | 设置弹性元素换行 |
|---|---|
| 值 | no-wrap wrap wrap-reverse |
| 默认值 | no-wrap |
在允许换行时，wrap 和 wrap-reverse的区别在于多出来的行是在第一行之前展示还是在第一行之后展示。
xml
<style>
ul {
width: 120px;
display: flex;
margin-top: 10px;
}
#zero {
background-color: green;
}
#one {
background-color: pink;
flex-wrap: wrap;
}
#two {
background-color: yellow;
flex-wrap: wrap-reverse;
}
</style>
<ul id="zero">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul id="one">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul id="two">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
3.3. flex-flow
| 作用 | 定义弹性流 ，flex-wrap 和 flex-direction 这两个属性的简写模式。 |
|---|---|
| 值 | flex-direction flex-wrap |
| 默认值 | row no-wrap |
3.4. justify-content
这个属性的作用是如何将弹性容器的空间分配给主轴方向上的弹性元素。
| 作用 | 各行弹性元素的布局 |
|---|---|
| 值 | flex-start,flex-end, space-between, space-around ,center ,space-evenly |
| 默认值 | flex-start |
| 值 | 描述 |
|---|---|
| flex-start | 默认值，左对齐 |
| flex-end | 右对齐 |
| center | 居中 |
| space-between | 两端对齐，项目之间的间隔是相等的 |
| space-around | 每个项目两侧的间隔相等 |
| initial | 将此属性设置为属性的默认值 |
| inherit | 从父元素继承属性的值 |
css
<style>
.flex {
display: flex;
margin-top: 50px;
border: 1px solid rgb(43, 35, 205);
}
.flex div {
width: 60px;
height: 60px;
margin-bottom: 5px;
border: 1px solid pink;
}
.flex-start {
justify-content: flex-start;
}
.flex-end {
justify-content: flex-end;
}
.center {
justify-content: center;
}
.space-between {
justify-content: space-between;
}
.space-around {
justify-content: space-around;
}
.space-evenly {
justify-content: space-evenly;
}
</style>
</head>
<body>
<div class="flex flex-start">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
<div class="flex flex-end">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
<div class="flex center">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
<div class="flex space-between">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
<div class="flex space-around">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
<div class="flex space-evenly">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
</body>
3.5. align-items
| 作用 | 这个属性的作用是设置弹性元素的对齐方式 |
|---|---|
| 值 | flex-start,flex-end,center ,stretch |
| 默认值 | stretch |
| 值 | 描述 |
|---|---|
| flex-start | 默认值，左对齐 |
| flex-end | 右对齐 |
| center | 居中 |
| stretch | 拉伸 |
css
div{
display: flex;
justify-content: center;
align-items: center;
}
css
div{align-items: flex-start;}
css
align-items: flex-end;
css
align-items: stretch;4. 弹性元素中的属性
弹性容器的子元素是弹性元素，一个元素可以同时是弹性容器和弹性元素
4.1. order
| 作用 | 决定弹性元素的排列顺序，数值越小，排列越靠前 |
|---|---|
| 值 | 数字类型 |
| 默认值 | 0 |
xml
<style>
ul li:nth-child(3) {
background-color: red;
order: -1;
}
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
4.2. flex-grow
如果存在弹性容器存在剩余空间，未设置此属性时，弹性元素不放大。
| 作用 | 决定弹性元素的增长系数 |
|---|---|
| 值 | 大于0的数字类型 |
| 默认值 | 0 |
xml
<style>
ul {
display: flex;
border: 1px solid black;
justify-content: space-around;
height: 300px;
width: 1000px;
}
ul li:nth-child(1) {
width: 100px;
background-color: blue;
flex-grow: 5
}
ul li:nth-child(2) {
width: 100px;
background-color: green;
flex-grow: 3
}
ul li:nth-child(3) {
width: 100px;
background-color: red;
flex-grow: 2
}
</style>
思考题目
计算上图中三个盒子的宽度。
答案
解析
蓝色盒子宽度计算方式如下：
-
- 弹性容器剩余空间为：1000 - 300=700 px
- 蓝色盒子需要缩小像素值： （ 700 /（ 5+3+2 ））*5 =350 px
- 蓝色盒子的宽度为： 100 + 350 = 450 px
4.3. flex-shrink
弹性元素的缩减系数。开发者未设置此属性时，如果弹性容器空间不足，该弹性元素适当缩小。
如果设置为0，即便弹性容器空间不足，弹性元素不再缩小。
| 作用 | 决定弹性元素的增长系数 |
|---|---|
| 值 | 大于0的数字类型 |
| 默认值 | 1 |
xml
<style>
ul {
display: flex;
border: 1px solid black;
height: 300px;
width: 800px;
}
ul li:nth-child(1) {
width: 300px;
flex-shrink: 0
}
ul li:nth-child(2) {
width: 300px;
background-color: blue;
flex-shrink: 0
}
ul li:nth-child(3) {
width: 300px;
background-color: red;
flex-shrink: 1;
}
</style>
思考题目
xml
<style>
ul {
display: flex;
border: 1px solid black;
justify-content: space-around;
height: 300px;
width: 800px;
}
ul li:nth-child(1) {
width: 300px;
flex-shrink: 1
}
ul li:nth-child(2) {
width: 300px;
background-color: blue;
flex-shrink: 6
}
ul li:nth-child(3) {
width: 300px;
background-color: red;
flex-shrink: 3;
}
<style>
答案：
解析：
蓝色盒子宽度计算方式如下：
-
- 弹性容器剩余空间为：800 - 900 = -100 px
- 蓝色盒子需要缩小像素值：（ 100 / (1 + 6 + 3 ) ）* 6 = 60px
- 蓝色盒子的宽度为：300 - 60 = 240 px
4.4. flex
| 作用 | 属性的简写 |
|---|---|
| 值 | flex-grow flex-shrink flex-auto |
| 默认值 | 0 1 auto |