flex布局（弹性盒子一）

最新推荐文章于 2024-05-03 19:19:43 发布

手可摘星辰^v^

最新推荐文章于 2024-05-03 19:19:43 发布

阅读量8.4k

点赞数 27

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/m0_72959685/article/details/126473389

版权

一、弹性盒子的开启

二、弹性盒子的不同样式

1.flex-direction：子项目的排列方向

2.flex-wrap：子项目多行

3. flex-flow 是flex-direction和flex-wrap的一起指定（简写）

一、弹性盒子的开启

设置内容区的样式：
   .container{
            display: flex;
        }
内容区：
 <div class="container">
        <div class="item1">1</div>
        <div class="item2">2</div>
    </div>

这样弹性盒子就开启了

二、弹性盒子的不同样式

1.flex-direction：子项目的排列方向

a. row 正常（默认值）

  设置内容区的样式 
   .container{
             display: flex;
            flex-direction:row;
            width: 500px;
            height: 500px;
            border: 1px red solid;
        }
        .item{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;
            border: 1px orange solid;
        }
内容区：
   <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">2</div>
    </div>

如图所示：开启了弹性盒子后，设置属性flex-direction再设置属性值row以后，盒子是正常排列的

b. row-reverse 反方向（从右向左）

意思是设置了属性值为row-reverse后，盒子就会反方向排列，即从右向左排列

c. column 从上向下

意思是设置了属性值为column后，盒子会从上向下排列，从最左最顶部开始

d. column-reverse 从下向上

意思是设置了属性值为 column-reverse后，盒子会从下向上排列，从最左最下面开始

2.flex-wrap：子项目多行

a. nowrap 不换行

设置内容区样式： 
 .container{
            display: flex;
            flex-wrap: nowrap;
            width: 500px;
            height: 500px;
            border: 1px red solid;
        }
        .item{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;
            border: 1px orange solid;
        }
 内容区： 
<div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
    </div>