CSS布局——弹性布局（display: flex）
·
目录
5.2.4. space-between：两端对齐，项目之间的间隔都相等
5.2.5. space-around：每个项目两侧的间隔相等
6.2.4. baseline: 项目的第一行文字的基线对齐
6.2.5. stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
7.2.4. space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
7.2.5. space-around：每根轴线两侧的间隔都相等。
1. Flex 布局 的介绍
1.1. 什么是 Flex 布局？
- Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
1.2. Flex 布局 的使用范围
- 任何一个容器都可以指定为 Flex 布局
1.3. Flex 布局 的注意点
- 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
2. Flex 布局 的基本概念
2.1. 容器
- 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。
2.2. 项目
- 容器中所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
- 项目默认沿主轴排列
2.3. 容器默认存在两根轴
- 水平的主轴（main axis）
- 垂直的交叉轴（cross axis）
3. 容器属性-排列方向（flex-direction)
3.1. flex-direction属性 的介绍
- flex-direction属性决定主轴的方向（即项目的排列方向）
3.2. flex-direction属性 的属性值
3.2.1. row（默认值）
- 主轴为水平方向，起点在左端
3.2.2. row-reverse
- 主轴为水平方向，起点在右端
3.2.3. column
- 主轴为垂直方向，起点在上沿
3.2.4. column-reverse
- 主轴为垂直方向，起点在下沿
4. 容器属性-换行（flex-wrap)
4.1. flex-wrap属性 的介绍
- flex-wrap属性定义，如果一条轴线排不下，如何换行
- 默认情况下，项目都排在一条线（又称"轴线"）上
4.2. flex-wrap属性 的属性值
4.2.1. nowrap（默认）：不换行
4.2.2. wrap：换行，第一行在上方
4.2.3. wrap-reverse：换行，第一行在下方
5. 容器属性-主轴分布（justify-content）
5.1. justify-content属性 的介绍
- justify-content属性定义了项目在主轴上的对齐方式
5.2. justify-content属性 的属性值
下面假设主轴为从左到右
5.2.1. flex-start（默认值）：左对齐
5.2.2. flex-end：右对齐
5.2.3. center： 居中
5.2.4. space-between：两端对齐，项目之间的间隔都相等
5.2.5. space-around：每个项目两侧的间隔相等
- 项目之间的间隔比项目与边框的间隔大一倍
6. 容器属性-交叉轴分布（align-items）
6.1. align-items属性 的介绍
- align-items属性定义项目在交叉轴上如何对齐
6.2. align-items属性 的属性值
下面假设交叉轴从上到下
6.2.1. flex-start：交叉轴的起点对齐
6.2.2. flex-end：交叉轴的终点对齐
6.2.3. center：交叉轴的中点对齐
6.2.4. baseline: 项目的第一行文字的基线对齐
6.2.5. stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
7. 容器属性-多行分布（align-content）
7.1. align-content属性 的介绍
- align-content属性定义了多根轴线的对齐方式
- 如果项目只有一根轴线，该属性不起作用
7.2. align-content属性 的属性值
下面假设交叉轴从上到下
7.2.1. flex-start：与交叉轴的起点对齐
7.2.2. flex-end：与交叉轴的终点对齐
7.2.3. center：与交叉轴的中点对齐
7.2.4. space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
7.2.5. space-around：每根轴线两侧的间隔都相等。
- 轴线之间的间隔比轴线与边框的间隔大一倍
7.2.6. stretch（默认值）：轴线占满整个交叉轴
8. 项目属性-顺序（order）
8.1. order属性 的介绍
- order属性定义项目的排列顺序
8.2. order属性 的属性值
- 数值越小，排列越靠前，默认为0
9. 项目属性-生长（flex-grow）
9.1. flex-grow属性 的介绍
- flex-grow属性定义项目的放大比例
9.2. flex-grow属性 的属性值
- 默认为0，即如果存在剩余空间，也不放大
- 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间
- 如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍
10. 项目属性-收缩（flex-shrink）
10.1. flex-shrink属性 的介绍
- flex-shrink属性定义了项目的缩小比例
10.2. flex-shrink属性 的属性值
- 默认为1，即如果空间不足，该项目将缩小
- 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小
- 如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小
- 负值对该属性无效
11. 项目属性-基础尺寸（flex-basis）
11.1. flex-basis属性 的介绍
- flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）
- 浏览器根据这个属性，计算主轴是否有多余空间
11.2. flex-basis属性 的介绍
- 它的默认值为auto，即项目的本来大小
- 它可以设为跟width或height属性一样的值，则项目将占据固定空间
12. 项目属性-元素自己沿交叉轴（align-self）
12.1. align-self属性 的介绍
- align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
12.2. align-self属性 的属性值
- 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
- 除了auto，其他都与align-items属性完全一致
13. 弹性布局-练习
<!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>
body{
padding: 0;
margin: 0;
display: flex;
/* 元素沿着主轴居中*/
justify-content: center;
/* 元素沿着交叉轴居中*/
align-items: center;
height: 100vh;
font-size: 2rem;
}
.parent{
/* 弹性布局:默认横向布局
子元素成为项目元素,项目元素它的一些各种状态就受flex布局的相关属性设置的影响
*/
display:flex;
/* 让子元素之间产生一定的间隙 */
gap: 30px;
/* flex-direction: column; */
/* 内边距padding */
padding: 60px;
/* 背景颜色 */
background-color: rgb(236, 216, 255);
/* 宽度 */
width: 800px;
/* 高度 */
height: 340px;
}
.box1{
/* 背景颜色 */
background-color: blueviolet;
/* 高度/宽度与主轴的方向伸长（用于设置宽度），宽度：剩余空间总共分成3份，占1份 */
flex-grow: 1;
}
.box2{
/* 高度/宽度向主轴的方向伸长（用于设置宽度），宽度：剩余空间总共分成3份，占2份 */
flex-grow: 2;
/* 弹性布局:默认横向布局 */
display: flex;
/* 改变默认的排列方向 （水平-垂直）*/
flex-direction: column;
/* 让子元素之间产生一定的间隙 */
gap: 20px;
/* 元素沿着主轴分布，前后两个元素抵达父元素的边界，剩余的空间夹在元素的中间，并平均分*/
justify-content: space-between;
}
.box2-box1{
/* 弹性布局:默认横向布局 */
display: flex;
/* 让子元素之间产生一定的间隙 */
gap: 20px;
}
.box2-box1-box{
/* 高度/宽度向主轴的方向伸长（用于设置宽度），宽度：剩余空间总共分成3份，占2份 */
flex-grow: 2;
/* 弹性布局:默认横向布局 */
display: flex;
/* 改变默认的排列方向 （水平-垂直）*/
flex-direction: column;
/* 让子元素之间产生一定的间隙 */
gap: 20px;
}
.box2-box1-box-box{
/* 弹性布局:默认横向布局 */
display: flex;
/* 让子元素之间产生一定的间隙 */
gap: 20px;
}
.box2-box1-box-box-item{
/* 背景颜色 */
background-color: blueviolet;
/* 高度/宽度向主轴的方向伸长（用于设置宽度），宽度：剩余空间总共分成5份，占3份 */
flex-grow: 3;
/* 高度 */
height: 60px;
}
.box2-box1-box-box-item2{
/* 高度/宽度向主轴的方向伸长（用于设置宽度），宽度：剩余空间总共分成5份，占2份 */
flex-grow: 2;
}
.box2-box1-box-item{
/* 背景颜色 */
background-color: blueviolet;
/* 高度 */
height: 80px;
}
.box2-box1-item{
/* 高度/宽度向主轴的方向伸长（用于设置宽度），宽度：剩余空间总共分成3份，占1份 */
flex-grow: 1;
/* 高度 */
height: 260px;
/* 背景颜色 */
background-color: blueviolet;
}
.box2-box2{
/* 弹性布局:默认横向布局 */
display: flex;
/* 让子元素之间产生一定的间隙 */
gap: 60px;
}
.box2-box2-item{
/* 背景颜色 */
background-color: blueviolet;
/* 高度/宽度向主轴的方向伸长（用于设置宽度），宽度：剩余空间总共分成2份，占1份 */
flex-grow: 1;
/* 高度 */
height: 30px;
}
.box2-box2-box{
/* 弹性布局:默认横向布局 */
display: flex;
/* 让子元素之间产生一定的间隙 */
gap: 20px;
/* 高度/宽度向主轴的方向伸长（用于设置宽度），宽度：剩余空间总共分成2份，占1份 */
flex-grow: 1;
}
.box2-box2-box-item{
/* 背景颜色 */
background-color: blueviolet;
/* 高度/宽度向主轴的方向伸长（用于设置宽度），宽度：剩余空间总共分成3份，占1份 */
flex-grow: 1;
}
.box2-box2-box-item2{
/* 高度/宽度向主轴的方向伸长（用于设置宽度），宽度：剩余空间总共分成3份，占2份 */
flex-grow: 2;
}
</style>
</head>
<body>
<div class="parent">
<div class="box1 box"></div>
<div class="box2 box">
<div class="box2-box1">
<div class="box2-box1-box">
<div class="box2-box1-box-box">
<div class="box2-box1-box-box-item"></div>
<div class="box2-box1-box-box-item box2-box1-box-box-item2"></div>
</div>
<div class="box2-box1-box-item"></div>
</div>
<div class="box2-box1-item"></div>
</div>
<div class="box2-box2">
<div class="box2-box2-item"></div>
<div class="box2-box2-box">
<div class="box2-box2-box-item"></div>
<div class="box2-box2-box-item box2-box2-box-item2"></div>
</div>
</div>
</div>
</div>
</body>
</html>
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
49
0- 0
已为社区贡献1条内容
所有评论(0)