双项目时的布局情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
border: 3px solid red;
}
.item{
width: 50px;
height: 50px;
border: 3px solid green;
}
</style>
</head>
<body>
<div class="box">
<div class="item">item1</div>
<div class="item">item2</div>
</div>
</body>
</html>
原始图.png
flex布局后
.box{
width: 200px;
height: 200px;
border: 3px solid red;
display: flex;
}
flex布局后.png
此时的布局方式和加上
justify-content:flex-start效果相同
space-space-between 两端对齐布局
.box{
display: flex;
justify-content: space-between;
}
两端对齐.png
space-around 环绕对齐
.box{
display: flex;
justify-content: space-around;
}
环绕对齐.png
justify-content结合align-items 可以变换出更多造型
左右环绕对齐，上下居中对齐
.box{
display: flex;
justify-content: space-around;
align-items: center;
}
结合对齐.png
当items项目们没有设置高度或者高度为auto时，stretch表示纵向铺满全屏
.box{
display: flex;
justify-content: space-around;
// items没设置高度时 ，伸展
align-items: stretch;
}
注意：items没设置 高度时.png
如果两个项目想纵向排列，用flex-direction:column
.box{
display: flex;
flex-direction:column;
justify-content: space-around;
align-items: center;
}
纵向排列.png
具体效果 和横纵向颠倒是一样的
项目太多时的换行情况，默认不换行
默认不换行.png
换行时，自动计算
.box{
display: flex;
flex-wrap: wrap;
}
换行.png
换行并几行之间逆转
.box{
display: flex;
flex-wrap: wrap-reverse;
}
逆转换行.png
flex-flow使用
.box{
display: flex;
// flex-flow是flex-direction和flex-wrap的结合
flex-flow:column wrap;
}
flex-flow.png
