2

Здесь 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>

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

введите сюда описание изображения

2

1 ответ 1

3

Для того что бы "переписать" положение для определенного элемента можно воспользоваться свойством 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:first-child, .wrapper.two > div:first-child, .wrapper.four > div:first-child {
  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>

2
  • дополнительный элемент 0 не нужен
    – Grundy
    4 авг 2020 в 22:32
  • 1
    :nth-child(1) == :first-child
    – Grundy
    4 авг 2020 в 22:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.