Создание специальной сетки с использованием только гибких функций

Question

Мне нужно создать макет, который будет выглядеть так:

Я подготовил код вроде:

.red {
  width: 50px;
  height: 50px;
  background-color: red;
  margin-right: 20px;
}

.yellow {
  width: 50px;
  height: 50px;
  background-color: yellow;
}

.blue {
  width: 50px;
  height: 50px;
  background-color: blue;
  justify-self: end;
}

.wrapper {
  display: flex;
  background-color: green;
  width: 100%;
}

<div class="wrapper">
  <div class="red"> </div>
  <div class="yellow"> </div>
  <div class="blue"> </div>
</div>

Но этот синий div не хочет выравниваться по правой стороне:

Здесь вы можете получить предварительный просмотр: https://jsfiddle.net/ncszob80/17/

Я знаю, что могу исправить это в стиле margin-left: auto css для синего div.Но мне интересно, есть ли какая-то возможность создания такого макета только с помощью функциональности flex.

Итак:

• мы можем использовать только функции flex

• должен быть некоторый запас между красным div и желтым

• синий div должен быть в самом правом

Как этого добиться?

Answer 1

Вот еще одна идея, если вы не хотите учитывать margin:auto и без изменения html, но, как сказано в принятом ответе, маржа составляет функция flexbox:

.red {
  width: 50px;
  height: 50px;
  background-color: red;
  margin-right: 20px;
}

.yellow {
  width: 50px;
  height: 50px;
  background-color: yellow;
}

.blue {
  width: 50px;
  height: 50px;
  background-color: blue;
  order:1; /*make the blue the last element*/
}

.wrapper {
  display: flex;
  background-color: green;
  width: 100%;
}
.wrapper:after {
  content:"";
  flex-grow:1; /*make this hidden element to take all the space and push the blue*/
}

<div class="wrapper">
  <div class="red"> </div>
  <div class="yellow"> </div>
  <div class="blue"> </div>
</div>

Answer 2

Вы писали:

Я знаю, что могу исправить это с помощью стиля margin-left: auto css для синего div.Но мне интересно, есть ли возможность создания такого макета только с помощью функциональности flex.

На самом деле, margin-left: auto - это функциональность flex.Это особенность гибкого макета.

Из спецификации flexbox:

• § 8.1.Выравнивание с auto полями

См. Также:

• В CSS Flexbox, почему отсутствуют "justify-items" и "justify-свойства "self"?

В общем, просто используйте поле auto.Это самое чистое, простое и эффективное решение.

Answer 3

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

.wrapper {
  display: flex;
  background-color: green;
  width: 100%;
}

.red {
  width: 50px;
  height: 50px;
  background-color: red;
  margin-right: 20px;
}

.yellow {
  width: 50px;
  height: 50px;
  background-color: yellow;
}

.blueWrap {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: flex-end;
}

.blue {
  width: 50px;
  height: 50px;
  background-color: blue;
}

<div class="wrapper">
  <div class="red"> </div>
  <div class="yellow"> </div>
  <div class="blueWrap">
    <div class="blue"></div>
  </div>
</div>

Answer 4

Помимо изменения структуры DOM или использования margin-left: auto fix CSS Grid является фантастическим для этого типа макета.Я знаю, что вы сказали только Flexbox, но если вам не нужны какие-либо другие решения, Grid может быть хорошей альтернативой.Вы можете смешивать функциональность Flex в сетке, а также для более точного управления.Я делаю это регулярно, чтобы получить нужный мне макет, и он работает хорошо!

Удачного кодирования!

Answer 5

Моим лучшим решением для вас было бы немного изменить структуру DOM - но она выполняет то, что вы ищете:

.left {
  display: flex;
}
.red {
  width: 50px;
  height: 50px;
  background-color: red;
  margin-right: 20px;
}

.yellow {
  width: 50px;
  height: 50px;
  background-color: yellow;
}

.blue {
  width: 50px;
  height: 50px;
  background-color: blue;
}

.wrapper {
  display: flex;
  background-color: green;
  width: 100%;
  justify-content: space-between;
}

<div class="wrapper">
  <div class="left">
    <div class="red"> </div>
    <div class="yellow"> </div>
    </div>
  <div class="right">
    <div class="blue"> </div>
    </div>
</div>

По сути, я упаковал ваши коробки в .left и .right, а затем изменил .wrapper на justify-content: space-between так, чтобы .rightкоробка сдвинута вправо.Затем мы делаем .left { display: flex; }, чтобы исправить проблему с этими блоками, не делая этого, или изменяя элементы внутри на display: inline; или display: inline-block;.