本文介绍了Flex布局的基本使用，通过在外部容器设置`display:flex`开启布局。接着讲解了主要的容器属性，如`justify-content`（主轴布局）和`align-items`（交叉轴布局），以及`flex-direction`和`flex-wrap`。此外，还涵盖了项目属性，包括`order`,`align-self`,`flex-grow`,`flex-shrink`和`flex`，这些属性用于控制项目的排列顺序和尺寸调整。
开启flex布局只需要在外层容器设置display:flex即可。
设置后找个外层容器就是一个flex容器。所有子容器自动成为容器成员，称为flex项目。
开启flex后，里面的flex项目会自动按照main-axis水平布局
test01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.box{
width: 800px;
height: 400px;
margin: 0 auto;
display: flex;
border: 1px solid red;
}
.box div{
width: 100px;
height: 100px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="box">
<div id="item1"></div>
<div id="item1"></div>
<div id="item1"></div>
</div>
</body>
</html>
2、容器属性
2.1 justify-content - main轴-水平布局
2.1.1 center
flex项目水平居中
2.1.2 flex-end
flex项目靠右对齐
2.1.3 space-between
flex项目两端对齐
2.1.4 space-around
flex项目两端对齐，项目间的距离是两端和容器距离的2倍。
2.1.5 space-evenly
flex项目两端对齐，项目间距和容器两端的距离相等。
2.2 align-items - cross轴-垂直布局
2.2.1 center
垂直方向居中
2.2.2 flex-end
cross轴底部对齐
2.2.3 水平、垂直居中
justify-content:center;
align-items:center;
2.3 flex-direction - 项目方向
2.3.1 row-reverse
flex项目水平方向，反序排列
2.3.2 column
flex项目垂直方向，正序排列
2.3.3 column-reverse
flex项目垂直方向，反序排列
2.4 flex-wrap - 换行、换列
2.4.1 nowrap
默认值。意思是不换行、换列。
当flex项目的总宽度超过容器的宽度，flex项目将按照原有比例强行等分，且不换行。
2.4.2 wrap
换行、换列。当flex项目的总宽度超过容器的宽度，将自然换行、换列。且每一行（列）等分容器。
3、项目属性
3.1 order
项目的排列顺序。数值越小，排列越靠前。
3.2 align-self
设置单个flex项目的对齐方式。
3.2.1 center
居中
3.2.2 flex-end
底端对齐
3.3 flex-grow
默认值为0。用于决定项目在有剩余空间的情况下是否放大。默认不放大。
注意：即使设置了宽度，如果设置了放大，那么宽度失效。
多个flex项目同时放大，如果数值越大，放大的比例也越大。
多个flex项目根据放大比例，重新分配了剩余空间。
3.4 flex-shrink
不换行、换列的情况下有效。
设置缩小。默认值为1，默认情况下，会等比例缩小，宽度失效。
设为0，表示不缩小。
数值越大，缩小的比例也越大。
3.5 flex
取值默认：0 1 auto。flex属性是 flex-grow、flex-shrink与flex-basis的简写。用于定义项目放大，缩小与宽度。
flex有两个快捷值：
auto。表示（1 1 auto）等分放大缩小。
none。表示（0 0 auto）不放大，但等分缩小。
扫一扫
1022
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
