文章目录
- reference
- example
- preview
reference
- Flexbox - Learn web development | MDN (mozilla.org)
example
<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系数的比例体现在红色长度的部分
