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

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: #ffffd; }

    

    

    

        
Category
    
    

        

            
Post Title
            
Posted 1 month ago