Combining rows and columns in flexbox

Question

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

Answer 1

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;}

  
Photo
  

    

      
Category
    
    

      

        
Post Title
        
Posted 1 month ago