Контактный элемент (гибкий элемент) на дно контейнера

Ответ 1

Обновленный ответ

С помощью автоматического поля вы можете группировать или упаковывать элементы гибки вместе без дополнительной разметки или перемещать элементы вокруг, применяя маржу в противоположном направлении ( как видно из моего первоначального ответа). В этом случае просто установите margin: auto в форме; это сообщит контейнеру гибкости, чтобы центрировать форму в пределах оставшегося свободного пространства:

.flex-container {
  display: flex;
  flex-direction: column;
  text-align: center;
  height: 150px;
  width: 400px;
  background: #e7e7e7;
}
 
form {
  margin: auto;
}

p {
  margin: 0;
}

<div class="flex-container">
  <form>
    <input type="text" />
    <button type="submit">submit</button>
  </form>
  <p class="bot">
    Lorem ipsum dolor sit amet
  </p>
</div>

Ответ 2

Вы можете создать псевдоэлемент, используя :before в контейнере, чтобы сделать его как три раздела и использовать justify-content: space-between;

* {
    margin: 0;
}
.container {
    background-color: #eee;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    text-align: center;
}
.container:before {
    content: '';
}

<div class="container">
    <form><input type="text" /> <button type="submit">submit</button></form>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quae quisquam neque cupiditate adipisci magnam facilis, distinctio suscipit possimus hic voluptatibus in illo est id alias unde sapiente ab eius.</p>
</div>

Ответ 3

Здесь проблема:

Вы установили flex-direction в column. Это означает, что вы переместили главную ось на вертикальную, а поперечную ось на горизонтальную -.

Свойства align-* работают вдоль поперечной оси. Поэтому, когда вы говорите .bot align-self: flex-end, вы на самом деле говорите ему, чтобы он сдвигался вправо, а не вниз.

Но в этом случае он не сдвинется вправо, потому что элемент занимает всю ширину контейнера и, следовательно, не имеет места для перемещения. Однако, если вы ограничите его ширину... http://jsfiddle.net/t7hap87o/

Чтобы привязать <copy> к нижней части экрана, flexbox имеет немного ограничения: нет свойства, похожего на align-self для главной оси.

Есть несколько других вариантов, чтобы выполнить работу. Вы можете вложить flexboxes в текущий контейнер или удалить .bot из этого контейнера и поместить его в другой.

Flexbox также допускает абсолютно позиционированных гибких детей. Попробуйте следующее:

.container {
    position: relative; /* establish nearest positioned ancestor for abs. positioning */
}

.bot {
    position: absolute;
    bottom: 0;
}

DEMO

Примечание. A margin-top: auto в .bot не будет работать в текущей структуре HTML. Фактически, это будет привязать целевой элемент к нижней части. Но он также будет перемещать центрированный элемент до самого верха.

Ответ 4

align-self: flex-end; не имеет требуемого эффекта, потому что дети гибкого диска выстроились в виде столбцов.

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

• переместите элемент нижнего колонтитула из .container

  <div class="container"></div>
  <p class="bot"></p>
  

• дайте телу (или другую обертку, если требуется) display: flex, чтобы .container и нижний колонтитул были гибкими детьми (братьями и сестрами).

• дайте .container свойство flex flex: 1 1 100%;. Это приведет к тому, что он будет расти и сокращаться от своего первоначального значения в 100%. Нижний колонтитул сдвигается вниз, но его высота сохраняется, когда контейнер сжимается.

• дает нижнему слою свойство flex flex: 1 1 auto. Теперь это будет сдвигаться вниз, но увеличит высоту с большим количеством содержимого.

Подробнее о свойствах flex в MDN.

Пример

* {
  margin: 0;
  padding: 0;

}
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}
.container {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: #EEE;
}
.bot {
  flex: 1 1 auto;
  text-align: center;
  background: #EEE;
  padding: 1em;
}

<div class="container">
  <form>
    <input type="text" />
    <button type="submit">submit</button>
  </form>
</div>
<p class="bot">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quae quisquam neque cupiditate adipisci magnam facilis, distinctio suscipit possimus hic voluptatibus in illo est id alias unde sapiente ab eius.</p>

Ответ 5

Измените flex-direction на column, установите один из контейнеров в width: 100% и используйте flex-wrap: wrap для достижения этого.

Что-то вроде этого (и оно будет работать в Firefox и IE 10+ с префиксами поставщиков):

.container {
  background-color: #333;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
}

.footer {
  width: 100px;
  height: 20px;
  margin-top: -20px; /* set the margin top to negative what the 
                        height is so the form is perfectly centered */
  background-color: #900;
  color: #fff;
  text-align: center;
}

.form-wrapper {
  width: 100%; /* needs to be 100% to force the items to wrap */
  height: 50px;
  background-color: #009;
  
  /* center the form inside the wrapper */
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="form-wrapper">
    <form>
      <input type="text">
      <button type="submit">submit</button>
    </form>
  </div>
  <div class="footer">footer content</div>
</div>