提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

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

CSS
2023-04-18 14:40:46 时间
一、弹性布局 是什么？

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

二、怎么使用？
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、水平、垂直对齐

#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>
四、参考文档

相关文章