CSS-伸缩布局-天翼云

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .one {
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            overflow: hidden;
        }

        .one > li {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 20px;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        .two {
            border: 1px solid #000;
            margin: 0 auto;
            list-style: none;
            display: flex;
        }

        .two > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 20px;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }
    </style>
</head>
<body>
<ul class="one">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ul class="two">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

主轴方向

在伸缩布局中, 默认伸缩项是从左至右的排版的，主轴的排版的方向默认就是 row, 默认就是从左至右，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-主轴方向</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            flex-direction: row;
        }

        ul > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
            margin: 20px;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

修改主轴的排版方向为从右至左

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-主轴方向</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            flex-direction: row-reverse;
        }

        ul > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
            margin: 20px;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

告诉系统把主轴的方向改为垂直方向

注意点

默认情况下主轴是水平方向的，但是也可以修改为垂直方向
只要看到flex-direction: column /column-reverse 就代表主轴被修改为了垂直方向
如果将主轴修改为了垂直方向，那么侧轴就会自动从垂直方向转换为水平方向

修改主轴的排版方向为从上至下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-主轴方向</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            flex-direction: column;
        }

        ul > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
            margin: 20px;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

修改主轴的排版方向为从下至上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-主轴方向</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            flex-direction: column-reverse;
        }

        ul > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
            margin: 20px;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

主轴对齐方式

属性名	作用
justify-content	用于设置伸缩项主轴上的对齐方式

如果设置为 flex-start, 代表告诉系统伸缩项和主轴的起点对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-主轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            justify-content: flex-start;
        }

        ul > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

如果设置为 flex-end, 代表告诉系统伸缩项和主轴的终点对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-主轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            justify-content: flex-end;
        }

        ul > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-主轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            justify-content: center;
        }

        ul > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

两端对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-主轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            justify-content: space-between;
        }

        ul > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

环绕对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-主轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            justify-content: space-around;
        }

        ul > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

侧轴对齐方式

属性名	作用
align-items	修改侧轴的对齐方式

默认情况下是以侧轴的起点对齐，align-items 属性的取值也就是 flex-start

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-侧轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            align-items: flex-start;
        }

        ul > li {
            width: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>j</li>
    <li>y</li>
    <li>z</li>
</ul>
</body>
</html>

align-items 属性的取值是 flex-end 的话也就是相反呗，也就是以侧轴的终点对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-侧轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            align-items: flex-end;
        }

        ul > li {
            width: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>j</li>
    <li>y</li>
    <li>z</li>
</ul>
</body>
</html>

居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-侧轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            align-items: center;
        }

        ul > li {
            width: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>j</li>
    <li>y</li>
    <li>z</li>
</ul>
</body>
</html>

注意点

和主轴不同的是, 侧轴没有 两端对齐 和 环绕对齐

基线对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-侧轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            align-items: baseline;
        }

        ul > li {
            width: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>j</li>
    <li>y</li>
    <li>z</li>
</ul>
</body>
</html>

拉伸对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-侧轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            align-items: stretch;
        }

        ul > li {
            width: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>j</li>
    <li>y</li>
    <li>z</li>
</ul>
</body>
</html>

侧轴对齐方式 Two

如果在伸缩容器中通过align-items 修改侧轴的对齐方式, 是修改所有伸缩项侧轴的对齐方式

如果是在伸缩项中通过align-self 修改侧轴的对齐方式, 是单独修改当前伸缩项侧轴的对齐方式

align-self 属性的取值和align-items 一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-侧轴对齐方式2</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
        }

        ul > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(1) {
            align-self: flex-start;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
            align-self: center;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
            align-self: flex-end;
        }

        ul > li:nth-child(4) {
            background-color: green;
            align-self: stretch;
        }

        ul > li:nth-child(5) {
            background-color: indianred;
            align-self: baseline;
        }
    </style>
</head>
<body>
<ul>
    <li>j</li>
    <li>y</li>
    <li>z</li>
    <li>s</li>
    <li>b</li>
</ul>
</body>
</html>

主轴侧轴方向问题

默认情况下主轴是水平方向, 侧轴是垂直方向

默认情况下主轴的起点在伸缩容器的最左边, 主轴的终点在伸缩容器的最右边

默认情况下侧轴的起点在伸缩容器的最顶部, 侧轴的终点在伸缩容器的最底部

我们可以通过flex-direction 属性修改主轴的方向

