Css flex - один элемент справа, другой по центру слева

Question

Css flex - один элемент справа, другой по центру слева

1

Я новичок в css и даже новичок в flex. Я не мог найти ответ, поэтому я начал новый. У меня есть следующий контейнер и элемент:

  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .item {
    color: rgb(51, 51, 51);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

Таким образом, я получаю 2 предмета с обеих сторон (один слева и один справа). Я хотел бы знать, как сделать следующее:

Левый элемент будет слева, как и раньше. С точки она заканчивается, до момента, когда контейнер заканчивается - я с правильным элементом, который должен быть центрирован.
Левый элемент будет слева, как и раньше. Правильный элемент будет 10px слева от правого конца контейнера.

Благодарю!

OferP 25 май 2017, в 17:54

Источник

4

Не могли бы вы предоставить немного HTML и, возможно, картину того, чего вы хотите достичь? Это поможет нам определить причину проблемы.
Richard Parnaby-King 25 май 2017, в 15:17
0

Вопросы, требующие помощи (« почему этот код не работает или как заставить этот код работать? ») Должны включать желаемое поведение, конкретную проблему или ошибку и самый короткий код, необходимый для его воспроизведения в самом вопросе . Вопросы без четкой постановки проблемы бесполезны для других читателей. См .: Как создать минимальный, полный и проверяемый пример .
LGSon 25 май 2017, в 18:52

Теги:

html

css

css3

flexbox

1 ответ

Ещё вопросы

Не могли бы вы предоставить немного HTML и, возможно, картину того, чего вы хотите достичь? Это поможет нам определить причину проблемы.
Вопросы, требующие помощи (« почему этот код не работает или как заставить этот код работать? ») Должны включать желаемое поведение, конкретную проблему или ошибку и самый короткий код, необходимый для его воспроизведения в самом вопросе . Вопросы без четкой постановки проблемы бесполезны для других читателей. См .: Как создать минимальный, полный и проверяемый пример .

staypuftman · Accepted Answer · 2017-05-25T13-20-00.000Z

Решение этой проблемы - использование вложенных flexboxes. Избавьтесь от display: block; on .item - вы не можете смешивать правила гибкого и блочного отображения, подобные этому.

Что вы хотите сделать, так это настроить ряд контейнеров:

один гибкий контейнер верхнего уровня
два гибких контейнера одинакового размера внутри контейнера верхнего уровня

Разметка будет выглядеть так:

<main class="container">
  <section class="left-container">
    <div class="item"></div>
  </section>
  <section class="right-container">
    <div class="item"></div>
  </section>
</main>

В слое CSS вы предоставляете .container верхнего уровня, а затем justify-content: space-between который толкает контейнеры по сторонам.

.container {
  display: flex;
  justify-content: space-between;
}

В двух вложенных контейнерах вам нужно сделать их обоих display: flex; также. Теперь вы можете управлять позиционированием ваших элементов .item как вы хотите. align-items: center управляет вертикальной осью, поэтому .left-container получает только это позиционирование, в то время как правый контейнер получает justify-content: center; для управления вертикальным выравниванием.

.left-container {
  background-color: darkgray;
  display: flex;
  align-items: center;
  height: 200px;
  width: 50%;
}

.right-container {
  background-color: lightgray;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  width: 50%;
}

Стилизация предмета довольно проста - я просто дал высоту и ширину для демонстрационных целей. Они не нужны. Если вы хотите сделать точные настройки, используйте margin на .item чтобы немного оттолкнуть эти стандарты.

.item {
  background-color: red;
  height: 100px;
  width: 100px;
}

Codepen: https://codepen.io/staypuftman/pen/PmLyNM

Спасибо за очень подробный ответ! было действительно полезно.
Спасибо - рад, что это помогло. Если ответ решил вашу проблему, пометьте его как принятый, чтобы другие могли следовать решению.