CODEWITHSUNDEEP
htmlcssflexbox
user7858150
user7858150

Reputation:

FlexBox elements per line

I used flexbox to align a bunch of elements neatly in a row. Now I need to give those elements clear titles, to define what they are displaying to my end user. I tried using another flexbox, however no matter how I style it, it seems to have a different ratio to the flexbox below it.

I read about row wrap being able to group elements on multiple lines, but this is performed dynamically. Additionally, a question was asked here on SO about this same subject, with the response being negative. However, this was in 2012 - have things changed?

Alternatively, is there a better way to approach this? Perhaps a horizontal flexbox containing a group of vertical flexboxes?

The objective is to align the elements so that they appear something like the image below:

Image

I've built a quick and dirty demonstration here: https://jsfiddle.net/qLveL7ae/

Upvotes: 1

Views: 531

Answers (2)

StefanBob
StefanBob

Reputation: 5128

Think the big thing here is keeping your titles the same width as the boxes below it. How about this layout: (sorry couldn't deal with your class names and inline styles).

* {
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  flex-direction: column;
  max-width: 1024px;
  margin: 0 auto;
}

.top {
  display: flex;
  justify-content: space-around;
  outline: 1px solid red;
}

.top a {
  width: 15.5%;
  text-align: center;
  text-decoration: none;
  padding: 10px 20px;
  color: black;
}

.bottom {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  outline: 1px solid red;
}

.box {
  width: 15.5%;
}

.box-short {
  height: 200px;
  border: 1px solid black;
}

.box-full {
  height: 300px;
  border: 5px solid black;
}
<div class="wrapper">
  <section class="top">
    <a href="#">title</a>
    <a href="#">title</a>
    <a href="#">title</a>
    <a href="#">title</a>
    <a href="#">title</a>
    <a href="#">title</a>
  </section>
  <section class="bottom">
    <div class="box box-short"></div>
    <div class="box box-full"></div>
    <div class="box box-full"></div>
    <div class="box box-full"></div>
    <div class="box box-full"></div>
    <div class="box box-short"></div>
  </section>
</div>

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53674

Perhaps a horizontal flexbox containing a group of vertical flexboxes?

That's how I would do it. Something like this.

.flex {
  display: flex;
}
.col {
  flex-direction: column;
  border: 1px solid black;
  height: 300px;
}
h1 {
  padding: 0 .5em;
}
.col:first-child, .col:last-child {
  height: 200px;
}
.col > div {
  border: 1px solid red;
  flex-grow: 1;
}
<div class="flex">
  <div class="flex col">
    <h1>title</h1>
    <div>content</div>
  </div>
  <div class="flex col">
    <h1>title</h1>
    <div>content</div>
  </div>
  <div class="flex col">
    <h1>title</h1>
    <div>content</div>
  </div>
  <div class="flex col">
    <h1>title</h1>
    <div>content</div>
  </div>
  <div class="flex col">
    <h1>title</h1>
    <div>content</div>
  </div>
  <div class="flex col">
    <h1>title</h1>
    <div>content</div>
  </div>
  <div class="flex col">
    <h1>title</h1>
    <div>content</div>
  </div>
  
</div>

Upvotes: 0

Related Questions