目录
弹性盒子模型介绍
弹性盒子模型（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 ：控制项目的弹性行为。
display : flex;
display : inline-flex;
按照上述示例代码设置指定元素为弹性盒子模型，该元素成为伸缩容器,其子元素则成为伸缩项目。
flex: 设置指定元素为块级元素的弹性盒子模型。
inline-flex: 设置指定元素为行内块级元素的弹性盒子模型。1.flex-direction属性
CSS flex-direction属性适用于伸缩容器元素，用于创建主轴的方向。
flex-direction: row| row-reverse | column| column-reverse
row:设置主轴是水平方向。
row-reverse: 与row的排列方向相反。
column: 设置主轴是垂直方向。
column-reverse: 与column的排列方向相反。2.justify-content属性
CSS justify-content属性适用于伸缩容器元素，用于设置伸缩项目沿着主轴线的对齐方式。
justify-content: center | flex-start| flex-end | space between| space-around
center: 伸缩项目向第一行的中间位 置对齐。
flex-start:伸缩项目向第一行的开始位置对齐。
flex-end: 伸缩项目向第一行的结束位置对齐。
space-between: 伸缩项目会平均分布在一行中。
space-around:伸缩项目会平均分布在一行中 ，两端保留一半的空间。3.align-items属性
CSS align-items属性适用于伸缩容器元素，用于设置伸缩项目所在行沿着侧轴线的对齐方式。
align-items: center| flex-start | flex-end | baseline | stretch
center: 伸缩项目向侧轴的中间位置对齐。
flex-start: 伸缩项目向侧轴的起点位置对齐。
flex- rend:伸缩项目向侧轴的终点位置对齐。
baseline: 伸缩项目根据伸缩项目的基线对齐。
stretch: 默认值，伸缩项目拉伸填充整个伸缩容器。4.flex-wrap属性
CSS flex-wrap属性适用于伸缩容器元素，用于设置伸缩容器的子元素是单行显示还是多行显示。
flex-wrap: nowrap | wrap | wrap-reverse
nowrap: 设置伸缩项目单行显示。这种方式可能导致溢出伸缩容器。
wrap:设置伸缩项多行显示。
wrap-reverse:与wrap相反。
align-content属性
CSS align-content属性适用于伸缩容器元素，用于设置伸缩行的对齐方式。该属性会更改flex-
wrap属性的效果。5.align-content属性
CSS align-content属性适用于伸缩容器元素，用于设置伸缩行的对齐方式。该属性会更改flex-
wrap属性的效果。
align-content: center | flex-start| flex-end I space-between I space around | stretch
center: 各行向伸缩容器的中间位置对齐。
flex-start:各行向伸缩容器的起点位置对齐。
flex-end:各行向伸缩容器的终点位置对齐。
space-between: 各行会平均分布在一行中。
space-around:各行会平均分布在一行中， 两端保留一半的空间。
stretch: 默认值，各行将会伸展以占用额外的空间。二、flex属性
CSS flex属性是一个简写属性， 用于设置伸缩项目如何伸长或缩短以适应伸缩容器中的可用空间。
flex: auto | none| [ <'flex-grow'> <'flex -shrink'>? || <'flex-basis'> ]
auto: 伸缩项目会根据自身的宽度和高度确定尺寸，相当于将该属性设置为“flex: 11 auto”。
none:伸缩项目会根据自身的宽度和高度确定尺寸，相当于将该属性设置为“flex: 00 auto’
flex-grow：设置了一个flex项主尺寸的flex增长系数。它指定了flex容器中剩余空间的多少应该分配给项目（flex增长系数）。负值无效，默认为0。
flex -shrink：指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。负值是不被允许的。
flex-basis：指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。flex属性可以非常简单的实现三列布局，定宽+自适应+定宽：
flex-basis
flex 布局的默认主轴方向为 row ，所以 flex-basis 属性 默认是控制元素的 width （宽度）
当修改 flex-direction: column; 属性 ，设置主轴方向为 column (列) 的时候 ，此时 flex-basis 属性 控制元素的 height (高度)
flex-grow
是用来分配剩余空间的
注意： flex-grow 的默认值为 0，意思是该元素不索取父元素的剩余空间，
如果值大于0，表示索取。值越大，索取的越厉害。
假如设置父元素 400px，子元素 A 为100px，子元素 B 为 200px.则剩余空间为 100px
例子一：
A的 flex-grow 为 0，B的 flex-grow 为 0（即A、B不设置该属性）
则A、B的实际宽度为他们本身的宽度，即A的实际宽度为100px ； B的实际宽度为200px
例子二：
A的 flex-grow 为1，B的 flex-grow为0（即不设置该属性）
则A的实际宽度为 100px + 100px =200px ；
B的实际宽度为 200px + 0 = 200px
例子三：
A的 flex-grow 为 1，B的 flex-grow 为 2
则 A 的实际宽度为 100px + 100px * 1/3 = 400/3 px ,
B的实际宽度为 200px + 100px * 2/3 = 800/3 px
上面的 总系数为 1 + 2 = 3 ，然后按照 各元素的 flex-grow 的属性值进行分配 A 1/3 B 2/3
flex-shrink
flex-shrink 属性定义了项目的收缩规则。
注意：如果元素不是弹性盒对象的元素，则
flex-shrink属性不起作用。默认为1，当父元素的宽度小于所有子元素的宽度的和时，子元素的宽度会减小。值越大，减小的越厉害
如果值为 0，表示不减小。
如果所有项目的
flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的
flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
假如设置父元素 400px，子元素A为 200px，子元素B为 300px.则超出空间为 100px
例子一：
设置A的 flex-shrink 为 0，B的 flex-shrink 为 0
则A，B都不减小宽度，A、B的实际宽度为他们本身的宽度，即A的实际宽度为 200px ； B的实际宽度为 300px
例子二：
A的 flex-shrink 为 0，B的 flex-shrink 为 1，则A不减小宽度，B减小
则A的实际宽度为他本身的宽度= 200px ， B的实际宽度为 300px - 100px（超出的宽度）= 200px
例子三：
如果A，B都减小宽度，A设置 flex-shirk 为 3，B设置 flex-shirk 为 2。则最终 A 的大小为 自身宽度 (200px) - A减小的宽度(100px * (200px * 3 / (200px * 3 + 300px * 2))) = 150px
最终 B 的大小为 自身宽度 (300px)- B减小的宽度 (100px * (300px * 2/(200px* 3 + 300px* 2))) = 250px
flex: none
flex 取值为 none，则三个属性依次为 0 0 auto，（不放大也不缩小）。如下是等同的
.item {flex: none;}
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}flex:auto
当 flex取值为 auto，则三个属性依次为 1 1 auto（放大且缩小）等分剩余空间 。。如下是等同的：
.item {flex: auto;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}默认情况下
flex 属性的默认值为：0 1 auto （不放大会缩小）
flex:1
flex:1 不等于 flex: 1 1 auto ，flex:auto 才是 flex: 1 1 auto
flex:1 等同于下面的写法 （ 放大且缩小并等分所有空间），但 flex:auto 和它的区别就是等分剩余空间 。
flex:1 等同于下面
flex-grow: 1
flex-shrink: 1
flex-basic: 0%align-self属性
CSS align-self属性适用于伸缩容器元素，用于设置伸缩项目自元素在侧轴的对齐方式。
align-self: center| flex-start | flex-end | baseline| stretch
center: 伸缩项目向侧轴的中间位置对齐。
flex-start: 伸缩项目向侧轴的起点位置对齐。
flex-end: 伸缩项目向侧轴的终点位置对齐。
baseline: 伸缩项目根据伸缩项目的基线对齐。
stretch: 默认值，伸缩项目拉伸填充整个伸缩容器。参考学习链接：flex 的 三个参数：flex-grow、flex-shrink、flex-basis_flex属性的三个值-优快云博客
扫一扫
1330
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
