CODEWITHSUNDEEP
htmlcssflexbox
ravi
ravi

Reputation: 1088

Flexbox configuration

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/

Upvotes: 1

Views: 77

Answers (3)

Hudson Taylor
Hudson Taylor

Reputation: 1162

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.

Upvotes: 2

Michael Benjamin
Michael Benjamin

Reputation: 371331

#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:

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

Upvotes: 3

Nenad Vracar
Nenad Vracar

Reputation: 122057

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>

Upvotes: 4

Related Questions