Как расположить внутри flex-box?

Question

Я использую flex box и хочу выровнять кнопку внизу.

Я использую абсолютное положение и нижнее: 0, но браузер игнорирует его.

<ul class="box">
   <li><div>this has <br> more <br> <button>one</button></div></li>
   <li><div>this has <br> more <br> content <br> <button>one</button></div></li>    
   <li>d<div><button>one</button></div></li>
</ul>


ul {
    /* basic styling */
    width: 100%;
    height: 100px;
    border: 1px solid #555;

    /* flexbox setup */
    display: -webkit-box;
    -webkit-box-orient: horizontal;

    display: -moz-box;
    -moz-box-orient: horizontal;

    display: box;
    box-orient: horizontal;
}

.box > li {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    margin: 0 1px;
    padding-bottom: 20px;
    border-bottom: 20px solid red;
    position: relative;
}
button {
    position: absolute;   
    bottom: 0;

}
/* our colors */
.box > li:nth-child(1){ background : #FCC; }
.box > li:nth-child(2){ background : #CFC; }
.box > li:nth-child(3){ background : #CCF; }

Я могу использовать float и не использовать flex-box, но я хочу посмотреть, есть ли решение для этого с помощью flex-box.

демо здесь: http://jsfiddle.net/NJAAa/

Answer 1

Рабочая версия WebKit: http://jsfiddle.net/LLtmE/

Короче говоря: вам нужно поместить свой текстовый контекст в отдельный div;сделайте каждый li flexbox и установите box-orient на vertical.И удалите все это абсолютное / относительное позиционирование - это больше не нужно.

Answer 2

Проверьте это на codepen.Я надеюсь, что это поможет, и это еще не поздно:)

ul {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 80%;
  margin: 10% auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
  color: #b2b2b2;
  box-shadow: 2px 2px 3px #666666;
}

ul > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-preferred-size: 33.33%;
      flex-basis: 33.33%;
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  text-align: center;
}

ul > li > button {
  margin: 20px;
  padding: 5px 15px;
  cursor: pointer;
}
ul > li > button:hover {
  color: whitesmoke;
  background-color: maroon;
}

/* our colors */
ul > li:nth-child(1) {
  background: #000000;
}

ul > li:nth-child(2) {
  background: #191919;
}

ul > li:nth-child(3) {
  background: #323232;
}

И это может быть полезным ....

Answer 3

Причина в том, что гибкий контейнер не имеет определенной ширины или высоты, так как он гибкий с его содержимым.

Чтобы убедиться в моем утверждении, попробуйте с левой или верхней, оно будет реагировать на ваши данные. Если вы попытаетесь с правым или нижним, вы не можете увидеть реакцию. Так как во флекс-контейнере оригинальная ширина / высота очень мала.