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

最新推荐文章于 2023-12-13 17:40:25 发布

原创最新推荐文章于 2023-12-13 17:40:25 发布 · 886 阅读

0 ·

CC 4.0 BY-SA版权

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

22 篇文章

订阅专栏

css

21 篇文章

订阅专栏

本文通过实例展示了Flex布局的应用，包括如何设置容器属性实现不同方向的排列和对齐方式，特别是对flex-line-pack属性进行了详细的解释与演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、理论：
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>