reference

Flexbox - Learn web development | MDN (mozilla.org)
example

<!DOCTYPE html>
<html>

<head>
    <Meta charset="utf-8">
    <title>FlexBox 1 — basic flexBox model chosen</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;
        }

        /* 普通元素选择器(选中所有section)
        权重为(0,0,1) */
        article {
            padding: 10px;
            margin: 1px;
            background: aqua;
            flex: 1 200px;
        }

        article * {
            border: dotted 3px;
        }

        article::before {
            content: "@ruleBox(200px)(flex:1)";
            border: solid 1px;
            width: 200px;
            /* display: block; */
            display: flex;
            justify-content: space-evenly;

        }

        /* article::after {
            content: "@(flex:1)";
            border: solid 1px;
            width: 200px;
            display: flex;
            justify-content: space-evenly;
        } */





        /* article::before::after{
            border: 1px solid;
            content: "test";
        } */

        article>div {
            border: dotted 2px hotpink;
            display: fle;
        }

        article>div>p:first-child {
            background-color: blue;
        }

        article>div>p:first-child,
        .growSpaceBlock {
            margin: initial;
            height: 5px;
            margin-left: 200px;
            background-color: hotpink;
            /* width: 100%; */
        }

        article>div>div {
            margin: 0 0 0 200px;
            color: red;

        }

        .growSpaceBlockInline {
            /* border: 2px solid; */
            margin: 0 0 0 200px;
            /* width: 100%; */
            display: inline-block;
        }

        article:nth-of-type(3)::before {
            content: "@ruleBox(200px)(flex:2)";
        }

        /* 伪元素选择器(选中第三个section)
        权重为(0,1,1) */
        article:nth-of-type(3) {
            flex: 2;
        }

        article:nth-of-type(3) {
            flex: 2 200px;
        }



        /* article>div>p {
            margin: 0 0 0 200px;

        } */

        /* Add your flexBox CSS below here */

        section {
            display: flex;
        }
    </style>
</head>

<body>
    <header>
        <h1>flex-grow Demo:Sample flexBox example</h1>
    </header>

    <section>
        <article>
            <div>
                <p class="growSpaceBlock"></p>
                <!-- <span>growSpaceBlock</span> -->

                <!-- <span class="growSpaceBlockInline"></span> -->
                <!-- <div>growSpaceBlock</div> -->
                <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>
            </div>
        </article>

        <article>
            <div>
                <p></p>
                <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>
            </div>
        </article>

        <article>
            <div>
                <p></p>
                <h2>Third 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>

                <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>
preview

下面的图中有三个article
grow系数的比例体现在红色长度的部分
css_flex-grow增长系数/可用空间分配_实例

文章目录

reference

example

preview

相关推荐
