css_flex-grow增长系数/可用空间分配_实例

文章目录

  • reference
    • example
      • preview

reference

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

example

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Flexbox 1 — basic flexbox model chosentitle>
    <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 exampleh1>
    header>

    <section>
        <article>
            <div>
                <p class="growSpaceBlock">p>
                

                
                
                <h2>First articleh2>

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

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

                <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增长系数/可用空间分配_实例_第1张图片

你可能感兴趣的:(css,css3,html)