使用Flex，将一个div放在另一个div下面。

Question

我是个新手，第一次在这里问问题。请如何将div照片网格容器放在标题下面。我需要图片网格容器项目之下的标题项目。见下面我的代码

<div class='header-container'>
    <div class='header'>
    <div class='subscribe'>Subscribe &#9662;</div>
    <div class='logo'><img src='file:///C:/Users/lofty/Desktop/CODE%203/FLEX/awesome- 
     logo.svg'/></div>
    <div class='social'><img src='file:///C:/Users/lofty/Desktop/CODE%203/FLEX/social- 
     icons.svg'/></div>
    </div>

    <div class='photo-grid-container'>
      <div class='photo-grid'>
        <div class='photo-grid-item first-item'>
        <img src='images/three.svg'/></div>
        <div class='photo-grid-item mid-item'>
        <img src='images/two.svg'/></div>
        <div class='photo-grid-item last-item'>
        <img src='images/one.svg'/></div>
      </div>
    </div>
 </div>


.header-container {
  color: #5995DA;
  background-color: #D6E9FE;
  display: flex;
  justify-content: center;
}
.header {
  width: 900px;
  height: 300px;
  display: flex;
  justify-content: space-between;
  align-items:center; 
}
.photo-grid-container {
  display: flex;
  justify-content: center;
}

Answer 1

在.header-container中添加flex-direction: column。有关带有定位的挠性盒提示，请参见本指南。

​

.header-container {
    color: #5995DA;
    background-color: #D6E9FE;
    display: flex;
    justify-content: center;
    /* here what I added in your code */
    flex-direction: column;
}

.header {
    width: 900px;
    height: 300px;
    display: flex;
    justify-content: space-between;
    align-items:center; 
}
.photo-grid-container {
    display: flex;
    justify-content: center;
}

 <div class='header-container'>
        <div class='header'>
           <div class='subscribe'>Subscribe &#9662;</div>
           <div class='logo'>
                <img src='https://picsum.photos/201'/>
            </div>
           <div class='social'>
                <img src='https://picsum.photos/201'/>
            </div>
        </div>

        <div class='photo-grid-container'>
           <div class='photo-grid'>
              <div class='photo-grid-item first-item'>
                 <img src='https://picsum.photos/200'/>
              </div>
              <div class='photo-grid-item mid-item'>
                 <img src='https://picsum.photos/200'/>
              </div>
              <div class='photo-grid-item last-item'>
                 <img src='https://picsum.photos/200'/>
              </div>
           </div>
        </div>
    </div>

​

​

​

Answer 2

一种方法是在类头容器上放置flex方向。

 .header-container {
   color: #5995DA;
   background-color: #D6E9FE;
   display: flex;
   justify-content: center;
   flex-direction: column;
 }

因此，您正在告诉父div容器将在列中。

Answer 3

只需将最后一个</div>标记移动到photo-grid-container上方即可。就像这样：

​

.header-container {
  color: #5995DA;
  background-color: #D6E9FE;
  display: flex;
  justify-content: center;
}

.header {
  width: 900px;
  height: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border:solid 1px red;
}

.photo-grid-container {
  display: flex;
  justify-content: center;
  border:solid 1px green;
}

<div class='header-container'>
  <div class='header'>
    <div class='subscribe'>Subscribe &#9662;</div>
    <div class='logo'><img src='file:///C:/Users/lofty/Desktop/CODE%203/FLEX/awesome- 
     logo.svg' /></div>
    <div class='social'><img src='file:///C:/Users/lofty/Desktop/CODE%203/FLEX/social- 
     icons.svg' /></div>
  </div>
 </div>

  <div class='photo-grid-container'>
    <div class='photo-grid'>
      <div class='photo-grid-item first-item'>
        <img src='images/three.svg' /></div>
      <div class='photo-grid-item mid-item'>
        <img src='images/two.svg' /></div>
      <div class='photo-grid-item last-item'>
        <img src='images/one.svg' /></div>
    </div>
  </div>

​