CSS3新特性，弹性盒子模型

echofly0722

已于 2024-03-29 17:18:48 修改

阅读量528

点赞数 19

文章标签： css3 前端 css

于 2024-03-29 16:47:34 首次发布

本文链接：https://blog.csdn.net/flyffffly/article/details/137148922

版权

定义

弹性盒子是 CSS3 的一种新的布局模式

CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间

内容

·弹性盒子由弹性容器和弹性子元素组成

·它在css中的定义方式为：

display : flex

·弹性容器内包括一个或多个弹性子容器

特点和属性设置

将一个容器设置成弹性容器后，子元素将默认水平摆放

代码示例：

<style>
    .box{
        width: 500px;
        height: 500px;
        background-color: aqua;
        display: flex;
    }
    .box1{
        width: 100px;
        height: 100px;
        background-color: green;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .box3{
        width: 100px;
        height: 100px;
        background-color: black;
    }
</style>
<body>
    <div class="box">
        <div class="box1">

        </div>
        <div class="box2">

        </div>
        <div class="box3">

        </div>
    </div>
</body>

结果：

可以看到三个块级元素此时是水平摆放的，那么这是设置弹性盒子之后的默认情况。

当然也可以设置其他的排列方式：

父元素属性

通过设置flex-direction属性的属性值

属性值	描述
row	横向从左到右排列(左对齐)，默认的排列方式
row-reverse	反转横向排列(右对齐，从后往前排，最后一项排在最前面
column	纵向排列
column-reverse	反转纵向排列，从后往前排，最后一项排在最上面

flex-direction属性是设置子元素之间的排列方式，当然也就有设置子元素整体排列方式的属性

justify-content属性：设置或检索弹性盒子元素在横轴方向上的对齐方式

属性值	描述
flex-strat	弹性项目向行头紧挨着填充,第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放,默认值。
flex-end	弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放
center	弹性项目居中紧挨着填充。(如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出，也就是按比例分配)

align-items属性：设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式

属性值	描述
flex-strat	弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界，默认值
flex-end	弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界
center	弹性盒子元素在该行的侧轴(纵轴)上居中放置。((如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度，也就是按比例分配)

子元素属性

flex属性，可为子元素设置权重或者比例值。

代码示例：

<style>
    .box{
        width: 500px;
        height: 500px;
        background-color: aqua;
        display: flex;
        /*flex-direction: column-reverse;*/
        /*justify-content: center;*/
        align-items: center;
    }
    .box1{
        width: 100px;
        height: 100px;
        background-color: green;
        flex: 1;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: red;
        flex: 1;
    }
    .box3{
        width: 100px;
        height: 100px;
        background-color: black;
        flex: 2;
    }
</style>
<body>
    <div class="box">
        <div class="box1">

        </div>
        <div class="box2">

        </div>
        <div class="box3">

        </div>
    </div>
</body>

可以看到我为三个子元素分别设置了flex等于1 1 2的值，也就是他们的比例。

此时结果为：