First-child full-width in Flexbox

by

You can set the :first-child to a width of 100%, and the rest of the childs :not(:first-child) to flex: 1.

To put them on multiple lines, use flex-wrap: wrap on the container:

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: #e2eaf4;
  padding: 10px;
}

.child {
  display: inline-block;
  font-family: "Open Sans", Arial;
  font-size: 20px;
  color: #FFF;
  text-align: center;
  background: #3794fe;
  border-radius: 6px;
  padding: 20px;
  margin: 12px;
}

.child:first-child {
  width: 100%;
}

.child:not(:first-child) {
  flex: 1;
}
<div class="container">
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
</div>

More Related Contents:

  1. How to create one vertical column in between rows in Flexbox [closed]
  2. Why is a flex item limited to parent size?
  3. Fill remaining vertical space with CSS using display:flex
  4. How does flex-wrap work with align-self, align-items and align-content?
  5. Flex-box: Align last row to grid
  6. Text in a flex container doesn’t wrap in IE11
  7. Equal height rows in CSS Grid Layout
  8. How to make flexbox items the same size?
  9. Align 3 unequal blocks left, center and right
  10. How can I align one item right with flexbox?
  11. My position: sticky element isn’t sticky when using flexbox
  12. What do “flex” and “justify-content” achieve that “text-align” doesn’t?
  13. Every item to have the same width as the widest element [duplicate]
  14. How can I make a div span multiple rows and columns in a grid?
  15. Flexible box model – display : flex, box, flexbox? [duplicate]
  16. Usage of display property of flex box items
  17. firefox overflow-y not working with nested flexbox
  18. Removing display:flex adds spaces around a link. Why?
  19. Are flex items block level element?
  20. Bootstrap change order of columns
  21. How to specify an element after which to wrap in css flexbox? [duplicate]
  22. CSS3 Flexbox: display: box vs. flexbox vs. flex
  23. Flex auto margin not working in IE10/11
  24. Prevent flex items from overflowing a container
  25. Vertically center items with flexbox
  26. Can flex items wrap in a container with dynamic height?
  27. How to fix unexpected column order in bootstrap 4?
  28. How to stretch children to fill cross-axis?
  29. Issue when centering vertically with flexbox when heights are unknown
  30. Do I not understand the flex-grow property?

Leave a Comment