Пустое пространство для ширины одного столбца с flexbox

Question

У меня есть родительский div и два div внутри.Я хочу сохранить определенные размеры (столбцы) для этих дочерних элементов.Это возможно во flexbox?Я борюсь с этим.

<div class="parent"> 
   <div class="child"></div>
   <div class="child"></div>
</div>

Первый дочерний элемент должен иметь ширину 1 столбца, второй дочерний элемент шириной 2 столбца.На правой стороне я хочу иметь пустое пространство шириной в 1 столбец (поэтому родительский div должен вести себя так, как будто он имеет 4 столбца).

Answer 1

Вот метод, использующий flex-basis для установки гибких элементов на определенный процент ширины.

В этом примере два гибких элемента не могут ни сжать , ни расти . Разделив 100% ширину на четыре столбца, каждый столбец должен составлять 25% от родительской ширины. Первый элемент составляет 25%, а второй - 50% (ширина двух столбцов), оставляя 25% свободного пространства справа.

.parent {
  display: flex;
  min-height: 10em;
  border: 1px solid #CCC;
}

.child {
  outline: 1px solid black;
  background-color: lightgray;
}

.child:nth-child(1) {
  flex: 0 0 25%
}

.child:nth-child(2) {
  flex: 0 0 50%;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

---

EDIT

Я заметил, что вам нужно пространство между каждым столбцом. Одним из способов является добавление некоторого процента правильной маржи для сгибания элементов и вычитание этого процента из основы каждого элемента.

.parent {
  display: flex;
  min-height: 10em;
  border: 1px solid #CCC;
}

.child {
  outline: 1px solid black;
  background-color: lightgray;
  margin-right: 3%;
}

.child:nth-child(1) {
  flex: 0 0 22%;
}

.child:nth-child(2) {
  flex: 0 0 47%;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

Если вы предпочитаете, чтобы расстояние между столбцами не было в процентах, вы можете использовать calc(), чтобы вычислить соответствующую гибкую основу. Однако обратите внимание, что на момент написания этой статьи это не поддерживается в IE или Edge.

IE & Edge, как сообщается, не поддерживает calc внутри 'flex'. (Не проверено на старых версиях) Этот пример не работает: flex: 1 1 calc (50% - 20px);
caniuse.com

.parent {
  display: flex;
  min-height: 10em;
  border: 1px solid #CCC;
}

.child {
  outline: 1px solid black;
  background-color: lightgray;
  margin-right: 0.5em;
}

.child:nth-child(1) {
  flex: 0 0 calc(25% - 0.5em);
}

.child:nth-child(2) {
  flex: 0 0 calc(50% - 0.5em);
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

Answer 2

Кажется, никто не предлагал установить ширину родительского элемента:

.parent {
 width: 75%;
 display: flex;
}

.child {
  flex: 150;
  height: 2rem;
  border: 1px solid #000;
}

.child:first-child {
 flex: 75;
}

<div class="parent"> 
   <div class="child"></div>
   <div class="child"></div>
</div>

РЕДАКТИРОВАТЬ :

И, кроме того, вы хотите, чтобы ваш второй ребенок был в два раза больше вашего первого,поэтому дайте вашему второму ребенку значение flex того, что в два раза больше вашего первого - я использовал 1 и 2, но вы могли бы использовать flex: 75 и flex: 150 для достижения того же эффекта.

Answer 3

Этого можно добиться с помощью flexbox, используя псевдоэлемент , который занимает четвертый столбец:

• добавить flex: 1 к первому child и псевдоэлементу ,

• добавить flex: 2 ко второму child.

См. Демо ниже:

.parent {
  display: flex;
  height: 100px;
  border: 1px solid #ddd;
}

.child {
  border: 1px solid cadetblue;
  background: lightblue;
  flex: 1;
}

.child + .child {
  flex: 2;
}

.parent:after {
  content: '';
  flex: 1;
}

<div class="parent"> 
   <div class="child"></div>
   <div class="child"></div>
 </div>

И более простое решение с использованием макета CSS Grid - установите макет с 4 столбцами и span второй элемент child над двумя столбцами:

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 100px;
  border: 1px solid #ddd;
}

.child {
  border: 1px solid cadetblue;
  background: lightblue;
}

.child + .child {
  grid-column: span 2;
}

<div class="parent"> 
   <div class="child"></div>
   <div class="child"></div>
 </div>