Search code examples
htmlcssflexboxfrontend

How can i make my <div> elements inline side by side

I'm struggling a bit to figure this out. I have 3 elements in a flexbox section with the flex direction on the section set to column.

So far my code centersmy h2 element at the top of the section and the 3 elements in a centered column below each other as the flex-direction tells it to be. See attached screenshot. 

.projects {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: column;
}

/* projects placeholder */
.projects div {
  background-color: var(--secondary-color);
  border-radius: 20px;
  width: 360px;
  height: 480px;
  margin: 15px;
  color: var(--primary-color);
}
  
<section class="projects" id="projects">
  <h2>Projects</h2>
  <div class="proj1">
    <p>Placeholder</p>
  </div>
  <div class="proj2">
    <p>Placeholder</p>
  </div>
  <div class="proj3">
    <p>Placeholder</p>
  </div>
</section>

What would i need to do to put my 3 elements side by side by side under the h2?

Solution

  • Wrap them in another div and display flex

    .projects {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: column;
}


/* projects placeholder */

.projects div {
  background-color: var(--secondary-color);
  border-radius: 20px;
  width: 360px;
  height: 480px;
  margin: 15px;
  color: var(--primary-color);
}

.container-project {
  display: flex;
}
    <section class="projects" id="projects">
  <h2>Projects</h2>
  <div class="container-project">
    <div class="proj1">
      <p>Placeholder</p>
    </div>
    <div class="proj2">
      <p>Placeholder</p>
    </div>
    <div class="proj3">
      <p>Placeholder</p>
    </div>
  </div>
</section>