flex布局（弹性盒子一）

最新推荐文章于 2025-04-20 01:49:30 发布

手可摘星辰^v^

最新推荐文章于 2025-04-20 01:49:30 发布

阅读量8.6k

点赞数 27

文章标签： html 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_72959685/article/details/126473389

版权

本文详细介绍了CSS3中的Flexbox弹性盒子模型，包括如何开启弹性盒子，以及flex-direction、flex-wrap和flex-flow属性的使用。通过实例展示了不同属性值对子元素排列方式的影响，如row、row-reverse、column和column-reverse，以及nowrap、wrap和wrap-reverse对换行行为的控制。此外，还提到了flex-flow属性作为flex-direction和flex-wrap的简写形式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、弹性盒子的开启

二、弹性盒子的不同样式

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>