目录
弹性盒子模型介绍
弹性盒子模型（Flexbox）是一种CSS布局模型，用于在页面上对齐和分配容器内的项目（子元素）。它旨在提供一种更有效的方式来布局、对齐和分配容器内项目的空间，即使它们的大小是未知或者动态变化的。
Flexbox 主要特点包括：
1. 主轴和交叉轴：Flexbox 定义了两个轴，主轴（main axis）和交叉轴（cross axis）。项目沿着主轴排列，而交叉轴垂直于主轴。
2. 容器和项目：使用 display: flex; 或 display: inline-flex; 声明的容器称为 flex 容器，其子元素称为 flex 项目。
3. 对齐和分布：Flexbox 提供了多种属性来控制项目在主轴和交叉轴上的对齐方式，以及如何分配额外的空间。
4. 弹性增长和缩减：项目可以设置弹性增长（flex-grow）和弹性缩减（flex-shrink）属性，以控制它们如何增长和缩小以适应容器大小的变化。
5. 基础和限制：项目可以设置基础大小（flex-basis），这是在分配额外空间之前项目的大小。同时，可以使用 min-width 、 max-width 、 min-height 和 max-height 等属性来限制项目的大小。
6. 自适应布局：Flexbox 非常适合创建响应式布局，因为它可以轻松地重新排列项目以适应不同屏幕尺寸和设备。
Flexbox 的主要属性包括：
1. flex-direction ：定义主轴的方向（行或列）。
2. justify-content ：定义项目在主轴上的对齐方式。
3. align-items ：定义项目在交叉轴上的对齐方式。
4. align-content ：定义多行项目在交叉轴上的对齐方式。
5. flex-grow 、 flex-shrink 和 flex-basis ：控制项目的弹性行为。
容器与项目
直接在外层父容器div中添加三个内层div三个div纵向排列，若要实现横向排列使用float则脱离了文档流并影响父容器大小，此时给父容器添加弹性盒子属性（display:flex/inline-flex）则实现下图效果并且不影响容器，此时的三个内层div便是伸缩项目（直接子元素）
flex和inline-flex区别
当有两个完全相同的outer容器，inline-flex会将其变为行内块，flex效果如图2-1-1，inline-flex如图2-1-2
图2-1-1
图2-1-2
主轴侧轴
默认flex-derection: row,则
主轴：水平，由左到右
侧轴：竖直，由上到下
修改主轴方向（从左到右改成从右到左）：flex-direction:row-reverse
flex-derection：column则主侧轴位置交换
主轴换行方式
不换行：flex-wrap: nowrap（默认值，宽度不够会压缩）
换行：flex-wrap: wrap，该情况下侧轴高度不紧凑，如图3-1-1
图3-1-1
flex-wrap:wrap-reverse（主轴方向不变反转指的是从下往上填充）
flex-flow复合属性
flex-flow（复合属性设置主轴方向和主轴换行方式）
flex-flow: row wrap;（主轴从左到右，换行）
flex-flow: row nowrap;（主轴从左到右，不换行，是默认值）
flex-flow: row reverse wrap; （主轴从右到左，换行）
主轴对齐方式
justify-content: flex-start左对齐（主轴方向不反转情况下）
flex-end右对齐（主轴方向不反转情况下）
center中间对齐
space-around分散对齐（项目均匀分布在一行中，项目与项目间距是与边缘间距的二倍）
space-between 项目间距相等，与边缘没有距离
space-evenly均匀分布，项目间距和边缘均相等
图3-3-1
侧轴对齐
单行
align-items: flex-start侧轴起始对齐
flex-end侧轴结束位置对齐
center侧轴中间位置对齐
baseline根据基线对齐
stretch没有给高度时高度拉满父容器（默认值，给了高度效果如flex-start）
图3-4-1
多行
align-content: flex-start侧轴起始对齐
flex-end侧轴结束位置对齐
center侧轴中间位置对齐
space-around项目均匀分布在一行中，项目与项目间距是与边缘间距的二倍）
space-between 项目间距相等，与边缘没有距离
space-evenly均匀分布，项目间距和边缘均相等
stretch没有给高度时高度拉满父容器（默认值，给了高度效果如flex-start）
通过这些我们可以实现另一种方式的水平垂直居中
- 给父容器加上flex属性并设置justify-content: center; align-items: center;
- 父容器加上flex属性，子容器设置margin:auto
基准长度
flex-basis设置伸缩项目在主轴上的基准长度 若主轴横向则宽失效，若纵向则高失效
伸缩盒模型的伸缩性
伸
flex-grow当容器内有多余的空间时， flex-grow 属性允许项目增长以填充这些空间。这个属性只影响项目的主轴方向（由 flex-direction 属性定义）。
接受一个非负数值作为参数，如果所有项目的 flex-grow值都为0（默认值是0），则它们将保持原始大小，不进行扩展。如果至少有一个项目的flex-grow值大于0，则空间将按照这些值的比例分配。
.container {
display: flex;
}
.item {
flex-grow: 1; /* 所有项目将平均分配额外空间 */
}如果容器 .container 有多余的空间，所有的 .item 项目都将等比例地扩展以填充这些空间。
给不同的项目设置不同的 flex-grow 值：
.item1 {
flex-grow: 2; /* 这个项目将比其他项目扩展得更快 */
}
.item2 {
flex-grow: 1; /* 这个项目将扩展，但速度是item1的一半 */
}item1 将获得 item2 两倍的扩展空间。这意味着如果容器有额外的空间， item1 将获得这些空间的2/3，而 item2 将获得1/3。
缩
flex-shrink 在容器空间不足时，项目（flex items）的收缩能力。当容器没有足够的空间来容纳所有项目时， flex-shrink 属性允许项目缩小以适应容器。
属性接受一个非负数值作为参数，这个数值表示项目相对于其他项目的收缩能力。如果所有项目的 flex-shrink 值都为0，则它们将不会缩小，即使容器空间不足。如果至少有一个项目的 flex-shrink 值大于0，则空间将按照这些值的比例分配。
flex-shrink 的默认值是 1 ，意味着所有项目都可以收缩。如果多个项目具有不同的 flex-shrink 值，它们将根据这些值的比例来收缩。
.container {
display: flex;
width: 200px; /* 容器宽度 */
}
.item {
flex-shrink: 1; /* 所有项目都可以收缩 */
width: 100px; /* 初始宽度 */
}
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>在这个例子中，容器的宽度是200px，但三个项目的总宽度是300px，超出了容器的宽度。由于所有项目的 flex-shrink 值都是1，它们将等比例地缩小以适应容器。
如果我们改变其中一个项目的 flex-shrink 值：
.item1 {
flex-shrink: 2; /* 这个项目将比其他项目收缩得更快 */
}
.item2 {
flex-shrink: 1; /* 这个项目将按正常速度收缩 */
}item1 将比其他项目收缩得更快，因为它的 flex-shrink 值是2，而 item2 的值是1。这意味着 item1 将承担更多的收缩量。
flex复合属性
设置 flex-grow 、 flex-shrink 和 flex-basis 这三个属性。
flex 属性的基本语法如下：
flex: flex-grow flex-shrink flex-basis;
flex-grow：可选，定义项目的放大比例，默认为 0 。
flex-shrink：可选，定义项目的缩小比例，默认为 1 。
flex-basis：可选，定义在分配多余空间之前，项目占据的主轴空间，默认为 auto 。
1. 设置所有三个值：
.item {
flex: 2 2 100px; /* flex-grow: 2, flex-shrink: 2, flex-basis: 100px */
}2. 只设置 flex-grow 和 flex-basis ：
.item {
flex: 2 100px; /* flex-grow: 2, flex-shrink: 1（默认值）, flex-basis: 100px */
}3. 只设置 flex-grow 和 flex-shrink ：
.item {
flex: 2 2; /* flex-grow: 2, flex-shrink: 2, flex-basis: auto（默认值） */
}4. 只设置 flex-basis ：
.item {
flex: 1 1 auto; /* flex-grow: 1（默认值）, flex-shrink: 1（默认值）, flex-basis: auto */
}5. 设置 flex-grow ：
.item {
flex: 3; /* flex-grow: 3, flex-shrink: 0（如果只设置一个值，flex-shrink默认为0）, flex-basis: 0% */
}- 提供一个值，它将应用于 flex-grow ，并且 flex-shrink 将默认为 0 （除非你明确设置为 flex-shrink: 1 ），而 flex-basis 将默认为 0% 。
- 提供两个值，第一个值将应用于 flex-grow ，第二个值将应用于 flex-shrink ，flex-basis 将默认为 auto 。
- 提供三个值，它们将分别应用于 flex-grow 、 flex-shrink 和 flex-basis 。
排序和单独对齐
排序
在CSS的伸缩盒模型（Flexbox）中， order 属性用于定义项目的排列顺序。数值越小，排列越靠前，默认值为0。这意味着你可以通过给不同的项目设置不同的 order 值来控制它们的顺序。例如有三个项目，并且希望第三个项目排在最前面，你可以这样实现
.item1 { order: 2; }
.item2 { order: 1; }
.item3 { order: 0; }这样， .item3 将会排在最前面，其次是 .item2 ，最后是 .item1 。
单独对齐
align-self 属性单独调整伸缩项目在侧轴（纵轴）上的对齐方式。这个属性的默认值是 auto ，表示继承父元素的 align-items 属性。 align-self 可以设置为以下几个值：
- flex-start ：项目在侧轴起始位置对齐。
- flex-end ：项目在侧轴结束位置对齐。
- center ：项目在侧轴上居中。
- baseline ：项目在侧轴上文本基线对齐。
- stretch ：项目在侧轴上拉伸以填满容器（如果项目未设置高度或宽度）。
让某个项目在侧轴上居中对齐
.item {
align-self: center;
}即使父容器使用 align-items: flex-start; ， .item 也会单独在侧轴上居中对齐。
通过这两个属性，你可以灵活地控制伸缩盒模型中项目的排序和对齐，以适应不同的布局需求。
以上便是弹性盒模型的主要内容啦，看完记得练练手哦~
扫一扫
1198
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
