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

文章目录

reference

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系数的比例体现在红色长度的部分
    在这里插入图片描述
posted @   xuchaoxin1375  阅读(4)  评论(0)  编辑  收藏  举报  
相关博文：
· css_flex弹性盒模型/flex布局/flex在线可视化工具
· css_防止溢出_边框/元素水平居中/(响应式设计:媒体查询)适配不同尺寸的不同布局提高网页可读性
· cssflex
· 原来 flexbox 是这么工作的
· CSS display: flex布局
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
历史上的今天：
2023-09-22 css_transform_skew()中的角度问题_动画演示角度变化
2023-09-22 PT@古典概型@等概率模型@P1
2023-09-22 PT@Bernoulli概型@古典概型之伯努利概型
2022-09-22 windows10_北京时间设置UTC+08:00)
2021-09-22 python/javaScript_数制进制转换base conversion problem
点击右上角即可分享
微信分享提示