<h2>flex Grow Değerleri 0 </h2> <div class="flex-container"> <div class="item">0</div> <div class="item">0</div> <div class="item">0</div> </div> <h2>flex Grow Değerleri 1 </h2> <div class="flex-container"> <div class="item grow1">1 <br>İçerik Olan Öğe</div> <div class="item grow1">1</div> <div class="item grow1">1</div> </div> <h2>flex Grow Değerleri 1 ve 2</h2> <div class="flex-container"> <div class="item grow1">1</div> <div class="item grow2">2</div> <div class="item grow1">1</div> </div> <h2>flex: 1 0 0; </h2> <div class="flex-container"> <div class="item col3">33% <br>İçerik Olan Öğe</div> <div class="item col3">33%</div> <div class="item col3">33%</div> </div>
*{ margin: 0; padding: 0; box-sizing: border-box; } *::before, *::after{ box-sizing: border-box; } .flex-container{ display: flex; padding: 15px; border: 1px solid #e2e2e2; flex-wrap: wrap; margin: 10px 0; font-family: sans-serif; } .item{ text-align: center; padding: 15px 30px; font-size: 30px; margin: 5px; font-weight: 600; color: #fff; background-color: orange; } .grow1{ flex-grow: 1; background-color: #2da192; } .grow2{ flex-grow: 2; background-color: #f11a56; } .col3{ flex: 1; }