Flexbox configuration

Question

I have following html markup. I would like h1 tag to take full with of the page (100%) and three articles to appear in one row using flexbox. The image should shrink to fit the row if needed.

#content {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#content>h2 {
  flex: 0 1 100%;
}

#content>article {
  padding: 5px;
  border: 1px solid #cccc33;
  background: #dddd88;
  flex: 1 0 50%;
}

<section id="content">
  <h2>Featured Work</h2>
  <article>
    <img src="http://placehold.it/450x450">
  </article>
  <article>
    <img src="http://placehold.it/450x450">
  </article>
  <article>
    <img src="http://placehold.it/450x450">
  </article>
</section>

Here is the jsfiddle: https://jsfiddle.net/fejt3m1s/

score 4 · Answer 1 · answered Apr 06 '17 at 16:54

You need to set flex: 0 0 100% on h1 element and max-width: 100% on image elements.

#content {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
#content>h1 {
  flex: 0 0 100%;
}
#content>article {
  padding: 5px;
  border: 1px solid #cccc33;
  background: #dddd88;
  flex: 1;
}
img {
  max-width: 100%;
}

<section id="content">
  <h1>Featured Work</h1>
  <article>
    <img src="http://placehold.it/350x350">
  </article>
  <article>
    <img src="http://placehold.it/350x350">
  </article>
  <article>
    <img src="http://placehold.it/350x350">
  </article>
</section>

score 3 · Accepted Answer · edited May 23 '17 at 12:25

#content {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;  /* 1 */
  min-height: 800px;
  margin: 0;
  padding: 0;
}

#content>h2 {
  flex: 0 0 100%;             /* 2 */
}

#content>article {
  flex: 1 0 30%;              /* 3 */
  text-align: center;
  padding: 5px;
  border: 1px solid #cccc33;
  background: #dddd88;
}

img {
  max-width: 100%;           /* 4 */
}

<section id="content">
  <h2>Featured Work</h2>
  <article>
    <img src="http://placehold.it/350x350">
  </article>
  <article>
    <img src="http://placehold.it/350x350">
  </article>
  <article>
    <img src="http://placehold.it/350x350">
  </article>
</section>

Notes:

Pack flex lines to the top of the container (otherwise you may get a gap between lines).
Make h1 consume entire line, which forces subsequent items to create new lines.
Allow only three article elements per line. Each takes equal width.
Keep the image inside the flex item.

Hudson Taylor · Answer 3 · 2017-04-06T17:15:57.397

Honestly, I would just place the h1 tag outside of the flexbox. This makes things a whole lot simpler. Here's a working example:

#content {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
}

#content>article {
    padding: 5px;
    border: 1px solid #cccc33;
    background: #dddd88;
    flex: 1;
}

<h1>Featured Work</h1>

<section id="content">
  <article>
    <img src="http://placehold.it/350x350">
  </article>
  <article>
    <img src="http://placehold.it/350x350">
  </article>
  <article>
    <img src="http://placehold.it/350x350">
  </article>
</section>

Edit:

To fix the row problem, you can look at Nenad Vracar's solution below.

Flexbox configuration

3 Answers3