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为其添加设计。希望能帮助到你。* {&nbsp; box-sizing: border-box;}.row {&nbsp; display: flex;}.column {&nbsp; flex: 50%;&nbsp; padding: 5px;}<div class="row">&nbsp; <div class="column">&nbsp; &nbsp; <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" style="width:100%" />&nbsp; </div>&nbsp; <div class="column">&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" style="width:50%" />&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" style="width:50%" />&nbsp; &nbsp; </div>&nbsp; </div></div>