2

I'm creating a nav menu using flex. I want all of the items in my menu to display in a single row when the screen is wide enough to support that, and to snap to two rows of items when it needs to wrap. I have this mostly working:

.content {
  width: 400px;
  height: 150px;
  border: thin solid black;
}

.outer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.inner {
  display: flex;
  justify-content: space-around;
  flex-grow: 1;
}

span {
  font-size: 24pt;
}
<div class="content">
  <div class="outer">
    <div class="inner">
      <span>one</span>
      <span>two</span>
      <span>three</span>
    </div>
    <div class="inner">
      <span>four</span>
      <span>five</span>
      <span>six</span>
    </div>
  </div>
</div>

CodePen here.

This works perfectly when the page is wide enough:

single line

And it works mostly perfectly when the page is narrow (try changing the width of .content to 250px):

two rows

However, now I'm trying to make it so the items in each row line up with each other. I'm going for something like this:

two aligned rows

I've tried every combination of flex-grow, flex-shrink, and justify-content that I can think of, but I can't get the items to align.

I know I could probably use a media query and swap out the content for a grid when the window gets too narrow, but I'd like to simplify this as much as possible. Is there a way to align the children of two flex divs?

Alternatively, is there a way to use a grid layout that shows as 1 row until it needs to wrap, and then it shows as 2 rows?

Kevin Workman
  • 41,537
  • 9
  • 68
  • 107

2 Answers2

-1

It causes by span width.

if span width not fixed, span will have dynamic width;

set width on span;

jinseok.oh
  • 213
  • 2
  • 7
-1

Try this

Add to te span

span {
   flex: 33%;
}

Or change the porcent acording to the amount of items the div has

riolp9991
  • 24
  • 5