Make first element full width and the rest in one line

Question

I'm trying to create a kind of sub-grid which looks like this:

The first element should be full width and the rest have to be in the same line (same width each one) no matter how many items are present.

My attempt:

HTML

<div class="flex-container">
    <div class="flex-item">I'm the biggest!</div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
</div>

CSS

.flex-container {
    display: flex;
    flex-wrap: wrap;
}

.flex-container .flex-item {
    flex: 1;
}

.flex-container .flex-item:first-child {
    width: 100%;
}

I'm a newbie in flex, so, in my newbie abstraction, in theory this should work, but it doesn't. It makes all the .flex-item being in the same line with the same width (which I want to happen but only with the :not(:first-child) flex dudes).

Personally, I would have the larger div sitting outside of the flex-wrapper the smaller divs sit in. That's just me though. — dbrree, Aug 02 '17 at 16:33
Your code is inconsistent. Your CSS have selectors that doesn't exactly match your HTML's elements. — VictorGodoi, Aug 02 '17 at 16:33
so which items have the `.flex` class? and you are only able to modify the CSS? are you able to add classes to the html? can you add a script? — happymacarts, Aug 02 '17 at 16:37
@happymacarts yes, I can add classes to the HTML and modify the CSS. But I found the problem. I have to exclude `:first-child` from the `flex: 1` rule. — Mithc, Aug 02 '17 at 16:40
@Mithc Have a look at the given answer, it has a few details you missed in your suggested solution. — Asons, Aug 02 '17 at 17:43

score 3 · Accepted Answer · edited Aug 02 '17 at 17:37

This will try to keep all your subordinate items on one row.

See notes in CSS

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.flex-container .flex-item {
  background-color: #d94a6a;
  flex: 1 1 0;                                       /*  for 2nd line to not wrap  */
  margin: 0 1px;                                                
  overflow: hidden;                                  /*  for 2nd line to not wrap  */
  min-height: 75px;
  text-align: center;
  -webkit-box-shadow: 4px 4px 7px 0px rgba(50, 50, 50, 0.5);
  -moz-box-shadow: 4px 4px 7px 0px rgba(50, 50, 50, 0.5);
  box-shadow: 4px 4px 7px 0px rgba(50, 50, 50, 0.5);
}

.flex-container .flex-item:nth-child(1) {
  background-color: #3b5bb2;
  flex-basis: 100%;                                  /*  make first take full width  */
  min-height: 400px;
  margin-bottom: 20px;
}

<div class="flex-container">
    <div class="flex-item">I'm the biggest!</div>
    <div class="flex-item">#2</div>
    <div class="flex-item">#3</div>
    <div class="flex-item">#4</div>
    <div class="flex-item">#5</div>
    <div class="flex-item">#6</div>
    <div class="flex-item">#7</div>
</div>

Make first element full width and the rest in one line

1 Answers1