CSS学习（二十二）-flexbox模型之三

最新推荐文章于 2021-12-22 22:52:25 发布

bwshqh

最新推荐文章于 2021-12-22 22:52:25 发布

阅读量852

点赞数

分类专栏： css css学习

本文链接：https://blog.csdn.net/bwshqh/article/details/51020790

版权

css学习同时被 2 个专栏收录

22 篇文章 2 订阅

订阅专栏

css

21 篇文章 0 订阅

订阅专栏

一、理论：
1.flex-line-pack 堆栈伸缩行
a.使用与flex-pack 相同
b.增加stretch start/end/center/justify(平均分布)/distribute（两端保留一半的空间）/stretch（拉伸填充整个容器）
c.flex-line针对个体，flex-line-pack针对群体

二、实践：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="screen">
        *{
            margin: 0;
            padding: 0;
        }
        .flexbox{
            margin: 0.25em 5em;
            border:1px solid hsla(120,30%,50%,.8);
            background-color: hsla(10,80%,10%,.2);
            height: 550px;
        }
        .flexbox:nth-child(2n){
            margin-bottom: 200px;
        }
        .flexbox>div{
            border:1px solid hsla(120,30%,50%.8);
            font:bold 2em arial;
            color:#fff;
            width: 150px;
            padding: .2em;
        }
        .flexbox > div:nth-child(odd){
            background-color: hsla(120,30%,50%.8);
        }
        .flexbox > div:nth-child(even){
            background-color: hsla(120,30%,10%,.8);
        }
        .flexbox > div:last-child{
            background-color: hsla(20,10%,60%,.8);
        }
        .flexbox{
            display: -ms-flexbox;
            -ms-flex-wrap: wrap;
        }
        .flex-direction-coloumn{
            -ms-flex-direction: column;
        }
        .flex-line-pack-start{
            -ms-flex-line-pack:start;
        }
    </style>
</head>
<body>
    <div class="flexbox flex-line-pack-start">
        <div>box1</div>
        <div>box2</div>
        <div>box3</div>
        <div>box4</div>
        <div>box5</div>
        <div>box6</div>
        <div>box7</div>
        <div>box8</div>
        <div>start</div>
    </div>
    <div class="flexbox flex-line-pack-start flex-direction-coloumn">
        <div>box1</div>
        <div>box2</div>
        <div>box3</div>
        <div>box4</div>
        <div>box5</div>
        <div>box6</div>
        <div>box7</div>
        <div>box8</div>
        <div>start</div>
    </div>
</body>
</html>