HTML5，CSS3弹性框无法正常工作

Question

我了解到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;}

Answer 1

嗨！请查看此代码

  

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

Answer 2

您需要更改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%;
}

＆＃13;

＆＃13;

* {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_0{background:#ff0; padding: 10px;}
.item_1{background:#00f;}
.item_2{background:#ff00e4;}
.item_3{background:#ff00e4;}
.item_4{background:#1cc600;}
.item_5{background:#1cc600;}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;