弹性布局样式

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，将占满整个容器的高度。