弹性盒模型

NehzUs

已于 2022-05-08 11:11:22 修改

阅读量157

点赞数

文章标签： css

于 2022-04-27 20:44:20 首次发布

本文链接：https://blog.csdn.net/m0_62903673/article/details/124460042

版权

使用弹性盒模型的目的：提供一种更加有效的方式来布置、对齐和分布在容器之间的各项内容。

他的布局方式与方向无关。

属性：1. display:flex，适用于父类元素，这是声明一下要使用弹性盒模型。

<style>
        .wai{
            width: 100px;
            height: 50px;
            background-color: pink;
        }
        .wai .nei{
            width: 30px;
            height: 50px;
            background-color: green;
        }
    </style>

<body>
    <div class="wai">
        <div class="nei"></div>
        <div class="nei"></div>
        <div class="nei"></div>
        <div class="nei"></div>
    </div>
</body>

呈现结果

在父级加上display：flex；

.wai{
            width: 100px;
            height: 50px;
            background-color: pink;
            display: flex;
        }

呈现结果

这时每个小块就变成了具有弹性的盒子，改变自己的宽度适应父级。

2. flex-direction，写在父级css中，但是作用于子级，作用，检索，子级在盒子中的位置。

在父级写下 flex-direction: column;

.wai{
            width: 100px;
            height: 50px;
            background-color: pink;
            display: flex;
            flex-direction: column; 
        }

使用后就会看见子级块在父级中的样子，如下。

3. flex-wrap，写在父级，作用于子级。作用，检索，子级是否超出父级。

如果超出父级，超出部分即换行。

在父级写下flex-wrap: wrap;即可换行

代码实现

.wai{
            width: 100px;
            height: 50px;
            background-color: pink;
            display: flex;
            flex-wrap: wrap;
        }

呈现结果

4. flex-flow，复合属性，写在父级，作用于子级，作用，就是写排列方式，再写是否换行。

5. justify-content，写在父级，作用于子级，作用，检索弹性盒子在主轴（x轴）方向上的对齐方式。属性值有 space-between和space-around；

space-between：

代码实现

.wai{
            width: 300px;
            height: 50px;
            background-color: pink;
            display: flex;
            justify-content:space-between;
        }

呈现结果

space-around：

呈现结果

6. align-items，写在父级，作用于子级，作用，检索盒子在Y轴上的对齐方式。

属性值有 center flex-start flex-end

代码实现

<style>
.wai{
            width: 50px;
            height: 300px;
            background-color: pink;
            display: flex;
            align-items:flex-end;
        }
</style>

呈现结果

7. align-content，写在父级，作用于子级，作用，检索换行时对齐方式

8. flex-grow，写在子级，分配剩余空间。

NehzUs

关注

0
点赞
踩
0

收藏

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

使用弹性盒模型的目的：提供一种更加有效的方式来布置、对齐和分布在容器之间的各项内容。他的布局方式与方向无关。属性：1. display:flex，适用于父类元素，这是声明一下要使用弹性盒模型。2. flex-direction，写在父级css中，但是作用于子级，作用，检索，子级在盒子中的位置。3. flex-wrap，写在父级，作用于子级。作用，检索，子级是否超出父级。4. flex-flow，复合属性，写在父级，作用于子级，作用，就是写排列方式，再写是否换行。5. justify-
复制链接

扫一扫