CSS3-flex布局 | 弹性盒模型
参见
https://www.bilibili.com/video/BV1Rv4y177rj
传统布局与flex布局
- 传统布局
- 兼容性好
- 布局繁琐
- 局限性，不能在移动端很好地布局
- flex 弹性布局
- 操作方便，布局极为简单，移动端应用很广泛
- PC 端浏览器支持情况不如移动端
flex 布局的基本概念
flex是一种新的排版上下文，其他排版上下文还有IFC，BFC等
Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。
在 CSS3 中给 display 属性增加了新的属性值 flex，如果一个元素被设置 display:flex，说明该元素为弹性布局，也就是个弹性盒子。
特点：
- 一维布局
- 任何一个容器都可以指定为 flex 布局
- 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
- 这些叫法是一个意思，伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局
当使用 flex 布局时，首先想到的是两根轴线 — 主轴(Main Axis)和交叉轴(Cross Axis)。主轴由 flex-direction 定义，另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关,flex 主要用这两个轴来控制布局
例如
上图说明如下：
- main axis 是主轴，该轴的开始为 main start，结束为 main end。
- cross axis 是交叉轴，该轴的开始为 cross start，结束为 cross end。
- flex item 是 flex 容器中的元素。
在这个弹性盒子中，提供了一些属性来操作这些元素
Flex 容器
文档中采用了 flexbox 的区域就叫做 flex 容器。指定一个容器的属性为display: flex | inline-flex即创建了一个flex 容器。完成这一步之后，容器中的直系子元素就会变为 flex 元素（flex item）。所有 CSS 属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为：
- 元素排列为一行 (flex-direction 属性的初始值是 row)。
- 元素从主轴的起始线开始。
- 元素不会在主维度方向拉伸，但是可以缩小。
- 元素被拉伸来填充交叉轴大小。
- flex-basis 属性为 auto。
- flex-wrap 属性为 nowrap。
这会让你的元素呈线形排列，并且把自己的大小作为主轴上的大小。如果有太多元素超出容器，它们会溢出而不会换行。如果一些元素比其他元素高，那么元素会沿交叉轴被拉伸来填满它的大小。
flex 布局父项常见属性
常见父项属性
以下有6个属性是对父元素设置的
- flex-direction：设置主轴的方向
- justify-content：设置主轴上的子元素排列方式
- flex-wrap：设置子元素是否换行
- align-items：设置侧轴上的子元素排列方式（单行）
- align-content：设置侧轴上的子元素的排列方式（多行）
- flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
flex-direction
该属性指定了弹性子元素在父容器中的排列方向和顺序。
其语法格式为：
flex-direction: row | row-reverse | column | column-reverse;
| 属性值 | 描述 |
|---|---|
| row | 横向从左到右排列，默认的排列方式。 |
| row-reverse | 反转横向排列，即从右往左排，最后一项排在最左边 |
| column | 纵向排列，从上往下排 |
| column-reverse | 反转纵向排列，即从下往上排，最后一项排在最上面 |
flex-direction:row
flex-direction:row-reverse
flex-direction:column
flex-direction:column-reverse
justify-content
justify-content设置主轴上的子元素排列方式
注意： 使用这个属性之前一定要确定好主轴是哪个
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值，元素从容器的起始线排列 |
| flex-end | 从终止线开始排列 |
| center | 在主轴居中对齐 |
| space-between | flex容器除去flex item在主轴所占的空间后，将剩余空间平均分配到元素之间，所以元素之间间隔相等，就是两侧的flex item会贴着flex容器的边 |
| space-around | flex容器除去flex item在主轴所占的空间后，将剩余空间平均分配到每个元素主轴的两侧，因为两侧空间会相加，所以最边上的缝隙会比中间的缝隙小 |
| space-evenly | flex容器除去flex item在主轴所占的空间后，将剩余空间平均分配到每个元素主轴方向的间隙，每个间隙都是相等的，主轴两端也会有间隙。兼具了space-between与space-around的特点 |
假设flex-direction: row;
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
flex-wrap
指定弹性盒子的子元素换行方式。
其语法格式为：
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
| 属性值 | 描述 |
|---|---|
| nowrap | 默认，不换行，弹性容器为单行。该情况下弹性子项可能会溢出容器，如果一行容纳不下默认会等比例压缩flex item |
| wrap | 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行 |
| wrap-reverse | 反转 wrap 排列，按从左往右，从下往上的顺序排列，会换行，下一行在上一行的上方 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
color: black;
}
#content {
width: 240px;
height: 300px;
background-color: white;
border:1px solid #000;
display: flex;
flex-wrap: nowrap;
}
.item1 {
background-color: #ffe5b9;
}
.item2 {
background-color: #eff8ff;
}
.item3 {
background-color: #c9cbff;
}
</style>
</head>
<body>
<div id="content">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>
</body>
</html>
nowrap：由于没有换行，且是弹性盒模型，一行放不下，所以盒子被压缩成width:80px
wrap
wrap-reverse
align-items
设置侧轴上的子元素排列方式（单行）
该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用
| 属性值 | 说明 |
|---|---|
| flex-start | 贴着侧轴起始线 |
| flex-end | 贴着侧轴尾线 |
| center | 侧轴上居中 |
| stretch | 默认值，未给flex item设置侧轴上的长度时，将flex item拉伸到与flex容器侧轴上的长度一样长。如果flex item设置了侧轴上的长度则stretch失效 |
| baseline | 文字基线对齐 |
假设flex-direction: row;
- flex-start
- flex-end
- center
- stretch: 这里要子元素不设置高度才生效
- baseline
align-content
设置侧轴上的子元素的排列方式（多行）
设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的。
| 属性值 | 说明 |
|---|---|
| flex-start | 贴着侧轴起始线排列 |
| flex-end | 贴着侧轴尾线排列 |
| center | 在侧轴居中对齐 |
| space-between | flex容器除去flex item在侧轴所占的空间后，将剩余空间平均分配到元素之间，所以元素之间间隔相等，就是两侧的flex item会贴着flex容器的边 |
| space-around | flex容器除去flex item在侧轴所占的空间后，将剩余空间平均分配到每个元素侧轴的两侧，因为两侧空间会相加，所以最边上的缝隙会比中间的缝隙小 |
| stretch | 拉伸子元素，使得子元素平均占满父元素侧轴方向的长度，同样注意子元素不能在侧轴方向上设置长度，否则 stretch会失效 |
假设flex-direction: row;
flex-start
flex-end
center
space-between
space-around
stretch
align-content 和 align-items 区别
- align-items 适用于单行情况下，对多行也生效，只有上对齐、下对齐、居中和 拉伸这些效果
- align-content 适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、 下对齐、居中、拉伸以及平均分配剩余空间等属性值。
- 总结就是单行用 align-items 多行用 align-content，判断是否是单行就看有没有分行
flex-flow
flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性
flex-flow:row wrap;等效于flex-direction: row;flex-wrap: wrap;
flex 布局子项常见属性
- flex 子项目占的份数
- align-self 控制子项自己在侧轴的排列方式
- order属性定义子项的排列顺序（前后顺序）
- flex-grow：容器有剩余空间时的伸展能力
- flex-shrink：容器空间不足时的收缩能力
- flex-basis：没有伸展和收缩时的基础长度
flex 属性
flex是个复合属性，属性值只有一个不带单位的数字时，与flex-grow等效, 父元素主轴长度大于子元素主轴长度总和时，子元素主轴长度=free space*(该元素的flex数字/所有子元素flex数字之和)
/* 关键字值 */
flex: auto;
flex: initial;
flex: none;
/* 一个值，无单位数字：flex-grow */
flex: 2;
/* 一个值，width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;
/* 两个值：flex-grow | flex-basis */
flex: 1 30px;
/* 两个值：flex-grow | flex-shrink */
flex: 2 2;
/* 三个值：flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/*全局属性值 */
flex: inherit;
flex: initial;
flex: unset;
flex 属性定义flex item分配剩余空间(free space)，用flex来表示占多少份数。
.item {
flex: <number>; /* default 0 */
}
举例1: 第1个和第3个子元素都指定了宽度，free space=flex容器宽度-设定了宽度的子元素的宽度。因为只有第二个子元素指定flex:1，且flex容器有剩余的空间，所以该子元素的宽度=free space*(1/1)=free space, 即它会把剩余空间占满
section {
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 0 auto;
}
section div:nth-child(1) {
width: 100px;
height: 150px;
background-color: red;
}
section div:nth-child(2) {
flex: 1;
background-color: green;
}
section div:nth-child(3) {
width: 100px;
height: 150px;
background-color: blue;
}
<section>
<div></div>
<div></div>
<div></div>
</section>
举例2：因为子元素都没设置宽度，所以剩余空间就是父元素的宽度。子元素都指定了flex，所以它们的宽度=free space*(本元素flex值/子元素flex值总和), 即flex数字是多少就占父元素宽度的几份
p {
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 100px auto;
}
p span {
flex: 1;
}
p span:nth-child(2) {
flex: 2;
background-color: purple;
}
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
如果子元素都为flex:1;则子元素均分剩余空间
p span {
flex: 1;
}
align-self
控制子项自己在侧轴上的排列方式
align-self 属性允许单个子项有与其他子项不一样的对齐方式，可覆盖 align-items 属性。
值
- auto: 默认值，继承父元素的 align-items 值，如果没有父元素，则等同于 stretch
- normal: 效果取决于当前的布局模式
- flex-start：flex 元素会对齐到 cross-axis 的首端。
- flex-end：flex 元素会对齐到 cross-axis 的尾端。
- center：flex 元素会对齐到 cross-axis 的中间，如果该元素的 cross-size 尺寸大于 flex 容器，将在两个方向均等溢出。
span:nth-child(3) {
/* 设置自己在侧轴上的排列方式 */
align-self: flex-end;
}
order
属性定义项目的排列顺序
数值越小，排列越靠近主轴起始线，默认为0。
注意：和 z-index 不一样。
.item {
order: <number>;
}
<head>
<title>Document</title>
<style>
div {
display: flex;
width: 80%;
height: 300px;
background-color: pink;
}
div span {
width: 150px;
height: 100px;
}
div span:nth-child(2) {
/* 默认是0 -1比0小所以在前面 */
order: -1;
}
</style>
</head>
<body>
<div>
<span style="background-color: red;">1</span>
<span style="background-color: green;">2</span>
<span style="background-color: skyblue;">3</span>
</div>
</body>
flex-grow flex-shrink flex-basis
flex-grow可以看做弹性子元素的伸展能力，如下所示，a , b, c的基础宽度是100px，容器宽度减去所有子元素的基础宽度后，剩余的空间将按2:1的比例分配给A和B。注意最终A和B的宽度比不是2:1，而是伸展的宽度比是2:1
一般给子元素主轴方向上设置的固定大小默认就是flex-basis的值
flex
flex是flex-grow flex-shrink flex-basis的复合属性
对应关系如下
