ширина и центрирование с flexbox

Question

Я пытаюсь создать что-то вроде текстовой карусели . Вот набросок того, что я хочу сделать:

У меня есть карточка, и у меня их может быть несколько. Если есть один , мне просто нужно, чтобы он был точно центрирован как по вертикали, так и по горизонтали. Если есть два , попробуйте поставить их рядом друг с другом. Но , если на экране может быть больше, чем может поместиться, тогда я просто хочу, чтобы последний из них переполнился выключен

Все карты должны быть одинакового размера

Вот что я пробовал:

Во-первых Я пытался использовать align-items: flex-start http://jsfiddle.net/7pdmeh6v/

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

Во-вторых Я пытался использовать align-items: center http://jsfiddle.net/hr8ya9fg/

Логика работает , но Это отсекает верхнюю часть карт, а также не позволяет мне изменить размер карточек.

В-третьих Я удалил align-items и только что ушел justify-content: center http://jsfiddle.net/6hdzamq5/

, который работает с логикой, но все же не позволяет мне изменять размер карточек, а также я заметил, что он полностью игнорирует поля и отступы

TLDR: Похоже, что Flex-box не позволяет мне редактировать размер без каких-либо проблем.

Answer 1

Пара начальных наблюдений:

• В гибком контейнере в направлении строки, которым вы пользуетесь, свойства align-* управляют вертикальным, а не горизонтальным пространством и позиционированием. Поэтому я не уверен, как вы планируете решить проблему горизонтальной прокрутки, используя align-items.

• Начальное значение свойства flex-shrink равно 1. Это означает, что гибкие элементы будут сжиматься, чтобы оставаться в пределах контейнера. Поэтому, когда вы указываете, что ваши flex-элементы равны width: 500px, это не фиксированная длина. Предметы могут уменьшаться. Добавьте flex-shrink: 0, чтобы отключить изгиб и сделать элементы негибкими.

.container {
  display: flex;
  height: 240px;
  overflow: auto;
  margin: 10px;
  padding: 10px;
  border: 3px solid #000;
}

.box {
  width: 500px;
  flex-shrink: 0; /* toggle between 1 and 0 to see the differences */
  background-color: red;
  border: 1px solid #000;
  color: #000;
  padding: 10px;
}

.box {
  margin-left: auto;
  margin-right: auto;
}

.box ~ .box {
  margin-left: 10px;
}

<div class="container">
  <div class="box">
    <h2>Heading</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corporis et nesciunt esse quas eos illum, facere voluptate, iure officiis.
  </div>
</div>

<div class="container">
  <div class="box">
    <h2>Heading</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corporis et nesciunt esse quas eos illum, facere voluptate, iure officiis.
  </div>
  <div class="box">
    <h2>Heading</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corporis et nesciunt esse quas eos illum, facere voluptate, iure officiis.
  </div>
</div>

<div class="container">
  <div class="box">
    <h2>Heading</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corporis et nesciunt esse quas eos illum, facere voluptate, iure officiis.
  </div>
  <div class="box">
    <h2>Heading</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corporis et nesciunt esse quas eos illum, facere voluptate, iure officiis.
  </div>
  <div class="box">
    <h2>Heading</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corporis et nesciunt esse quas eos illum, facere voluptate, iure officiis.
  </div>
</div>

Вы заметите, что последнее поле / отступ рушится. Эта проблема объясняется здесь:

• Последнее свертывание полей / отступов во флексбоксе / макете сетки

Answer 2

Я бы посоветовал вам просмотреть свойство flex, которое является сокращением для свойств flex-shrink, flex-grow и flex-basis.Это поможет вам определить поведение ваших flex-элементов.(https://www.w3schools.com/cssref/css3_pr_flex.asp)

См. Фрагмент ниже:

#container {
  display: flex;
  margin: 10px;
  height: 180px;
  overflow: auto;
  border: 3px solid;
}

.box {
  flex: 0 0 320px;
  margin: 10px;
  background: #9a6;
  border: 1px solid;
  color: #000;
  padding: 10px;
}

<div id="container">
  <div class="box">
    <h2>Heading</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corporis et nesciunt esse quas eos illum, facere voluptate, iure officiis.
  </div>
  <div class="box">
    <h2>Heading</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corporis et nesciunt esse quas eos illum, facere voluptate, iure officiis.
  </div>
  <div class="box">
    <h2>Heading</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corporis et nesciunt esse quas eos illum, facere voluptate, iure officiis.
  </div>
</div>