弹性盒模型

最新推荐文章于 2023-04-17 14:40:08 发布

顾九七

最新推荐文章于 2023-04-17 14:40:08 发布

阅读量529

点赞数

分类专栏： CSS 文章标签： html css

本文链接：https://blog.csdn.net/qq_44681872/article/details/105209681

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

弹性盒模型

父元素：flex container
子元素：flex items.
当其有父元素且子元素的排布具有一定顺序时，我们可以将排布属性统一写在父元素中，若无父元素或者子元素排布无顺序时，可将排布属性分开写在子元素中，下面都会介绍。
普通盒模型无宽时，子元素会自动将宽变为100%，从上到下依次排列。
弹性盒模型无高时，子元素会自动将高变为100%，从左到右依次排列。
现在先介绍一下父元素容器的两条主要的轴：

主轴方向：从左到右 main axis
交叉轴方向：从上到下 cross axis
子元素的宽度 main size
子元素的高度 cross size

子元素总宽度填不满父元素时

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <title>弹性盒模型</title>
        <meta charset="UTF-8">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <style>
            .container{
                width: 400px;
                height: 400px;
                background-color: rgb(228, 189, 116);
                /* 告诉他，我这是弹性盒模型 */
                display: flex;
            }
            .sl01{
                width: 100px;
                height: 300px;
                background-color: blue;
            }
            .sl02{
                width: 70px;
                height: 100px;
                background-color: pink;
            }
            .sl03{
                width: 50px;
                height: 250px;
                background-color: yellow;
            }
            .sl04{
                width: 30px;
                height: 200px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="sl01">1</div>
            <div class="sl02">2</div>
            <div class="sl03">3</div>
            <div class="sl04">4</div>
        </div>
    </body>
</html>

效果图如下

弹性盒模型默认图示
由图示可以知道，父元素设为弹性盒模型，其效果只出现于其子元素。
当子元素的宽度填不满父元素的时候，子元素整齐从左到右按宽度大小和编辑顺序排列，且不管高度为多少，都是顶部对齐，从上到下。
水平方向的排布方向是按照主轴方向排列。

父元素的宽度不够子元素时

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <title>弹性盒模型</title>
        <meta charset="UTF-8">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <style>
            .container{
                width: 400px;
                height: 400px;
                background-color: rgb(228, 189, 116);
                /* 告诉他，我这是弹性盒模型 */
                display: flex;
                margin: 100px auto 0;
            }
            .sl01{
                width: 100px;
                height: 300px;
                background-color: blue;
            }
            .sl02{
                width: 200px;
                height: 100px;
                background-color: pink;
            }
            .sl03{
                width: 150px;
                height: 250px;
                background-color: yellow;
            }
            .sl04{
                width: 200px;
                height: 200px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="sl01">1</div>
            <div class="sl02">2</div>
            <div class="sl03">3</div>
            <div class="sl04">4</div>
        </div>
    </body>
</html>

效果图如下

是不感觉很神奇，子元素的总宽度都超过父元素了，为什么没有出来呢？我们来看下在浏览器端子元素的大小,我们用两个元素做例子。

他们的实际宽度都比我们自己设的要小，而且还是按照我们设的数字比例来缩小以适应父元素的宽度的。就因为这个，我们才叫他弹性盒模型。

属性应用

当其有父元素，且在父元素中设的属性

flex-direction

来控制主轴的方向，即子元素排列方向。
其属性值有：

row 方向为从左到右，即默认值

            .container{
                width: 400px;
                height: 400px;
                background-color: rgb(228, 189, 116);
                /* 告诉他，我这是弹性盒模型 */
                display: flex;
                margin: 100px auto 0;
                flex-direction: row;
            }

效果图如下

flex-direction:row;
2. row-reverse 方向为从右向左

            .container{
                width: 400px;
                height: 400px;
                background-color: rgb(228, 189, 116);
                /* 告诉他，我这是弹性盒模型 */
                display: flex;
                margin: 100px auto 0;
                flex-direction: row-reverse;
            }

效果图如下

flex-direction:row-reverse;
4. column 方向为从上到下

           .container{
                width: 400px;
                height: 400px;
                background-color: rgb(228, 189, 116);
                /* 告诉他，我这是弹性盒模型 */
                display: flex;
                margin: 100px auto 0;
                flex-direction: column;
            }

flex-direction:column;
可以观察到，当高度不够时，子元素也会自动缩小来适应父元素。
5. column-reverse 方向为从下到上

            .container{
                width: 400px;
                height: 400px;
                background-color: rgb(228, 189, 116);
                /* 告诉他，我这是弹性盒模型 */
                display: flex;
                margin: 100px auto 0;
                flex-direction: column-reverse;
            }

flex-direction:column-reverse;

flex-wrap 子元素换行

当子元素的宽度足够大时，父元素容不下，就设flex-wrap：wrap;让他可以允许子元素换行。但此时换行是将父元素从高度上平等化分等分，元素在每一等分的最上方、最左方。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <title>弹性盒模型</title>
        <meta charset="UTF-8">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <style>
            .container{
                width: 400px;
                height: 400px;
                background-color: rgb(228, 189, 116);
                /* 告诉他，我这是弹性盒模型 */
                display: flex;
                margin: 100px auto 0;
                /* flex-direction: column-reverse; */
                flex-wrap: wrap;
            }
            .sl01{
                width: 100px;
                height: 50px;
                background-color: blue;
            }
            .sl02{
                width: 200px;
                height: 50px;
                background-color: pink;
            }
            .sl03{
                width: 150px;
                height: 100px;
                background-color: yellow;
            }
            .sl04{
                width: 200px;
                height: 60px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="sl01">1</div>
            <div class="sl02">2</div>
            <div class="sl03">3</div>
            <div class="sl04">4</div>
        </div>
    </body>
</html>

此处将子元素的宽度缩小一些，便于观察
在这里插入图片描述

justify-content 来控制沿主轴的排布方向

其属性值如下

flex-start 左对齐

   <!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <title>弹性盒模型</title>
        <meta charset="UTF-8">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <style>
            .container{
                width: 400px;
                height: 400px;
                background-color: rgb(228, 189, 116);
                /* 告诉他，我这是弹性盒模型 */
                display: flex;
                margin: 100px auto 0;
                /* flex-direction: column-reverse; */
                /* flex-wrap: wrap; */
                justify-content: flex-start;
            }
            .sl01{
                width: 30px;
                height: 50px;
                background-color: blue;
            }
            .sl02{
                width: 20px;
                height: 50px;
                background-color: pink;
            }
            .sl03{
                width: 50px;
                height: 100px;
                background-color: yellow;
            }
            .sl04{
                width: 60px;
                height: 60px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="sl01">1</div>
            <div class="sl02">2</div>
            <div class="sl03">3</div>
            <div class="sl04">4</div>
        </div>
    </body>
</html>

在这里插入图片描述
2. flex-end 右对齐

            .container{
                width: 400px;
                height: 400px;
                background-color: rgb(228, 189, 116);
                /* 告诉他，我这是弹性盒模型 */
                display: flex;
                margin: 100px auto 0;
                /* flex-direction: column-reverse; */
                /* flex-wrap: wrap; */
                justify-content: flex-end;
            }

在这里插入图片描述
3. center 居中

            .container{
                width: 400px;
                height: 400px;
                background-color: rgb(228, 189, 116);
                /* 告诉他，我这是弹性盒模型 */
                display: flex;
                margin: 100px auto 0;
                /* flex-direction: column-reverse; */
                /* flex-wrap: wrap; */
                justify-content: center;
            }

在这里插入图片描述
4. space-between 两端对齐

            .container{
                width: 400px;
                height: 400px;
                background-color: rgb(228, 189, 116);
                /* 告诉他，我这是弹性盒模型 */
                display: flex;
                margin: 100px auto 0;
                /* flex-direction: column-reverse; */
                /* flex-wrap: wrap; */
                justify-content: space-between;
            }

在这里插入图片描述
5. space-around 间隔相等对齐

            .container{
                width: 400px;
                height: 400px;
                background-color: rgb(228, 189, 116);
                /* 告诉他，我这是弹性盒模型 */
                display: flex;
                margin: 100px auto 0;
                /* flex-direction: column-reverse; */
                /* flex-wrap: wrap; */
                justify-content: space-around;
            }

在这里插入图片描述

align-items 控制子元素在交叉轴上的布局方式

其属性值如下

flex-start
flex-end
center
baseline 是根据子元素中文字的基线来对齐
stretch

align-content即换行后对齐，父级要允许换行

flex-start
flex-end
center
space-between
space-around
stretch
在子元素中加的属性

flex-grow:number;

在子元素中加上，学名为弹性增长因子，根据number，将未填满的空间通过增加宽度来填满。

flex-shrink:number;

在子元素中加上，学名为弹性缩放因子，根据number，将不够的空间用缩小子元素宽度的方法解决

order:number;

在子元素中加上，来控制子元素的先后顺序
当其无父元素时，我们可以通过align-self来单独控制每个元素的布局

顾九七

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
弹性盒模型

弹性盒模型父元素：flex container子元素：flex items.当其有父元素且子元素的排布具有一定顺序时，我们可以将排布属性统一写在父元素中，若无父元素或者子元素排布无顺序时，可将排布属性分开写在子元素中，下面都会介绍。普通盒模型无宽时，子元素会自动将宽变为100%，从上到下依次排列。弹性盒模型无高时，子元素会自动将高变为100%，从左到右依次排列。现在先介绍一下父元素...
复制链接

扫一扫