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 弹性框无法正常工作 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

CSS3--Flex弹性盒子布局: 实例篇-输入框的布局 & 悬挂式布局

CSS字体大小在移动设备上无法正常工作

千峰HTML5+CSS3学习笔记

千峰HTML5+CSS3学习笔记

千峰HTML5+CSS3学习笔记

如何使 HTML5 画布适合动态父/弹性框容器