弹性盒子模型详解
- Flex弹性盒子模型详解
- Flex布局的基本概念
- Flex布局的常见属性及用法
- 1. 主轴方向
- 2. 主轴换行方式
- 3. flex-flow（分开写更好）
- 4. 主轴对齐方式
- 5. 侧轴对齐方式
- 5.1 一行的情况
- 5.2 多行的情况
- 6. 伸缩性
- 6.1 flex-basis
- 6.2 flex-grow（伸）
- 6.3 flex-shrink（缩）
- 7. flex复合属性
- 8. 项目排序
- 9. 单独对齐（几乎不用）
- 代码案例
- 案例一：子元素居中
- 案例二：自适应布局
Flex弹性盒子模型详解
在网页布局中，传统的CSS布局方式，如div+css布局，主要依赖盒子模型，通过position、float、display等方式实现。然而，这些方式对于某些特殊布局，如垂直居中布局，却难以达到理想效果。为了解决这一问题，W3C于2009年提出了一种新的布局方案——Flex布局（Flexible Box，简称flexbox）。Flex布局的出现，提供了一种更加简便、完整且响应式的页面布局方式。
Flex布局的基本概念
Flex布局的核心是弹性容器（Flex container）和弹性子元素（Flex item）。弹性容器通过设置display属性的值为flex或inline-flex来定义。弹性容器内包含了一个或多个弹性子元素，这些子元素自动成为容器成员，其布局将受到容器属性的控制。
弹性容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
Flex布局的常见属性及用法
1. 主轴方向
属性名：flex-direction
row（默认值）：主轴为水平方向，从左到右排列。row-reverse：主轴为水平方向，从右到左排列。column：主轴为垂直方向，从上到下排列。column-reverse：主轴为垂直方向，从下到上排列。
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
方块之间的空隙是设置了margin：10px;忘记改掉了，不影响效果
2. 主轴换行方式
属性名：flex-wrap
nowrap（默认值）：不换行，所有项目在同一行显示，可能导致项目被压缩。wrap：正常换行，第一行在最上面。wrap-reverse：反向换行，第一行在最下面。
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
3. flex-flow（分开写更好）
flex-flow 是一个复合属性，复合了 flex-direction 和 flex-wrap 两个属性。 值没有顺序要
求。
flex-flow: row wrap;
4. 主轴对齐方式
属性名：justify-content
flex-start：项目沿主轴左对齐。flex-end：项目沿主轴右对齐。center：项目沿主轴居中对齐。space-between：项目之间的间隔相等，首尾项目与容器边缘紧贴。space-around：每个项目两侧的间隔相等，首尾项目与容器边缘有一定距离。space-evenly：均匀排列每个元素，所有间隔相等。
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
5. 侧轴对齐方式
5.1 一行的情况
属性名：align-items
flex-start：项目沿交叉轴起点对齐。flex-end：项目沿交叉轴终点对齐。center：项目沿交叉轴居中对齐。baseline：项目的第一行文字的基线对齐。stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
align-items: stretch;
5.2 多行的情况
属性名：align-content
flex-start：与侧轴的起点对齐。flex-end：与侧轴的终点对齐。center：与侧轴的中点对齐。space-between：与侧轴两端对齐，中间平均分布。space-around：伸缩项目间的距离相等，比距边缘大一倍。space-evenly: 在侧轴上完全平分。stretch：占满整个侧轴。—— 默认值
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
align-content: stretch;
6. 伸缩性
6.1 flex-basis
概念： flex-basis 设置的是主轴方向的基准长度，会让宽度或高度失效。
备注：主轴横向：宽度失效；主轴纵向：高度失效.
作用：浏览器根据这个属性设置的值，计算主轴上是否有多余空间，默认值 auto ，即：伸缩项目
的宽或高。
6.2 flex-grow（伸）
概念： flex-grow 定义伸缩项目的放大比例，默认为0 ，即：纵使主轴存在剩余空间，也不拉伸
（放大）。
规则：
- 若所有伸缩项目的 flex-grow 值都为 1 ，则：它们将等分剩余空间（如果有空间的话）。
- 若三个伸缩项目的 flex-grow 值分别为： 1 、 2 、 3 ，则：分别瓜分到： 1/6 、 2/6 、
3/6 的空间。
6.3 flex-shrink（缩）
概念：flex-shrink定义了项目的压缩比例，默认为1 ，即：如果空间不足，该项目将会缩小。
收缩项目的计算，略微复杂一点，我们拿一个场景举例：
三个收缩项目，宽度分别为： 200px 、 300px 、 200px ，它们的 flex-shrink 值分别
为： 1 、 2 、 3
若想刚好容纳下三个项目，需要总宽度为 700px ，但目前容器只有 400px ，还差 300px
所以每个人都要收缩一下才可以放下，具体收缩的值，这样计算：
1. 计算分母： (200×1) + (300×2) + (200×3) = 1400
2. 计算比例：
项目一： (200×1) / 1400 = 比例值1
项目二： (300×2) / 1400 = 比例值2
项目三： (200×3) / 1400 = 比例值3
3. 计算最终收缩大小：
项目一需要收缩： 比例值1 × 300
项目二需要收缩： 比例值2 × 300
项目三需要收缩： 比例值3 × 300
7. flex复合属性
flex 是复合属性，复合了： flex-grow 、 flex-shrink 、 flex-basis 三个属性，默认值为0 1 auto 。
- 如果写
flex:1 1 auto，则可简写为：flex:auto - 如果写
flex:1 1 0，则可简写为：flex:1 - 如果写
flex:0 0 auto，则可简写为：flex:none - 如果写
flex:0 1 auto，则可简写为：flex:0 auto—— 即 flex 初始值。
8. 项目排序
order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
设置
盒子2：order：-1;
盒子3：order：1;
效果如图
9. 单独对齐（几乎不用）
- 通过
align-self属性，可以单独调整某个伸缩项目的对齐方式 - 默认值为
auto，表示继承父元素的align-items属性。
代码案例
案例一：子元素居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素相对父元素居中</title>
<style>
html, * {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.son {
width: 300px;
height: 300px;
background-color: #9DB783;
flex: 0 1 auto;
}
</style>
</head>
<body>
<div class="son"></div>
</body>
</html>
案例二：自适应布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自适应布局</title>
<style>
html, * {
margin: 0;
padding: 0;
}
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.son {
flex: 0 1 300px;
background-color: #fdf6e3;
min-height: 200px;
box-sizing: border-box;
border: 3px solid #9DB783;
padding: 20px;
margin: 20px;
}
.title {
font-size: 20px;
color: #c03035;
}
.content {
font-size: 15px;
color: #323232;
}
</style>
</head>
<body>
<section class="parent">
<article class="son">
<span class="title">将进酒</span><br>
<span class="content">君不见，黄河之水天上来，奔流到海不复回，君不见，高堂明镜悲白发，朝如青丝暮成雪</span>
</article>
<!-- 省略其他文章标签 -->
</section>
</body>
</html>
