Как сделать оставшиеся блоки флекс по всю ширину?

Question

Есть два блока флекс в строку:

Для первого задана ширина: flex-basis: 100px. Как оставшийся блок и строке растянуть в оставшееся пространство?

    <div class="flex">
       <div class="item" style="flex-basis: 100px"></div>
       <div class="item"></div>
       <div class="item"></div>
    </div>

Результат должен быть таким:

|_____100px_____|_____________________________|_____________________________|

Если не задан flex-basis - то блоки должны быть равной ширины

Answer 1

Вот как одно из решений. Подробно про flex-grow можете почитать тут https://developer.mozilla.org/ru/docs/Web/CSS/flex-grow

.flex{
    display: flex;
}
.item-100px{
    flex-grow: 0;
    flex-basis: 100px;
    height: 30px;
}
.item{
    flex-grow: 1;
    height: 30px;
}
.color1{
    background-color: yellow;
}
.color2{
    background-color:   blue;
}
.color3{
    background-color:  red;
}

<div class="flex">
        <div class="item-100px color1"></div>
        <div class="item color2"></div>
        <div class="item color3"></div>
     </div>

Answer 2

.flex {
  display: flex;
  background-color: #ccc;
  height: 120px;
}

.item {
  flex: 1 0;
}

.item:first-child {
  background-color: green;
  width: 100px;
  flex: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>A Great Demo on CodePen</title>
</head>
<body>
  <div class="flex">
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
  </div>
</body>
</html>

Answer 3

Flex-basis устанавливает базовый размер элемента, но при использовании других flex свойств этот размер может изменяться. Именно поэтому я указал max-width: 100px; для первого элемента, кроме flex-basis: 100px. Для того, чтобы остальные элементы занимали оставшуюся ширину, я указал flex: 1 для всех flex-элементов

.flex {
  display: flex;
  justify-content: stretch;
  align-items: center;
  width: 600px;
}

.item {
  background: purple;
  color: #fff;
  flex: 1;
}

.item:first-child {
  flex-basis: 100px;
  max-width: 100px;
}

<div class="flex">
   <div class="item" style="margin:0 10px 0 0;">1</div>
   <div class="item" style="margin:0 10px 0 0;">2</div>
   <div class="item">2</div>
</div>

БЛОГ НА HUSL

Как сделать оставшиеся блоки флекс по всю ширину?

Ответы (3 шт):