当前位置：首页 > article >正文

CSS3_伸缩盒模型（十）

article 2024/11/19 8:11:41

伸缩盒模型

1 简介

Flexible-Box（伸缩盒模型，又称为弹性盒子）；
可控制：元素分布方式、元素对齐方式、元素视觉顺序等；
除了部分IE浏览器不支持，其他浏览器全部支持；
伸缩盒模型逐渐演变出了新的布局方式-Flex布局。

2 伸缩项目与伸缩容器

伸缩容器：开启了flex的元素；
给元素设置display: flex或者display: inline-flex，该容器就变为了伸缩容器；
display: inline-flex很少使用，可以给多个伸缩容器的父元素设置为伸缩容器实现效果；
一个元素可以同时为伸缩元素和伸缩项目。

伸缩项目：伸缩容器的所有子元素被称为伸缩项目；
只有伸缩容器的子元素是伸缩项目，该伸缩容器的后代元素不是伸缩容器；
无论原来是哪种元素，一旦成为伸缩项目，就会全部块状化。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>伸缩项目</title>
    <style>
        .outer {
            width: 800px;
            height: 500px;
            background-color: aqua;
            display: flex;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
        }

        .inner3 {
            display: flex;
        }

        .inner3 {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner inner1"></div>
        <div class="inner inner2"></div>
        <div class="inner inner3">
            <div>a</div>
            <div>b</div>
            <div>c</div>
        </div>
    </div>
</body>

</html>

3 主轴与侧轴

伸缩项目的主轴默认是从左到右排列的，侧轴默认是从上到下排列的，可以通过flex-derection属性改变主轴和侧轴的方向。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>主轴与侧轴</title>
    <style>
        .outer {
            width: 800px;
            height: 500px;
            background-color: aqua;
            display: flex;
            margin: 0 auto;

            /* 主轴默认值 */
            /* flex-direction: row; */

            /* 主轴反向 */
            /* flex-direction: row-reverse; */

            /* 侧轴默认值 */
            /* flex-direction: column; */

            /* 侧轴反方向 */
            flex-direction: column-reverse;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
    </div>
</body>

</html>

4 主轴换行

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>主轴换行方式</title>
    <style>
        .outer {
            width: 800px;
            height: 600px;
            background-color: green;
            display: flex;
            margin: 0 auto;

            /* 不换行，默认 */
            /* flex-wrap: nowrap; */

            /* 自动换行 */
            /* flex-wrap: wrap; */

            /* 反向换行 */
            flex-wrap: wrap-reverse;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
        <div class="inner">4</div>
        <div class="inner">5</div>
        <div class="inner">6</div>
    </div>
</body>

</html>

flex-flow复合了flex-direction和flex-wrap属性，没有顺序要求。

5 主轴对齐方式

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>主轴换行方式</title>
    <style>
        .outer {
            width: 800px;
            height: 600px;
            background-color: green;
            display: flex;
            margin: 0 auto;

            flex-wrap: wrap;

            /* 对齐在主轴的开始位置 */
            /* justify-content: start; */

            /* 对齐在主轴的结束位置 */
            /* justify-content: end; */

            /* 对齐在主轴的中间位置 */
            /* justify-content: center; */

            /* 均匀的分布在一行，项目之间的距离是项目与边缘的二倍 */
            /* justify-content: space-around; */

            /* 均匀的分布在一行，项目之间的距离均匀分布，项目与边缘的距离为零 */
            /* justify-content: space-between */

            /* 均匀的分布在一行 */
            justify-content: space-evenly;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
    </div>
</body>

</html>

6 侧轴对齐方式

6.1 一行

start：侧轴起点对齐；
end：侧轴终点对齐；
center：侧轴居中对齐；
baseline：侧轴第一行文字基线对齐；
stretch：若伸缩项目没有高度，则拉伸占满整个容器，否则项目高度不变。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>侧轴对齐方式（一行）</title>
    <style>
        .outer {
            width: 800px;
            height: 600px;
            background-color: rgb(63, 211, 206);
            display: flex;
            margin: 0 auto;

            flex-wrap: wrap;
            flex-direction: row;
            justify-content: flex-start;

            /* 居中对齐 */
            align-items: center;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;
        }

        .inner2 {
            height: 300px;
        }

        .inner3 {
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
    </div>
</body>

</html>

6.2 多行

使用align-content调整，只比主轴多一个stretch属性值，与侧轴为一行元素时一致。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>侧轴对齐方式（多行）</title>
    <style>
        .outer {
            width: 800px;
            height: 700px;
            background-color: rgb(63, 211, 206);
            display: flex;
            margin: 0 auto;

            flex-wrap: wrap;
            flex-direction: row;
            justify-content: flex-start;

            /* 拉伸对齐 */
            align-content: stretch;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;
        }

        .inner2 {
            height: 300px;
        }

        .inner3 {
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner1">1</div>
        <div class="inner inner3">3</div>
    </div>
</body>

</html>

7 flex-basis

设置主轴方向的基准长度，会让宽度或者高度失效。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>项目在主轴的基准长度</title>
    <style>
        .outer {
            width: 800px;
            height: 600px;
            background-color: rgb(63, 211, 206);
            display: flex;
            margin: 0 auto;

            flex-wrap: wrap;
            flex-direction: column;
            justify-content: flex-start;
            align-items: start;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;
        }

        .inner2 {
            flex-basis: 100px;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
    </div>
</body>

</html>

8 flex-grow

定义伸缩项目的放大比例，默认为0；

分子为该项目的flex-grow值，分母为所有项目flex-grow之和。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>伸缩项目-伸</title>
    <style>
        .outer {
            width: 800px;
            height: 600px;
            background-color: rgb(63, 211, 206);
            display: flex;
            margin: 0 auto;

            flex-wrap: wrap;
            flex-direction: row;
            justify-content: flex-start;
            align-items: start;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;
        }

        .inner1 {
            flex-grow: 1;
        }

        .inner2 {
            flex-grow: 2;
            width: 300px;
        }

        .inner3 {
            flex-grow: 3;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
    </div>
</body>

</html>

9 flex-shrink

flex-shrink定义了项目的压缩比例，默认为1；

分母为每个项目的乘以规定的flex-shrink值再相加作为；

分子为每个项目乘以规定的flex-shrink值。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>伸缩项目-伸</title>
    <style>
        .outer {
            width: 800px;
            height: 600px;
            background-color: rgb(63, 211, 206);
            display: flex;
            margin: 0 auto;

            flex-wrap: wrap;
            flex-direction: row;
            justify-content: flex-start;
            align-items: start;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;
        }

        .inner1 {
            flex-shrink: 1;
        }

        .inner2 {
            flex-shrink: 2;
            width: 300px;
        }

        .inner3 {
            flex-shrink: 3;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
    </div>
</body>

</html>

flex复合了flex-grow、flex-shrink、flex-basis三个属性，按以上顺序进行书写。

10 项目的排序与单独对齐

order定义项目排列顺序，数值越小，排列越靠前，默认为0；align-self可以单独调整磨个伸缩项目的对齐方式。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>项目的排序与单独对齐</title>
    <style>
        .outer {
            width: 800px;
            height: 600px;
            background-color: rgb(63, 211, 206);
            display: flex;
            margin: 0 auto;

            flex-wrap: wrap;
            flex-direction: row;
            justify-content: flex-start;
            align-items: start;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;

            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 0;


        }

        .inner1 {
            order: 2;
        }

        .inner2 {
            width: 300px;
            order: 1;

            /* 侧轴中间 */
            align-self: center;
        }

        .inner3 {
            order: 0;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
    </div>
</body>

</html>