css弹性盒子相关知识点（部分主要内容）

最新推荐文章于 2024-04-22 03:18:21 发布

LINGK98

最新推荐文章于 2024-04-22 03:18:21 发布

阅读量807

点赞数

分类专栏：前端文章标签： css3

本文链接：https://blog.youkuaiyun.com/LINGK98/article/details/104780187

版权

前端专栏收录该内容

16 篇文章

订阅专栏

CSS的弹性盒子部分主要的内容总结：

弹性盒子

由弹性容器(通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器) 和弹性子元素组成。

弹性容器属性类别

flex-direction定义弹性子元素在父容器中的位置 ( 此处用反转属性 )

flex-direction定义弹性子元素在父容器中的位置 ( 此处用列属性 )

justify-content定义在弹性容器上，把弹性项沿着弹性容器的主轴线对齐。

属性值: flex-start | flex-end | center | space-between | space-around

此处用"center"

align-items设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

属性值: flex-start | flex-end | center | baseline | stretch

此处用“flex-start”,注：当个数超过弹性盒子宽度时，会自动调节宽度，子元素的宽度

flex-wrap 用于指定弹性盒子的子元素换行方式。

属性值：nowrap|wrap|wrap-reverse|initial|inherit;

此处用“wrap”

align-content 用于修改 flex-wrap 属性的行为。类似于 align-items, 但它是设置各个行的对齐。

此处用“space-between”

弹性子元素类别

order能够对子元素块进行排序（原来顺序A-B-C）

margin: auto 可以使得弹性子元素在两上轴方向上完全居中

flex 属性用于指定弹性子元素按比例分配空间。

以上的相关代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .contain{
            width: 500px;
            height: 100px;
            border: 1px solid black;
            display: flex;
        }
        .item{
            width: 50px;
            height: 50px;
            background: tan;
            margin: 10px;
        }
        .contain2{
            width: 500px;
            height: 100px;
            border: 1px solid black;
            display: flex;
            flex-direction:row-reverse;
        }
        .item2{
            width: 50px;
            height: 50px;
            background: tan;
            margin: 10px;
        }
        .contain3{
            width: 200px;
            height: 300px;
            border: 1px solid black;
            display: flex;
            flex-direction:column;
        }
        .item3{
            width: 50px;
            height: 50px;
            background: tan;
            margin-top: 20px;
        }
        .contain4{
            width: 400px;
            height: 200px;
            border: 1px solid black;
            display: flex;
            justify-content: center;
        }
        .item4{
            width: 50px;
            height: 50px;
            background: tan;
            margin: 10px;
        }
        .contain5{
            width: 400px;
            height: 200px;
            border: 1px solid black;
            display: flex;
            align-items: flex-start;
        }
        .item5{
            width: 50px;
            height: 80px;
            background: tan;
            margin: 10px;
        }
        .contain6{
            width: 400px;
            height: 200px;
            border: 1px solid black;
            display: flex;
            flex-wrap:wrap ;
        }
        .item6{
            width: 50px;
            height: 80px;
            background: tan;
            margin: 10px;
        }
        .contain7{
            width: 400px;
            height: 200px;
            border: 1px solid black;
            display: flex;
            align-content: space-between;
        }
        .item7{
            width: 50px;
            height: 80px;
            background: tan;
            margin: 10px;
        }
        .contain8{
            width: 400px;
            height: 200px;
            border: 1px solid black;
            display: flex;
        }
        .item8{
            width: 50px;
            height: 80px;
            background: tan;
            margin: 10px;
        }
        .item8:first-child{
            order: 3;
        }
        .item8:nth-child(2){
            order: 1;
        }
        .item8:last-child{
            order: 2;
        }
        .contain9{
            width: 400px;
            height: 200px;
            border: 1px solid black;
            display: flex;
        }
        .item9{
            width: 50px;
            height: 50px;
            background: tan;
            margin: 10px;
            margin: auto;
        }
        .contain10{
            width: 400px;
            height: 200px;
            border: 1px solid black;
            display: flex;
        }
        .item10{
            width: 50px;
            height: 50px;
            text-align: center;
        }
        .item10:first-child{flex: 3;background: tan;}
        .item10:nth-child(2){flex: 2;background: rgb(210, 140, 168);}
        .item10:last-child{flex: 1;background: rgb(95, 128, 237);}
    </style>
