CODEWITHSUNDEEP
htmlcsslayoutflexbox
Andrew Farrell
Andrew Farrell

Reputation: 2448

How to make flex items that are also flex containers stack horizontally?

I'm trying to create a horizontal menu. My understanding of flexbox is that if I want to have elements stack horizontally, I should apply the CSS rules

display: flex
flex-direction: row;

However, in the following page, the boxes stack vertically

div#navcontainer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

div.navitem {
  color: #292929;
  height: 45px;
  width: 150px;
  padding: 5px;
  border-color: 292929;
  border-width: 2px;
  border-style: solid;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
<div id="header">
  <div id="navcontainer">
    <div class="navitem"><a href="./index.html">home</a></div>
    <div class="navitem"><a href="./about.html">about</a></div>
    <div class="navitem"><a href="./services.html">services</a></div>
    <div class="navitem"><a href="./contact.html">contact</a></div>
  </div>
</div>

How do I make css flex-items which are themselves flex containers of other elements stack vertically?

Upvotes: 1

Views: 7265

Answers (2)

Piotr O
Piotr O

Reputation: 429

Horizontal flex direction is a default direction, so flex-direction: row is superfluous. Right now you have a horizontal list which will contain vertical flex boxes.

#navcontainer {
  display: flex;
  flex-wrap: nowrap;
}

.navitem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

Upvotes: 0

Stan
Stan

Reputation: 86

Set display: flex to #navcontainer. You can also get it without flexbox. Use display: inline-block and percentage values for boxes.

Upvotes: 1

Related Questions