目录
1.作用：网页布局---实现子元素标签在父元素标签中的空间排列
1. 什么是弹性布局？
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
2. flex弹性盒子布局
1.作用：网页布局---实现子元素标签在父元素标签中的空间排列
2.属性：
2.1 父属性：
display:flex; //定义flex弹性盒子布局模型
flex-direction：主轴方向
flex-wrap ：换行
flex-flow：主轴方向+换行
justify-content：主轴对齐方式
align-items：交叉轴对齐方式
align-content：多根轴线对齐方式
2.2 子属性：
order：子元素排列顺序
flex:子元素占据的空间比例
3.特点
父元素定义为flex属性后，所有的子元素都会横向排列，并且子元素的宽度会根据子元素的内容 自动调整
3.对于属性的理解与案例
1.display:fiex
当你使用盒子模型，不做任何处理时，它会出现纵向排列，简单演示一下（方便形成对比）。
<!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>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 1000px;
height: 300px;
background-color: #8b3636;
}
.container div {
width: 300px;
height: 200px;
}
.container .item1 {
background-color: #f00;
}
.container .item2 {
background-color: #ff0;
}
.container .item3 {
background-color: #f0f;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>
</body>
</html>
当你想实现横向排列时，你可以使用浮动或者设置成行内块，定位。但现在我们可以使用flex布局实现这一效果。即在父容器中添加display:flex;
当你再添加3个盒子时，且盒子总宽度大于父容器宽度时（高度也是一样，大家可以去试一下），它会自动调节盒子宽度填满父容器，每个盒子的宽度相等，宽度等于父容器宽度除以小盒子的个数，子盒子永远不会脱离父盒子，意思就是如果放得下，就正常显示，放不下就做弹性内减（去掉父容器高度时，子元素高度即父容器高度）
2.flex-direction
备注：这里的样式为
决定主轴的方向，水平或者垂直
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿
3.flex-wrap
备注：这里的样式为（不过它的盒子数变成了六个）
nowrap（默认）：不换行
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
4.flex-flow
以上两种的简写方式
备注：这里的样式为（这里的盒子也是六个）
flex-flow: row-reverse wrap;
（不建议这样用，除非你非常熟练）
flex-flow: row wrap;
这里只举了两个例子，其他例子你们可以自己去试一下。
5. justify-content
主轴对齐方式（即x轴）
备注：这里的样式为：
flex-start（默认值）：左对齐
center:居中
flex-end:右对齐
space-between:两端对齐，项目之间的间隔都相等。（这里是8个盒子，子盒子的宽度为240px)
space-around:每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
（为了体现区别，这里的父盒子宽度为1100px）
space-evenly:项目之间的间隔与项目与边框的间隔相等。
6.align-items
交叉轴对齐方式（即y轴）
备注：这里的样式为：
flex-start:与交叉轴的起点对齐。
center:交叉轴的中点对齐。
flex-end:交叉轴的终点对齐。（这里是3个盒子）
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。(即子元素无高度时，子元素高度自动拉伸）
baseline:项目的第一行文字的基线对齐。
备注（这里的样式发生了一点小改变）
.container .item2 {
height: 300px;
line-height: 300px;
background-color: #ff0;
}
7.align-content
备注：这里的样式为（这里的盒子为12个）：
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-start:与交叉轴的起点对齐。
center:与交叉轴的中点对齐。
flex-end:与交叉轴的终点对齐。
space-between:与交叉轴两端对齐，轴线之间的间隔平均分布。
align-content:space-between与justify-content: space-between一起实现的效果
align-content:space-between与justify-content: space-evenly一起实现的效果
align-content: space-around与justify-content: space-evenly一起实现的效果
align-content: space-evenly与justify-content: space-evenly一起实现的效果
备注：这里的样式发生了一点改变（这里的盒子为16个）
8.order
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
9. flex
flex属性定义子元素占据的空间比例
备注：这里的样式为：
说明：子元素宽度将父容器占满（比例各一份，所以flex都为1，每个盒子占1/3）
4.总结
以上就是我对于flex弹性盒子的一些理解，希望对你有一些帮助，如果有不懂的地方，可以留言讨论，最后，下次见。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
