Flex弹性盒子模型

最新推荐文章于 2025-06-02 14:15:12 发布

原创最新推荐文章于 2025-06-02 14:15:12 发布 · 231 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍Flex弹性盒子模型的基本概念，包括如何定义弹性盒子及其简单的布局方式。详细解释了flex-direction、flex-wrap和justify-content属性的作用及使用方法。

Flexible Box 的缩写Flex，为弹性盒子模型，与标准盒子模型有一些不同。

任何一个容器都可以定义为弹性盒子。

定义方法“display: flex;”

下面写一些代码介绍一下如何定义弹性盒子模型以及简单的布局方式。

body部分定义几个div。

<div id="container">
    <div id="inner1"></div>
    <div id="inner2"></div>
    <div id="inner3"></div>
</div>

css部分代码。

#container {
    height: 300px;
    border: 1px solid red;
}

#inner1 {
    width: 28%;
    height: 200px;
    background-color: blue;
}

这时效果图如图1。

图1

下面给父元素定义为弹性盒子：display: flex;

运行后效果如图2。

图2

这时我们可以看出三个子div横向排列。

一、flex-direction 属性：

1：row（默认值）：水平方向从左到右排列。（如图2）

2：row-reverse：反向水平从右到左排列。（如图3）

3：column：垂直排列，起点在上方。（如图4）

4：column-reverse：反向垂直排列，起点在下方。（如图5）

图3

图4

图5

我们这时可以注意到，如果改成垂直显示，垂直方向高度不够，子元素的高度会等比例压缩。

二：、flex-wrap 属性：

1：nowrap（默认）：不换行，如果显示不开等比例压缩。（如图6）

2：wrap：换行，所换元素下移。（如图7）

3：wrap-reverse：换行，所换元素上移。（如图8）

图6

图7

图8

三、 justify-content 属性：

1：flex-start: 左对:（如图9） 2：flex-end: 右对齐（如图10） 3：center: 居中对齐（如图11） 4：space-between: 两端对齐项目之间的间隔相等。（如图12） 5：space-around: 等间距对齐项目两侧的间隔相等，项目之间的间隔比项目两侧的间隔大一倍。（如图13）

图9

图10

图11

图12

图13