6 September 2024

To set a flex container with flex-direction: row and ensure it takes up 100% width, you can do it like in this snippet. With flex-direction: row, the flex items (the children) will be aligned in a row. Adding flex: 1 to the children ensures that they grow and take equal space within the row.

Source code viewer
  1. <style>
  2.   .row {
  3.     display: flex;
  4.     flex-direction: row; /* Makes sure items are aligned horizontally */
  5.   }
  6.  
  7.   .child {
  8.     flex: 1; /* Allows the children to take equal width */
  9.   }
  10. </style>
  11.  
  12. <div class="row">
  13.   <div class="child">Child 1</div>
  14.   <div class="child">Child 2</div>
  15.   <div class="child">Child 3</div>
  16. </div>
  17.  
Programming Language: HTML