</head>
<body>
    <h1>弹性盒子</h1>
    <p>由弹性容器(通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器)
        和弹性子元素组成。</p>
    <h3>弹性容器属性类别</h3>
    <p>从左到右</p>
    <div class="contain">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
        <div class="item">D</div>
    </div>
    <p>flex-direction定义弹性子元素在父容器中的位置 <u> ( 此处用反转属性 )</u></p>
    <div class="contain2">
        <div class="item2">A</div>
        <div class="item2">B</div>
        <div class="item2">C</div>
        <div class="item2">D</div>
    </div>
    <p>flex-direction定义弹性子元素在父容器中的位置 <u> ( 此处用列属性 )</u></p>
    <div class="contain3">
        <div class="item3">A</div>
        <div class="item3">B</div>
        <div class="item3">C</div>
        <div class="item3">D</div>
    </div>
    <p>justify-content定义在弹性容器上，把弹性项沿着弹性容器的主轴线对齐。</p>
    <p>属性值: flex-start | flex-end | center | space-between | space-around</p>
    <p>此处用"center"</p>
    <div class="contain4">
        <div class="item4">A</div>
        <div class="item4">B</div>
        <div class="item4">C</div>
        <div class="item4">D</div>
    </div>
    <p>align-items设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。</p>
    <p>属性值: flex-start | flex-end | center | baseline | stretch</p>
    <p>此处用“flex-start”,注：当个数超过弹性盒子宽度时，会自动调节宽度，子元素的宽度</p>
    <div class="contain5">
        <div class="item5">A</div>
        <div class="item5">B</div>
        <div class="item5">C</div>
        <div class="item5">D</div>
        <div class="item5">E</div>
        <div class="item5">F</div>
        <div class="item5">G</div>
    </div>
    <p>flex-wrap 用于指定弹性盒子的子元素换行方式。</p>
    <p>属性值：nowrap|wrap|wrap-reverse|initial|inherit;</p>
    <p>此处用“wrap”</p>
    <div class="contain6">
        <div class="item6">A</div>
        <div class="item6">B</div>
        <div class="item6">C</div>
        <div class="item6">D</div>
        <div class="item6">E</div>
        <div class="item6">F</div>
        <div class="item6">G</div>
    </div>
    <p>align-content 用于修改 flex-wrap 属性的行为。类似于 align-items,
        但它是设置各个行的对齐。</p>
    <p>属性值：flex-start | flex-end | center | space-between | space-around | stretch</p>
    <p>此处用“space-between”</p>
    <div class="contain7">
        <div class="item7">A</div>
        <div class="item7">B</div>
        <div class="item7">C</div>
        <div class="item7">D</div>
        <div class="item7">E</div>
        <div class="item7">F</div>
        <div class="item7">G</div>
    </div>

    <h3>弹性子元素类别</h3>
    <p>order能够对子元素块进行排序（原来顺序A-B-C）</p>
    <div class="contain8">
        <div class="item8">A</div>
        <div class="item8">B</div>
        <div class="item8">C</div>
    </div>
    <p>margin: auto 可以使得弹性子元素在两上轴方向上完全居中</p>
    <div class="contain9">
        <div class="item9">居中了</div>
    </div>
    <p>flex 属性用于指定弹性子元素按比例分配空间。</p>
    <div class="contain10">
        <div class="item10">3</div>
        <div class="item10">2</div>
        <div class="item10">1</div>
    </div>
</body>
</html>