Как выровнять элементы: центр И выровнять себя: растянуть?

Question

У меня есть элемент, который я бы хотел центрировать (поперек оси), но также «увеличивать» до номинального размера даже при слишком малом содержании, НО ТАКЖЕ «сжиматься», когда ширина страницы становится меньше 350 пикселейширокий.

HTML

<div class="parent">
  <div class="child">
    Some content
  </div>
</div>

SCSS

.parent {
  display: flex;
  flex-direction: column;
  align-items: center;

  .child {
    max-width: 350px; 
    align-self: stretch;
  }
}

Добавление align-self: stretch; к .child делает его шириной 350 пикселей, но, похоже, отрицаетalign-items: center; в .parent

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

Fiddle: https://jsfiddle.net/1uqpxn8L/1/

Answer 1

ОБНОВЛЕНО

Я думаю, что вы должны использовать justify-content, чтобы выровнять ребенка по центру.

Обратите внимание, когда вы применяете свойство display: flex к родителю, вы должны применить flex свойство к ребенку.

.parent {
  background: yellow;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.parent .child {
  background: black;
  color: white;
  text-align: center;
  flex: 1 1 auto;
  width: 100%;
  max-width: 350px;
}

<div class="parent">
  <div class="child">
    I should be 350px wide
    <br> and centered in the yellow
    <br> unless the page gets smaller,
    <br> in which case I should have
    <br> 10px padding on either side.
  </div>
</div>

Пожалуйста, посмотрите результат здесь, надеюсь, это то, что вы имеете в виду: https://jsfiddle.net/1uqpxn8L/11/

Answer 2

Вам просто нужно удалить свойство flex-direction .Тогда это работает, как вы ожидали.Но будет проблема, если вы хотите отобразить дочерние элементы в виде столбцов.Проблема сжатия возникает со свойством flex-direction или flex-flow: column , как я проверил.

Answer 3

Вы можете сделать что-то вроде этого.

HTML

<div class="parent">
  <div class="child">
    Some content
  </div>
</div>

SCSS

.parent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  .child {
    width: 350px;
    @media(max-width: 350px) {
       width: 100%;
    }
  }
}

.parent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background-color: red;
}

.child {
  width: 350px;
  background-color: yellow;
}

@media(max-width: 350px) {
  .child { width: 100%; }
}

<div class="parent">
  <div class="child">
    Some content
  </div>
</div>

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