Flex-box как игнорироваться родительский justify-content?

Question

Здесь flex контейнер центрирует все свои элементы по центру, но скажите пожалуйста, как "2" заставить расположиться в левом краю страницы (контейнер на всю ширину, но элемент в левом краю)?

<div style='display: flex; align-items: center; justify-content: center;   height: 100%'>

  <div style='width: 30px; height: 30px; background: red'>2</div>
  <div style='width: 30px; height: 30px; background: red'>1</div>
  <div style='width: 30px; height: 30px; background: red'>1</div>
  <div style='width: 30px; height: 30px; background: red'>1</div>
  <div style='width: 30px; height: 30px; background: red'>1</div>
  <div style='width: 30px; height: 30px; background: red'>1</div>
</div>

Как должно быть:

Answer 1

Для того что бы "переписать" положение для определенного элемента можно воспользоваться свойством margin (c нужной стороны) и задать ему значение auto, а для того что бы сохранить центр достаточно скрыть последний dummy-блок:

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 30px 0;
}

.wrapper > div {
  width: 30px; 
  height: 30px; 
  background: red;
}

.wrapper.one > div:nth-child(1), .wrapper.two > div:nth-child(1), .wrapper.four > div:nth-child(1) {
  margin-right: auto;
}

.wrapper.one > div:last-child, .wrapper.three > div:last-child, .wrapper.four > div:last-child {
  margin-left: auto;
}

.wrapper.one > div:last-child {
  visibility: hidden;
}

<div class="wrapper one">
  <div>1</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>0</div>
</div>

<hr>

<div class="wrapper two">
  <div>1</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
</div>

<hr>

<div class="wrapper three">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>2</div>
</div>

<hr>

<div class="wrapper four">
  <div>1</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>3</div>
</div>

БЛОГ НА HUSL

Flex-box как игнорироваться родительский justify-content?

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