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 everydaycarry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcorehashtagpolaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhonephotobooth 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 everydaycarry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcorehashtagpolaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhonephotobooth 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 everydaycarry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcorehashtagpolaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhonephotobooth health goth gastropub hammock.</p><p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggingscold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom artparty.</p></div></article></section>
</body></html>

preview

下面的图中有三个article
grow系数的比例体现在红色长度的部分

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

[基础] AHK函数对象初窥 ① _实例2_实际可用版
[基础] AHK函数对象初窥 ① _实例2_实际可用版 ;# 母文章 https://zhuanlan.zhihu.com/p/48977298;;;;;;;;;;;;;;;;;;;;;;;;;;;; ...
系统盘压缩卷小于可用空间_操作系统中的可用空间管理
系统盘压缩卷小于可用空间可用空间管理 (Free space management) As we know that the memory space in the disk is limited. ...
c语言二级编程实例,二级C语言编程_-实例.doc
二级C语言编程_-实例.doc 编程实例 ? 1.???????? 1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少?1.程序分析:可填在百位.十位.个位的数字都是1.2.3. ...
物理内存是什么是计算机的显卡内存吗,物理内存可用数_可用内存和物理内存是什么意思？_可用物理内存...
网友求助:物理内存可用数_可用内存和物理内存是什么意思?_可用物理内存问题最佳答案物理内存:电脑主板上插入的内存条的总容量(在系统支持的范围内).可用内存:电脑运行时,未被使用的内存总量. 追问 ...
oracle数据库_实例_用户_表空间之间的关系
oracle数据库_实例_用户_表空间之间的关系基础概念:Oracle数据库.实例.用户.表空间.表之间的关系数据库: Oracle数据库是数据的物理存储.这就包括(数据文件ORA或者DBF.控制 ...
java 摄像头 win7_JAVA摄像头调用方法_实例源码介绍—Win7
JAVA摄像头调用_实例源码介绍-Win7. 本人菜鸟级人物,由于要搞个人脸识别登录(JAVACV),百度谷歌了一下午,找了网上简单的样例代码来试,可是老是调试不过,出现CaptureDeviceMa ...
java 摄像头 win7_Win7系统下JAVA摄像头调用_实例代码介绍
Win7系统下JAVA摄像头调用_实例代码介绍.由于要搞个人脸识别登录(JAVACV),百度谷歌了一下午,找了网上简单的样例代码来试,可是老是调试不过,出现CaptureDeviceManager.g ...
bootstrap3 表单构建器_实例演示：如何构建高可用的微服务架构
R 5月8日晚20:30,Kubernetes Master Class在线培训第五期<Kubernetes中的日志.监控与告警> 当你设计和构建大规模应用时,你将面临两个重大挑战:可伸缩 ...
mycat mysql好可用架构_想要学会MyCat高可用集群搭建，但是这些知识点却还玩不明白？...
一.集群架构 1.MyCat实现读写分离架构在我前面的文章, 我已经讲解过了通过MyCat来实现MySQL的读写分离, 从而完成MySQL集群的负载均衡 , 如下面的结构图: 但是以上架构存在问题 ...

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

文章目录

reference

example

preview

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

最新文章

热门文章