CODEWITHSUNDEEP
htmlcssflexbox
meowmers
meowmers

Reputation: 139

Combining rows and columns in flexbox

I have three elements in an article: the photo, the categories and then the post info.

I am trying to figure out how to get the categories element to stack on top of the post info column (#2 on top of #3, if you are looking at the attached photo) so it looks like two 50% columns even though there are three flex elements.

Flex Items

.flexbox {
  display: flex;
}
.featured-image {
  flex: 1;
}
.post-categories {} 
.post-info {
  flex: 1;
}
<article class="flexbox">
  <div class="featured-image" style="background-image: url(img.jpg);"></div>
  <ul class="post-categories">
    <li><a href="/category">Category</a>
    </li>
  </ul>
  <div class="post-info">
    <header>
      <h3 class="post-title"><a href="/post">Post Title</a></h3>
      <p class="timestamp">Posted 1 month ago</p>
    </header>
  </div>
</article>

Upvotes: 2

Views: 10910

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371003

Wrap elements #2 (the categories) and #3 (the post info) in a container. This container then becomes a sibling flex item to element #1 (the photo).

Optionally, add display: flex to this new container, along with flex-direction: column. (Although I would recommend doing this, because it enables you to control sizing and alignment with flex properties, this part is optional because block elements will stack vertically regardless).

Now you have a layout comprised of a single row with two flex columns, and the right column has two child elements vertically stacked and equal in height to the left column.

.flexbox {
  display: flex;
}
#nested-flex-container {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.featured-image  { flex: 1; }
.post-categories { flex: 1; }
.post-info       { flex: 1; }

/* non-essential decorative styles */
.flexbox {border: 1px solid black; text-align: center;}
.post-info {background-color: lightgray;}
.post-categories {background-color: lightgreen; padding: 0; margin: 0; 
                  list-style-type: none;}
<article class="flexbox">
  <div class="featured-image" style="background-image: url(img.jpg);">Photo</div>
  <div id="nested-flex-container">
    <ul class="post-categories">
      <li><a href="/category">Category</a></li>
    </ul>
    <div class="post-info">
      <header>
        <h3 class="post-title"><a href="/post">Post Title</a></h3>
        <p class="timestamp">Posted 1 month ago</p>
      </header>
    </div>
  </div>
</article>

Upvotes: 1

jack
jack

Reputation: 2904

I'd put a wrapper div around the two things you want to stack. Then you can use flex to put that wrapper next to #1, and use flex inside that wrapper to stack #2 and #3.

.flexbox {
    display: flex;
}

/* stack 1 next to .post-meta, containing 2 and 3 */
.featured-image,
.post-meta {
  flex: 1;
}

/* stack 2 and 3 inside .post-meta */
.post-meta {
  display: inline-flex;
  flex-direction: column;
}


/* these styles are mostly for demo purposes;
 * adjust or remove as needed */

.post-categories, 
.post-info {
  padding: 10px;
  list-style: none;
  margin: 0;
}

.featured-image {
  background-color: skyblue;
 }

.post-categories { background: #ccc; }
.post-info { background: #ddd; }
<article class="flexbox">
    <div class="featured-image" style="background-image: url(img.jpg);"></div>
    <div class="post-meta">
    <ul class="post-categories">
        <li><a href="/category">Category</a></li>
    </ul>
    <div class="post-info">
        <header>
            <h3 class="post-title"><a href="/post">Post Title</a></h3>
            <p class="timestamp">Posted 1 month ago</p>
        </header>
    </div>
   </div>
</article>

Upvotes: 4

Related Questions