css3弹性盒子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            display: -webkit-flex;
            display: flex;
            /* justify-content: flex-end;右对齐 */
            /* justify-content: flex-start;左对齐 */
            /* justify-content: center;居中对齐 */
            /* justify-content: space-between; 每两个项目之间距离相等 */
            /* justify-content: space-around;每一个项目的两侧距离相等 */
            /* justify-content: space-evenly;每两个项目之间的距离与边沿项目距离容器的距离相等 */
            /* align-items: stretch;交叉轴的对齐方式 默认值 当项目未设置高度或高度为auto时, 会占满父容器*/
            /* align-items: flex-start;顶部对齐 */
            /* align-items: flex-end;居下对齐 */
            /* align-items: center;y轴中点对齐 */
            /* align-items: baseline;第一个文字基线对齐 */
            width: 500px;
            height: 500px;
            background-color: #cccccc;
            /* flex-wrap: wrap; */
            /* wrap项目换行第一行在上方
        wrap-reverse换行第一行在下方
         */
            /* flex-direction: row; */
            /* row(默认值):水平方向,起点在左端。
        row-reverse:水平方向,起点在右端。
        column:垂直方向,起点在上沿。
        column-reverse:垂直方向,起点在下沿 */
            /*  Flex 布局后,子元素的float、clear和vertical-align属性失效 */
        }

        .box .item {
            width: 100px;
            height: 100px;
        }

        .box .item:nth-of-type(1) {
            background-color: antiquewhite;

        }

        .box .item:nth-of-type(2) {
            background-color: red;

        }

        .box .item:nth-of-type(3) {
            background-color: blue;

        }

        .box1 {
            width: 440px;
            height: 310px;
            background-color: aqua;
            display: flex;
            flex-wrap: wrap;
            /*
        justify-content: space-around; */
            justify-content: space-evenly;
            align-content: space-evenly;
            /* stretch(默认值)多根轴线对齐方式 会占满父元素
        flex-start:交叉轴的起点对齐
        flex-end:交叉轴的终点对齐
        center:与交叉轴的中点对齐
        space-between:每两行之间的距离相等
        space-around:每一行两侧的距离相等*/
        }

        .box1 div {
            width: 100px;
            height: 150px;
            background-color: red;
            margin: 0 2px;
        }

        .box div:nth-child(1) {
            order: 1;
        }

        .box div:nth-child(2) {
            order: 2;
        }

        .box div:nth-child(3) {
            order: 3;
        }

        /*
     order: 3;
    项目排列顺序
    数值越小,排列越靠前,默认为0
    加在项目上*/

        /* align-self
    属性允许单个项目有与其他项目不一样的对齐方式

    auto 默认值继承父元素align-items属性。
    flex-start  交叉轴的起点对齐。
    flex-end   交叉轴的终点对齐。
    center   交叉轴的中点对齐。
    baseline   项目的第一-行文字的基线对齐。
    stretch   如果项目未设置高度或设为auto,将占满整个容器的高度。
     */
        .box2 {
            display: -webkit-flex;
            display: flex;
            width: 500px;
            height: 500px;
            background-color: #cccccc;
        }

        .box2 .item {
            width: 100px;
            height: 100px;
            flex-grow: 1;
        }

        /* flex-grow
        项目的放大比例,即使剩余空间,也不放大。(默认0)
        剩余空间比例
        flex-grow都为1,它们将等分剩余空间。
        如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
        如果只有一个项目有flex-grow,其它没有任何,它将占据所有剩余空间

        flex-shrink: ;项目缩小(默认 1)不缩小0

        flex-basis:定义弹性盒子元素的默认基准值,定义了在分配多余空间之前,项目占据的主轴空间
        
        flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
        auto (1 1 auto) 和 none (0 0 auto)。
        flex:none;  父容器空间有剩余,不放大,空间不足,不缩小flex:0 0 auto
        flex:auto;  父容器空间有剩余,等比例放大,空间不足,等比例缩小flex:1 1 auto
        */
        .box2 .item:nth-of-type(1) {
            background-color: antiquewhite;
        }

        .box2 .item:nth-of-type(2) {
            background-color: red;
            /* flex-grow: 1; */

        }

        .box2 .item:nth-of-type(3) {
            background-color: blue;

        }

        .box3 {
            width: 100%;
            background-color: #cccccc;
            display: flex;

        }

        .left {
            width: 500px;
            height: 500px;
            background-color: red;

        }

        .right {
            flex: 1;
        }
    </style>
</head>

<body>
    <!-- 弹性盒子:一种新的布局模式 -->
    <div class="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    <div class="box1">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box2">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    <div class="box3">
        <div class="left"></div>
        <div class="right">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni et voluptas aliquid. Nobis, modi
            repellendus? Est esse eius mollitia ratione, dolorem, repellendus sapiente hic eligendi eaque laudantium
            temporibus maiores corporis.
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni et voluptas aliquid. Nobis, modi
            repellendus? Est esse eius mollitia ratione, dolorem, repellendus sapiente hic eligendi eaque laudantium
            temporibus maiores corporis.
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni et voluptas aliquid. Nobis, modi
            repellendus? Est esse eius mollitia ratione, dolorem, repellendus sapiente hic eligendi eaque laudantium
            temporibus maiores corporis.
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni et voluptas aliquid. Nobis, modi
            repellendus? Est esse eius mollitia ratione, dolorem, repellendus sapiente hic eligendi eaque laudantium
            temporibus maiores corporis.
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni et voluptas aliquid. Nobis, modi
            repellendus? Est esse eius mollitia ratione, dolorem, repellendus sapiente hic eligendi eaque laudantium
            temporibus maiores corporis.
        </div>
    </div>
</body>

</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值