1、html代码
<div class="boxContainer">
<div class="box" style="background-color: rgb(226, 165, 196)">1</div>
<div class="box" style="background-color: rgb(192, 255, 220)">2</div>
<div class="box" style="background-color: rgb(243, 255, 192)">3</div>
<div class="box" style="background-color: rgb(192, 217, 255)">4</div>
<div class="box" style="background-color: rgb(255, 226, 192)">5</div>
<div class="box" style="background-color: rgb(243, 145, 194)">6</div>
<div class="box" style="background-color: rgb(156, 175, 238)">7</div>
<div class="box" style="background-color: rgb(192, 240, 255)">8</div>
<div class="box" style="background-color: rgb(192, 255, 206)">9</div>
</div>
2、弹性布局
在最外面的div中添加display:flex
<style>
*{
width: 100%;
height: 100%;
}
.boxContainer{
width: 100%;
display: flex;
}
.box{
width: 300px;
height: 300px;
}
</style>
1、页面会自动将其变为一排,默认flex-direction的方向为row
2、flex-direction:row-reverse
3、 flex-direction:column
4、flex-direction:column-reverse
5、 justify-content:flex-start
6、justify-content: flex-end
7、justify-content: center
8、 justify-content: space-between
9、justify-content: space-around
10、align-items:flex-start
11、align-items:flex-end
12、align-items:center
13、align-items:baseline: 项目的第一行文字的基线对齐。
14、align-items:stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。