Кнопка закрепления внизу макета колонки flexbox, поле сверху: авто не работает - PullRequest
Новая
       14

Кнопка закрепления внизу макета колонки flexbox, поле сверху: авто не работает

3 голосов
/ 11 апреля 2019

Я новичок в flexbox и просто пытаюсь создать набор столбцов, которые будут иметь ту же ширину / высоту, что и столбец с наибольшим содержанием, и, похоже, эта часть работает правильно.Моя проблема пытается закрепить кнопку, чтобы выровнять по нижней части столбцов.

Я прочитал множество примеров использования margin-bottom для достижения этой цели, но у меня это не работает.Любая помощь приветствуется ... как видите, мои навыки в лучшем случае зачаточны.TIA 

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

.col {
  display: flex;
  flex-direction: column;
  width: 24%;
  border: 1px solid blue;
}

.list {
  flex: 1;
  padding: 10px;
}

.dir_button {
  border: none;
  outline: 0;
  padding: 8px;
  color: white;
  background-color: #956a51;
  text-align: center;
  cursor: pointer;
  width: 80%;
}

button.dir_button {
  margin-top: auto
}
<div class="columns">
  <div class="col">

    <div class="list">

      List item List itemList itemList item List item<br />

      <button type="button" class="dir_button">EMAIL</button>

    </div>
  </div>

  <div class="col">

    <div class="list"> List item List item<br> List item<br>
      <p> List item</p>
      <p>List item </p>
    </div>
  </div>

  <div class="col">

    <div class="list"> List item<br> List item<br> List item<br> List item<br>
      <p><br>
      </p>

    </div>
  </div>

  <div class="col">

    <div class="list"> List item List item<br> List item<br> List item<br>
      <p><br>
      </p>

    </div>
  </div>

</div>

1 Ответ

2 голосов
/ 11 апреля 2019

Make list a flexbox колонки - обратите внимание, что выравнивание полей вдоль оси flex * (по вертикали для flexbox колонки )работает только внутри flexbox, т. е. работает только на flex items - см. демонстрацию ниже: 

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

.col {
  display: flex;
  flex-direction: column;
  width: 24%;
  border: 1px solid blue;
}

.list {
  flex: 1;
  padding: 10px;
  display: flex; /* added */
  flex-direction: column; /* added */
}

.dir_button {
  border: none;
  outline: 0;
  padding: 8px;
  color: white;
  background-color: #956a51;
  text-align: center;
  cursor: pointer;
  width: 80%;
}

button.dir_button {
  margin-top: auto
}
<div class="columns">
  <div class="col">
    <div class="list">
      List item List itemList itemList item List item<br />
      <button type="button" class="dir_button">EMAIL</button>
    </div>
  </div>
  <div class="col">
    <div class="list"> List item List item<br> List item<br>
      <p> List item</p>
      <p>List item </p>
    </div>
  </div>
  <div class="col">
    <div class="list"> List item<br> List item<br> List item<br> List item<br>
      <p><br>
      </p>
    </div>
  </div>
  <div class="col">
    <div class="list"> List item List item<br> List item<br> List item<br>
      <p><br>
      </p>
    </div>
  </div>
</div>
...