Flexbox: пока группа элементов находится в самом центре страницы, поместите один элемент внизу

Question

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

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

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.page-wrapper {
  min-height: 100%;
}
a.inherit {
  color: inherit;
}
a.nounderline, a.nounderlie:hover {
  text-decoration: none;
}
.page-wrapper {
  min-height: 100%;
}
.hero {
  height: 100vh;
  overflow-y: hidden;
  padding-top: 3rem;
  padding-bottom: 3rem;
  justify-content: center;
  align-items: center;
}
.hero img {
  width: 100%;
}
.hero.type-text h1 {
  color: #000;
}
.hero.hero-short {
  max-height: 768px;
}
section.type-text h3 {
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 0;
}
section.type-text h4 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 0;
  margin-top: 1.5rem;
}
section.type-text p {
  font-weight: 500;
}
.allcases {
  text-align: center;
  font-weight: 700;
  margin-top: auto;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-wrapper">
  <section class="container d-flex hero type-text">
    <div>
      <h4 class="text-center m-0">Next item</h4>
      <h1 class="display-1 text-center">
        <a class="inherit nounderlie" href="#">Lorem</a>
      </h1>
    </div>

    <p class="allcases">
      <a class="inherit" href="#">See all items</a>
    </p>
  </section>
</div>

«Просмотреть все элементы» остается в самом низу (благодаря margin-top: auto), но оно не центрировано .Изменение направления flex от строки к столбцу портит весь макет, так что это не тот путь.

Что такое жизнеспособное решение?

Answer 1

Ответ довольно прост.Измените flex-flow вашего контейнера на столбец.

flex-flow:column; 

Теперь у вас есть два flex-элемента: div, содержащий ваш заголовок и другие ссылки, и нижний колонтитул p.Первый трюк - заставить ваш div расти, в то время как p-тег остается прежним.Поэтому присвойте

flex: 1 auto; 

вашему div и

flex: 0 auto; 

вашему p-тегу.После этого вы также должны добавить

display: flex; 
justify-content: center; 
flex-flow: column; 

в ваш div.Делая это сам flex-box.Ваш p-тег не требует большего внимания, вы также можете удалить ненужные поля.

Это должно сработать.

Answer 2

Вам нужно разрешить перенос и установить ширину в div, предположим, что он стоит сверху

, чтобы разрешить перенос, используйте класс

 <section class="container d-flex hero type-text flex-wrap">

для di, вы можете сделать:

.hero>div {
  width:100%;
}

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.page-wrapper {
  min-height: 100%;
}
a.inherit {
  color: inherit;
}
a.nounderline, a.nounderlie:hover {
  text-decoration: none;
}

.hero {
  height: 100vh;
  overflow-y: hidden;
  padding-top: 3rem;
  padding-bottom: 3rem;
  justify-content: center;
  align-items: center;
}
.hero>div {
  width:100%;
}
.hero img {
  width: 100%;
}
.hero.type-text h1 {
  color: #000;
}
.hero.hero-short {
  max-height: 768px;
}
section.type-text h3 {
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 0;
}
section.type-text h4 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 0;
  margin-top: 1.5rem;
}
section.type-text p {
  font-weight: 500;
}
.allcases {
  text-align: center;
  font-weight: 700;
  margin: auto auto 0 auto;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-wrapper">
  <section class="container d-flex hero type-text flex-wrap">
    <div>
      <h4 class="text-center m-0">Next item</h4>
      <h1 class="display-1 text-center">
        <a class="inherit nounderlie" href="#">Lorem</a>
      </h1>
    </div>

    <p class="allcases">
      <a class="inherit" href="#">See all items</a>
    </p>
  </section>
</div>

Другой вариант - использовать flex-column класс

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.page-wrapper {
  min-height: 100%;
}
a.inherit {
  color: inherit;
}
a.nounderline, a.nounderlie:hover {
  text-decoration: none;
}

.hero {
  height: 100vh;
  overflow-y: hidden;
  padding-top: 3rem;
  padding-bottom: 3rem;
  justify-content: center;
  align-items: center;
}

.hero img {
  width: 100%;
}
.hero.type-text h1 {
  color: #000;
}
.hero.hero-short {
  max-height: 768px;
}
section.type-text h3 {
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 0;
}
section.type-text h4 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 0;
  margin-top: 1.5rem;
}
section.type-text p {
  font-weight: 500;
}
.allcases {
  text-align: center;
  font-weight: 700;
  margin: auto auto 0 auto;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-wrapper">
  <section class="container d-flex flex-column hero type-text ">
    <div>
      <h4 class="text-center m-0">Next item</h4>
      <h1 class="display-1 text-center">
        <a class="inherit nounderlie" href="#">Lorem</a>
      </h1>
    </div>

    <p class="allcases">
      <a class="inherit" href="#">See all items</a>
    </p>
  </section>
</div>

в обоих примерах поле всех случаев сбрасывается на:

  margin: auto auto 0 auto;

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

Answer 3

Вы должны использовать flex-direction: column для этого.Это идеальный вариант использования.Использование макета row для достижения того, что вы хотите, т.е. горизонтальное центрирование элементов, нежизнеспособно.Вам лучше не использовать flex, а вместо этого использовать поля.Если вы действительно хотите использовать flex-direction: row, то единственное решение, которое я могу придумать, это использовать position: absolute или отрицательную маржу.Хотя я бы не рекомендовал это, поскольку то, что вы хотите, может быть легко достигнуто с помощью flex-direction: column.

. Вот результат, которого я достиг, просто изменив 2 свойства.

Обновление стиля до

// Only added flex-direction: column to this
.hero {
  height: 100vh;
  overflow-y: hidden;
  padding-top: 3rem;
  padding-bottom: 3rem;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

// This is to target the first div, i.e. the div that contains next item and Lorem, since the div doesn't have a class.
.hero > div { 
  margin-top: auto;
}