<h2> Flex-Direction Row </h2> <div class="flex-container"> <div class="item basis-5">500px</div> <div class="item">1</div> <div class="item">1</div> <div class="item">1</div> </div> <h2> Flex-Direction Column </h2> <div class="flex-container column"> <div class="item basis-2">200px</div> <div class="item">1</div> <div class="item">1</div> <div class="item">1</div> </div>
*{ margin: 0; padding: 0; box-sizing: border-box; } *::before, *::after{ box-sizing: border-box; } .flex-container{ display: flex; width: 700px; max-width: 100%; padding: 15px; border: 2px solid; margin-bottom: 10px; } .flex-container.column{ flex-direction: column; } .item{ flex-shrink: 1; flex-grow: 1; text-align: center; background-color: #2da192; color: #fff; margin: 5px; font-size: 30px; line-height: 80px; font-weight: 600; } .basis-5{ flex-basis: 500px; background-color: #f11a56; } .basis-2{ flex-basis: 200px; background-color: #f11a56; }