Как задать 3м блокам ширину в 1/4, каждому, чтобы оставшаяся 1/4 не занималась и оставалось пустой?

Рейтинг: -1Ответов: 4Опубликовано: 25.07.2023

У меня есть div в котором расположены 3 блока. Надо чтобы каждый из них занимал 1/4 ширины, а пустое место не распределялось по остальным блокам, и те не растягивались? Пробовала flex:1;, но растягивает блоки на всю. Как указать что там надо делить на 4, а не на три? Пока по отрисовке больше устраивает добавление 4 блока и скрытие его, можно как-то без него обойтись?

html flexbox
Источник: Stack Overflow на русском

Ответы

▲ 0

Можно что-то такое сделать width: calc( (100% - 1.5em) / 4); увеличение/уменьшение 1.5em изменяет ширину блоков..

body {
  margin: 0;
}

#w {
  width: 100%;
  display: flex;
  position: relative;
  gap: 0.4em;
}

.b {
  width: calc( (100% - 1.5em) / 4);
  background: red;
  position: relative;
}
<div id="w">
  <div class="b">3</div>
  <div class="b">3</div>
  <div class="b">3</div>
</div>

▲ 0

Попробуйте такое flex: 0 1 25%;

▲ 0

Полагаю, Вы хотели увидеть что-то подобное

#p {
  display: flex;
  width: 100%;
}

#p .o {
  flex-basis: 23.5%;
  margin-right: 2%;
  max-width: 23.5%;
  background-color: violet;
}
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <title>block</title>
</head>

<body>
  <div id="p">
    <div class="o">1</div>
    <div class="o">2</div>
    <div class="o">3</div>
  </div>
</body>

</html>

▲ 0

Спасибо всем за ответы. В процессе условия для расстановки и количество элементов поменялись и в итоге это выглядит так:

.o {
   padding: 30px;   
   flex: 1 1 calc(100% / 3);
   box-sizing: border-box;
   }
.item7 {
flex: 0 1 calc(100% / 3);
}
<div class="p">
    <div class="o">1</div>
    <div class="o">2</div>
    <div class="o">3</div>
    <div class="o">4</div>
    <div class="o">5</div>
    <div class="o">6</div>
    <div class="o item7 ">7</div> 
  </div>