Контейнер Flexbox с дочерними элементами, у которых есть заданное максимальное значение, но которые по-прежнему ведут себя как в flexBox по оси X - PullRequest
Новая
       51

Контейнер Flexbox с дочерними элементами, у которых есть заданное максимальное значение, но которые по-прежнему ведут себя как в flexBox по оси X

0 голосов
/ 05 августа 2020

HTML

<div class="flexContainer">
  <div class="booking blue"></div>
  <div class="booking green"></div>
  <div class="booking purple"></div>
</div>

CSS

.flexContainer {
  display: flex;
  width: 300px;
  background-color: red;
  height: 100vh;
}

.booking {
  flex: 1;
  height: 100px;
  position: relative;
}

.green {
  background-color: green;
  top: 50%;
}

.blue {
  background-color: blue;
}

.purple {
      background-color: purple;
      top: 50%;
    }

https://codepen.io/s_berg/pen/zYqYaWW

Цель из примера выпадающего списка для синее поле должно иметь ширину 100% (красного поля), а пурпурное и зеленое поле должны быть по 50% ширины от красного контейнера. Атм каждый из них занимает 1/3 ширины.

Я в основном хочу получить поведение гибкого бокса вдоль оси X, так как дети занимают 100% ширины, если они одни и разделяют пространство и возьмите ширину 50%, если они имеют ту же позицию, что и другой дочерний элемент по оси Y.

Однако я хочу установить определенное верхнее значение для каждого поля, как в примере с ручкой, за исключением того, что я хочу, чтобы поля чтобы взять 100% ширину, так как они одни в этой области по оси Y. Можно ли этого добиться с помощью только CSS и HTML или мне нужно задействовать JS для этого?

1 Ответ

2 голосов
/ 05 августа 2020

Вы можете использовать flex-basis для контейнеров.

Если присутствуют синий, зеленый и фиолетовый: 

.flexContainer {
  display: flex;
  width: 300px;
  background-color: red;
  height: 100vh;
  flex-wrap: wrap;
}

.booking {
  flex: 1;
  height: 100px;
  position: relative;
}

.green {
  flex-basis: 50%;
  top: calc(50% - 100vh / 2);
  background-color: green;
}

.blue {
  flex-basis: 100%;
  background-color: blue;
}

.purple {
  flex-basis: 50%;
  top: calc(50% - 100vh / 2);
  background-color: purple;
}
 <div class="flexContainer">
  <div class="booking blue"></div>
    <div class="booking green"></div>
   <div class="booking purple"></div>
</div>

Если присутствуют только синий и зеленый : (то же самое css, только что удалили фиолетовый div из html) 

.flexContainer {
  display: flex;
  width: 300px;
  background-color: red;
  height: 100vh;
  flex-wrap: wrap;
}

.booking {
  flex: 1;
  height: 100px;
  position: relative;
}

.green {
  flex-basis: 50%;
  top: calc(50% - 100vh / 2);
  background-color: green;
}

.blue {
  flex-basis: 100%;
  background-color: blue;
}

.purple {
  flex-basis: 50%;
  top: calc(50% - 100vh / 2);
  background-color: purple;
}
 <div class="flexContainer">
  <div class="booking blue"></div>
    <div class="booking green"></div>
</div>

Примечание: проверьте это на всей странице, красный контейнер есть.

...