using Flex, place one div below another-CodePudding

I'm a newbie and first time asking questions here. Please how do I place the div PHOTO-GRID-CONTAINER below HEADER. I need the photo-grid container items below the header items. See my codes below

<div class='header-container'>
    <div class='header'>
    <div class='subscribe'>Subscribe &#9662;</div>
    <div class='logo'><img src='file:///C:/Users/lofty/Desktop/CODE 3/FLEX/awesome- 
     logo.svg'/></div>
    <div class='social'><img src='file:///C:/Users/lofty/Desktop/CODE 3/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;
}

CodePudding user response：

in .header-container add flex-direction: column. See this guide for flexbox tips with positioning

CodePudding user response：

The Most easiest way is to put flex direction column on header-container

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

So you are telling the parent div that containers would be in columns.

CodePudding user response：

Just move your very last </div> tag to just above photo-grid-container. Like so:

.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 3/FLEX/awesome- 
     logo.svg' /></div>
    <div class='social'><img src='file:///C:/Users/lofty/Desktop/CODE 3/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>