CSS 的弹性布局(flex) ，是什么？

原创

Learn-anything.cn

发布于 2021-12-10 18:05:24

1.2K0

发布于 2021-12-10 18:05:24

文章被收录于专栏：learn-anything.cnlearn-anything.cn

一、弹性布局是什么？

元素根据窗口大小变化而自动伸长或缩短，使得整个页面格式保持不变。

二、怎么使用？

1、使用方法

/* 1、父元素中增加 display 属性；*/
display: flex;

/* 2、子元素中增加 flex、flex-direction等属性；*/
flex: 1;
flex-direction: column;

2、示例

新建 index.html 文件，复制下面代码到文件，用浏览器打开 index.html，在调整浏览器窗口大小，即可看到article 元素的大小也跟着改变。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Flexbox 0 — starting code</title>
    <style>
        html {
            font-family: sans-serif;
        }

        body {
            margin: 0;
        }

        header {
            background: purple;
            height: 100px;
        }

        h1 {
            text-align: center;
            color: white;
            line-height: 100px;
            margin: 0;
        }

        article {
            padding: 10px;
            margin: 10px;
            background: aqua;
            flex: 3;
        }

        /* Add your flexbox CSS below here */
        section {
            display: flex
        }
    </style>
</head>

<body>
    <header>
        <h1>Sample flexbox example</h1>
    </header>

    <section>
        <article>
            <h2>First article</h2>

            <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday
                carry vinyl typewriter. </p>
        </article>

        <article>
            <h2>Second article</h2>

            <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday
                carry vinyl typewriter. </p>
        </article>

        <article>
            <h2>Third article</h2>

            <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday
                carry vinyl typewriter. </p>

            <p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo
                8-bit.
            </p>
        </article>
    </section>
</body>

</html>

三、重要概念

1、flex

flex 是 flex-grow 、flex-shrink 、flex-basis 这三个属性的缩写形式，分别表示伸长比例、缩短比率、变化基数。更多内容

/* 关键字值 */
flex: auto;
flex: initial;
flex: none;

/* 一个值, 无单位数字: flex-grow */
flex: 2;

/* 一个值, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;

/* 两个值: flex-grow | flex-basis */
flex: 1 30px;

/* 两个值: flex-grow | flex-shrink */
flex: 2 2;

/* 三个值: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/*全局属性值 */
flex: inherit;
flex: initial;
flex: unset;

auto ：元素会缩短或伸长自己，来撑满flex父容器，等同于： flex: 1 1 auto；
initial ：元素会缩短自身以适应 flex父容器，但不会伸长，等同于：flex: 0 1 auto；
none ：元素不会缩短也不会伸长，等同于：flex: 0 0 auto。
flex-grow ：负值无效，默认值为 1（初始值为0），指定了 flex 元素的伸长规则。更多内容
flex-shrink ：负值无效，默认值为1（初始值为0），指定了 flex 元素的收缩规则。更多内容
flex-basis ：指定了 flex 元素在主轴方向上的初始大小。默认值为 0，表示不伸长也不缩短。更多内容

2、方向

让元素在 flex父元素中，进行行或列方向上的伸长或缩短的变化。

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

3、换行

元素过多，超过flex父元素的宽度时，2个设置让其自动换行。

/* 1、flex父元素设置 */
flex-wrap: wrap

/* 2、元素设置宽度 */
flex: 300px;

4、flex-flow

flex-direction: row;
flex-wrap: wrap;

/* 上面写法等同于下面写法 */
flex-flow: row wrap;

5、水平、垂直对齐

align-items ：对齐 grid 或 flex 行中的所有元素。align-items - MDN
align-self ：对齐 grid 或 flex 中的指定元素。align-self - MDN
justify-content ：flex布局中，设置元素间隔空间的分配方式。justify-content - MDN
order ：flex 布局中，指定元素的顺序。order - MDN

#main { display: flex; }

#main > article { flex:1; order: 2; }

#main > nav { width: 200px; order: 1; }

#main > aside { width: 200px; order: 3; }

6、flex 嵌套

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Complex flexbox example</title>
    <style>
        html {
            font-family: sans-serif;
        }

        body {
            margin: 0;
        }

        header {
            background: purple;
            height: 100px;
        }

        h1 {
            text-align: center;
            color: white;
            line-height: 100px;
            margin: 0;
        }

        article {
            padding: 10px;
            margin: 10px;
            background: aqua;
        }

        /* Add your flexbox CSS below here */

        section {
            display: flex;
        }

        article {
            flex: 1 200px;
        }

        article:nth-of-type(3) {
            flex: 3 200px;
            display: flex;
            flex-flow: column;
        }

        article:nth-of-type(3) div:first-child {
            flex: 1 100px;
            display: flex;
            flex-flow: row wrap;
            align-items: center;
            justify-content: space-around;
        }

        button {
            flex: 1 auto;
            margin: 5px;
            font-size: 18px;
            line-height: 1.5;
        }
    </style>
</head>

<body>
    <header>
        <h1>Complex flexbox example</h1>
    </header>

    <section>
        <article>
            <h2>First article</h2>

            <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday
                carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag
                polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo
                booth health goth gastropub hammock.</p>
        </article>

        <article>
            <h2>Second article</h2>

            <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday
                carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag
                polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo
                booth health goth gastropub hammock.</p>
        </article>

        <article>
            <div>
                <button>Smile</button>
                <button>Laugh</button>
                <button>Wink</button>
                <button>Shrug</button>
                <button>Blush</button>
            </div>
            <div>
                <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday
                    carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore
                    hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia
                    iPhone photo booth health goth gastropub hammock.</p>
            </div>
            <div>
                <p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo
                    8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings
                    cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art
                    party.</p>
            </div>
        </article>
    </section>
</body>

</html>

四、参考文档

CSS 的弹性布局(flex) ，是什么？

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css

登录后参与评论

0 条评论

热度