标签：flex pickled article div margin grow css 200px
文章目录
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系数的比例体现在红色长度的部分
标签：flex,pickled,article,div,margin,grow,css,200px 来源： https://blog.csdn.net/xuchaoxin1375/article/details/122373238
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。