HTML5、CSS3 弹性框无法正常工作 [重复]
Posted
技术标签:
【中文标题】HTML5、CSS3 弹性框无法正常工作 [重复]【英文标题】:HTML5, CSS3 flex box not working properly [duplicate] 【发布时间】:2017-05-07 15:46:07 【问题描述】:我了解到 display flex 可以帮助我减少发布工作的时间。 但是我有一个问题是布局没有显示我想要的。
我想像下面的网格布局一样显示:
但不幸的是,我无法自己解决此问题。 你能给我一个建议,我该如何用 flex 标签解决这个问题?
你也可以看到我的问题如下:
这是我的代码:
.item_wrap
display: flex;
justify-content: space-between;
flex-flow: row-wrap;
.item_0
width: 500px;
height: 500px;
background: #ff0;
.item_1
width: 490px;
height: 160px;
background: #00f;
.item_2
width: 240px;
height: 160px;
background: #ff00e4;
.item_3
width: 240px;
height: 160px;
background: #ff00e4;
.item_4
width: 240px;
height: 160px;
background: #1cc600;
.item_5
width: 240px;
height: 160px;
background: #1cc600;
【问题讨论】:
你能分享一下小提琴吗? 【参考方案1】:您需要更改html
结构。
右侧的所有块都应包裹在<div>
中。
HTML:
<div class="item-wrap">
<div class="item_0">0</div>
<div class="inner-wrap">
<div class="item_1">1</div>
<div class="item_2">2</div>
<div class="item_3">3</div>
<div class="item_4">4</div>
<div class="item_5">5</div>
</div>
</div>
CSS:
.item-wrap
justify-content: space-between;
display: flex;
.inner-wrap
justify-content: space-between;
flex-wrap: wrap;
display: flex;
.item_0,
.inner-wrap
flex-basis: calc(50% - 5px);
.inner-wrap > div
flex-basis: calc(50% - 5px);
.inner-wrap > .item_1
flex-basis: 100%;
* box-sizing: border-box;
body
margin: 0;
.item-wrap
justify-content: space-between;
height: 100vh;
display: flex;
.inner-wrap
justify-content: space-between;
flex-wrap: wrap;
display: flex;
.item_0,
.inner-wrap
flex-basis: calc(50% - 5px);
.inner-wrap > div
flex-basis: calc(50% - 5px);
padding: 10px;
.inner-wrap > div + div
margin-top: 10px;
.inner-wrap > .item_1
flex-basis: 100%;
.item_0background:#ff0; padding: 10px;
.item_1background:#00f;
.item_2background:#ff00e4;
.item_3background:#ff00e4;
.item_4background:#1cc600;
.item_5background:#1cc600;
<div class="item-wrap">
<div class="item_0">0</div>
<div class="inner-wrap">
<div class="item_1">1</div>
<div class="item_2">2</div>
<div class="item_3">3</div>
<div class="item_4">4</div>
<div class="item_5">5</div>
</div>
</div>
【讨论】:
非常感谢。解决我的麻烦的唯一方法是改变 HTML 结构:( @Richard 不客气)【参考方案2】:嗨!请检查此代码
HTML5、CSS3
.item_wrap
width: 800px;
display: flex;
margin: 0 auto;
.item_0
height: 500px;
background: red;
flex: 1;
margin: 5px;
.item_1
height: 500px;
background: yellow;
flex: 1;
margin: 5px;
.headbar
.head_column
height: 200px;
background: green;
flex: 1;
.headbar2
display: flex;
.pinkone
background: #000;
flex: 1;
height: 150px;
.pinktwo
background: pink;
flex: 1;
height: 150px;
.headbar3
display: flex;
.grayone
background: gray;
flex: 1;
height: 150px;
.graytwo
background: blue;
flex: 1;
height: 150px;
<div class="item_wrap">
<div class="item_0"></div>
<div class="item_1">
<div class="headbar">
<div class="head_column"></div>
</div>
<div class="headbar2">
<div class="pinkone"></div>
<div class="pinktwo"></div>
</div>
<div class="headbar3">
<div class="grayone"></div>
<div class="graytwo"></div>
</div>
</div>
</div>
此外,您可以关注 YouTube 频道-LearnWebCode
【讨论】:
非常感谢。你是我的天使:) 欢迎 -@Richard以上是关于HTML5、CSS3 弹性框无法正常工作 [重复]的主要内容,如果未能解决你的问题,请参考以下文章