2021-03-25 23:46:36
弹性布局相关属性
flex-direction相关属性
flex-wrap相关属性
justify-content相关属性
align-items相关属性
align-content相关属性
样例Demo
效果图：
HTML5 实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>弹性布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 50px;
height: 50px;
border: 1px solid blueviolet;
text-align: center;
line-height: 50px;
}
.flex-item1{
background: red;
order: 3;/*设置伸缩向的排序*/
}
.flex-item2{
background: green;
order: 1;/*设置伸缩向的排序*/
}
.flex-item3{
background: blue;
order: 2;/*设置伸缩向的排序*/
}
.flex-container1{
display: flex;
flex-direction: row;
flex-wrap: wrap;
/*主轴对齐*/
justify-content: flex-start;
}
.flex-container2{
display: flex;
flex-direction: row;
flex-wrap: wrap;
ustify-content: flex-end;
}
.flex-container3{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
.flex-container4{
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
}
.flex-center1{
/*伸缩向分配空间格式：flex：flex-grow;flex-fhrink;flex-grow*/
/*表示除了占据原先的宽度外，还要分配剩余宽度（包括扩展或收缩）*/
flex: 1 1 auto;
}
.flex-center2{
/*表示分配所有宽度（包括扩展或收缩）*/
flex-basis: 0%;
flex-shrink: 1;
flex-grow: 1;
}
</style>
</head>
<body>
<h3>水平排列</h3>
<h5>flex:1 1 auto</h5>
<div class="flex-container1">
<div class="flex-item1 box">1</div>
<div class="flex-item2 box">1</div>
<div class="flex-item3 box flex-center1">auto</div>
</div>
<h5>flex-basis: 0%;flex-shrink: 1;flex-grow: 1;</h5>
<div class="flex-container1">
<div class="flex-item1 box flex-center2">1</div>
<div class="flex-item2 box flex-center2">1</div>
<div class="flex-item3 box flex-center2">auto</div>
</div>
<h5>justify-content: flex-start;</h5>
<div class="flex-container1">
<div class="flex-item1 box">1</div>
<div class="flex-item2 box">1</div>
<div class="flex-item3 box">auto</div>
</div>
<h5>justify-content: flex-end;</h5>
<div class="flex-container2">
<div class="flex-item1 box">1</div>
<div class="flex-item2 box">1</div>
<div class="flex-item3 box">auto</div>
</div>
<h5>justify-content: space-around;;</h5>
<div class="flex-container3">
<div class="flex-item1 box">1</div>
<div class="flex-item2 box">1</div>
<div class="flex-item3 box">auto</div>
</div>
<h3>垂直排列</h3>
<div class="flex-container4">
<div class="flex-item1 box">1</div>
<div class="flex-item2 box">1</div>
<div class="flex-item3 box flex-center1">auto</div>
</div>
</body>
</html>
原文链接：https://blog.csdn.net/weixin_46085790/article/details/112609851