如果flex-direction 属性的取值是column /column-reverse 就代表将主轴的方向修改为了垂直方向, 那么侧轴就会立刻变为水平方向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-主轴侧轴方向问题</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            justify-content: space-around;
            flex-direction: column;
            align-items: center;
        }

        ul > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(1) {

        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>j</li>
    <li>y</li>
    <li>z</li>
</ul>
</body>
</html>

换行问题

在伸缩布局中, 如果伸缩容器的宽度不够, 系统会自动压缩伸缩项的宽度, 保证所有的伸缩项都能放在伸缩容器中

如果当伸缩容器宽度不够时, 不想让伸缩项被压缩, 也可以让系统进行换行flex-wrap: wrap;

默认情况下如果伸缩容器的高度比换行之后所有伸缩项的高度还要高, 那么系统会自动将剩余空间平分之后添加给每一行

宽度不够也不换行, 默认取值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-换行问题</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 400px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            flex-wrap: nowrap;
        }

        ul > li {
            width: 200px;
            height: 200px;
            background-color: pink;
            text-align: center;
            line-height: 200px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

宽度不够换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-换行问题</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 400px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            flex-wrap: wrap;
        }

        ul > li {
            width: 200px;
            height: 200px;
            background-color: pink;
            text-align: center;
            line-height: 200px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

规定灵活的伸缩项在必要的时候拆行或拆列，但是会以相反的顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-换行问题</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 400px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            flex-wrap: wrap-reverse;
        }

        ul > li {
            width: 200px;
            height: 200px;
            background-color: pink;
            text-align: center;
            line-height: 200px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

换行对齐方式

如果伸缩容器中的伸缩项换行了, 那么我们就可以通过 align-content 来设置行与行之间的对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-换行对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 400px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            /*
            以起点对齐
            align-content: flex-start;
            以结束点对齐
            align-content: flex-end;
            以居中对齐
            align-content: center;
            以基线对齐
            align-content: space-between;
            以拉伸对齐
            align-content: space-around;
            */
        }

        ul > li {
            width: 200px;
            height: 200px;
            background-color: pink;
            text-align: center;
            line-height: 200px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

默认情况下换行就是拉伸对齐, 一定要注意, 在换行中的拉伸对齐是指, 所有行的高度总和要和伸缩容器的高度一样，所以会将多余的空间平分之后添加给每一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-换行对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 400px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            /*
            默认值。元素被拉伸以适应容器。
            各行将会伸展以占用剩余的空间。
            如果剩余的空间是负数，该值等效于 'flex-start'。
            在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。
            */
            align-content: stretch;
        }

        ul > li {
            width: 200px;
            height: 200px;
            background-color: pink;
            text-align: center;
            line-height: 200px;
            font-size: 35px;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

伸缩项排序

如果想调整伸缩布局中伸缩项的顺序, 那么我们可以通过修改伸缩项的order 属性来实现

默认情况下 order 的取值是 0

如果我们设置了 order 属性的值, 那么系统就会按照设置的值从小到大的排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-伸缩项排序</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
        }

        ul > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(1) {
            order: -1;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
            order: 2;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
            order: 1;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

伸缩项放大比例

属性名	作用
flex-grow	当所有伸缩项宽度的总和没有伸缩容器宽度大的时, 我们可以通过 flex-grow 让系统调整伸缩项的宽度, 以便于让所有伸缩项的宽度的总和等于伸缩容器的宽度

flex-grow 计算公式

计算剩余的空间：伸缩容器宽度 - 所有伸缩项的宽度，400 - 300 = 100

计算每份剩余空间的宽度：剩余空间 / 需要的份数，100 / 6 = 16.66

计算每个伸缩项最终的宽度：伸缩项的宽度 + 需要的份数 * 每份的宽度

注意点

flex-grow 的默认值是 0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-伸缩项放大比例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
        }

        ul > li {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
        }

        ul > li:nth-child(1) {
            flex-grow: 1;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
            flex-grow: 2;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
            flex-grow: 3;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

伸缩项缩小比例

属性名	作用
flex-shrink	当所有伸缩项宽度的总和比伸缩容器宽度大的时, 我们可以通过 flex-shrink 让系统调整伸缩项的宽度, 以便于让所有伸缩项的宽度的总和等于伸缩容器的宽度

flex-shrink 计算公式

计算每个伸缩项需要压缩的宽度：计算溢出的宽度，伸缩容器的宽度 - 所有伸缩项的宽度总和，400 - 600 = -200

计算总权重：每个伸缩项需要的份数 * 每个伸缩项的宽度，1 * 200 + 2 * 200 + 3 * 200 = 1200

计算每个伸缩项需要压缩的宽度, 溢出的宽度 * 需要的份数 * 每个伸缩项的宽度 / 总权重，-200 * 1 * 200 / 1200 = -33.33

注意点

flex-shrink 的默认值是 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-伸缩项缩小比例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
        }

        ul > li {
            width: 200px;
            height: 200px;
            background-color: pink;
            text-align: center;
            line-height: 200px;
            font-size: 35px;
        }

        ul > li:nth-child(1) {
            flex-shrink: 1;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
            flex-shrink: 2;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
            flex-shrink: 3;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

伸缩项放大缩小比例

如果有伸缩项没有设置flex-grow, 那么系统会保持原有的宽度

而会将多余的宽度等分之后, 按照每个伸缩项需要的份数添加给它们

如果想让某个伸缩项不缩小, 那么需要将它的flex-shrink 设置为0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-伸缩项放大缩小比例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
        }

        ul > li {
            width: 200px;
            height: 200px;
            background-color: pink;
            text-align: center;
            line-height: 200px;
            font-size: 35px;
        }

        ul > li:nth-child(1) {
            flex-shrink: 0;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
            flex-grow: 1;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
            flex-grow: 4;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

伸缩项宽度

如果是伸缩布局, 除了可以通过元素的 width 属性来设置宽度以外, 还可以通过 flex-basis 属性来设置伸缩项的宽度

注意点

width 属性可以设置宽度 / flex-basis 也可以设置宽度

那么如果两者同时存在, 系统会听 flex-basis 的

flex-basis 属性是专门提供给伸缩布局使用的

如果同时通过这两个属性设置了宽度, 但是其中一个是 auto, 那么系统会按照具体值来设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-伸缩项宽度</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 800px;
            height: 400px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
        }

        ul > li {
            height: 200px;
            background-color: pink;
            text-align: center;
            line-height: 200px;
            font-size: 35px;
        }

        ul > li:nth-child(1) {
            flex-basis: 100px;
            width: auto;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
            flex-basis: 200px;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
            flex-basis: 300px;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

伸缩项属性简写

flex: flex-grow flex-shrink flex-basis;

默认值：flex: 0 1 auto;

注意点

在连写格式中, flex-shrink、flex-basis 是可以省略的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局-伸缩项属性简写</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 800px;
            height: 400px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
        }

        ul > li {
            width: 200px;
            height: 200px;
            background-color: pink;
            text-align: center;
            line-height: 200px;
            font-size: 35px;
        }

        ul > li:nth-child(1) {
            flex: 1;
        }

        ul > li:nth-child(2) {
            background-color: skyblue;
            flex: 2;
        }

        ul > li:nth-child(3) {
            background-color: yellow;
            flex: 3;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

活动

应用商城

合作伙伴

开发者

支持与服务

了解天翼云

CSS-伸缩布局

CSS-伸缩布局

主轴方向

主轴对齐方式

侧轴对齐方式

居中对齐

基线对齐

拉伸对齐

侧轴对齐方式 Two

主轴侧轴方向问题

换行问题

换行对齐方式

伸缩项排序

伸缩项放大比例

flex-grow 计算公式

伸缩项缩小比例

flex-shrink 计算公式

伸缩项放大缩小比例

伸缩项宽度

伸缩项属性简写

相关文章

快速上手Apache

关于 SAP UI5 里包含的 jQuery 版本

prometheus 配置

JavaScript-属性方法分类

JavaScript表单验证示例

Python编程：loguru管理日志输出

JDK 14的新特性:文本块Text Blocks

vue课程71 deep选项

js：获取鼠标点击位置，弹出提示框

Python编程：trio模块异步/等待本地I/O库

作者介绍

最新文章

快速上手Apache

关于 SAP UI5 里包含的 jQuery 版本

prometheus 配置

JavaScript-属性方法分类

JavaScript表单验证示例

JDK 14的新特性:文本块Text Blocks

热门文章

html+css实战183-购物车

Python：使用2to3将Python2转Python3

TypeScript-webpack配置

html：canvas画布绘图简单入门

js中通过正则表达式验证邮箱是否合法

HTML入门与进阶以及HTML5

热门标签

相关产品

弹性云主机

天翼云电脑（公众版）

对象存储

云硬盘

随机文章

Java字符串分割

Scala 模式匹配拓展

解决ie img标签内存泄漏

Vue初体验

正则表达式 (?<= 与 (?= 的区别

数据结构148-二叉搜索树-寻找删除节点代码