双项目时的布局情况
<!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
作者：椰果粒
链接：https://www.jianshu.com/p/d21e804328b3
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