Flexbox：如何在此处放置另一个对象

Question

我正在使用显示：flex；创建图块视图。我试图将第三张图片放在第二张图片下面。但是，每当我这样做时，第三张图片都会在第一张图片下方，而不会在第二张图片下方， @media screen and (min-width: 1000px) {      .main {        height:1800px;        width: 100%;        margin: 0px 0px 0px 0px;        position: relative;       z-index: 0;      }                 .parallax {        /* The image used */        background-image: url("https://i.ibb.co/r272XPt/2019-2020.png");        /* Set a specific height */        min-height: 400px;        opacity: 60%;        filter: blur(2px);        -webkit-filter: blur(2px);        /* Create the parallax scrolling effect */        background-attachment: fixed;        background-position: center;        background-repeat: no-repeat;        background-size: cover;      }            .tiles{        position:relative;        top:100px;        width:90vw;        margin-left:5vw;        display: flex;       flex-wrap: wrap;      }            .chromebookHelpdesk img{        margin-left:5vw;        width:50vw;        display:block;      }            .subhelp{        height:25vw;      }            .subhelp img{        margin-left:5vw;        width:25vw;        display:block;      }            .studentsTour img{        margin-left:5vw;        width:20vw;        margin-top:5vw;        display:block;      }      #projects img {        text-align: center;        display: block;        width: 25vw;        margin: 20px;      }      .mission_logo {        width: 200px;        display: inline-block;        float: left;        text-align: center;      }      .mission {        text-align: center;        margin-top: 100px;        font-size: 20px;      }      .ingenuity {        color: #3cba54;        font-size: 60px !important;      }      .creativity {        color: #f4c20d;        font-size: 60px !important;      }      .innovation {        color: #db3236;        font-size: 60px !important;      }    }

Answer 1

CSS Flexbox完整指南

.tiles {

  display: flex;

  flex-wrap: wrap;

  flex-direction: row;

  flex: 1;

}

.section {

  display: flex;

  flex: 1;

  flex-direction: column;

}

.item {

  display: flex;

  flex: 1;

  padding: 1rem;

  margin: 4px;

  background: green;

  color: white;

}

<div class="tiles">

  <div class="section">

    <div class="item">

      <p>Chromebook Helpdesk</p>

    </div>

  </div>

  <div class="section">

    <div class="item">

      <p>Sub Help</p>

    </div>

    <div class="item">

      <p>Student Tour</p>

    </div>

  </div>

</div>

Answer 2

如果您理解这个概念，那就很简单了，下面是示例：

根据您的要求，您需要 2 列单行，因此您将创建flex属性，现在您需要 2 列，因此您将其设置flex:50%为 2。现在进入您的图像部分，您需要在下面放置 2 个图像，因此您将提供height:50%(右图），你将给出height:100%（左图）。

您可以根据需要不断更改尺寸。您还可以responsive为其添加设计。希望能帮助到你。

* {

  box-sizing: border-box;

}

.row {

  display: flex;

}

.column {

  flex: 50%;

  padding: 5px;

}

<div class="row">

  <div class="column">

    <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" style="width:100%" />

  </div>

  <div class="column">

    <div class="row">

      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" style="width:50%" />

    </div>

    <div class="row">

      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" style="width:50%" />

    </div>

  </div>

</div>