将单个元素移动到弹性容器的末尾

Question

我认为我可以将这个单个按钮移动到弹性框的末尾。

我已将父级设置为 display: flex; 然后我认为我可以定位一个元素并将其固定到容器底部 align-self: flex-end;

没用。这是我的笔：My Codepen illustrating the issue

 <div class="row services">
  <div class="small-3 panel columns service">
    <i class="fa fa-thumbs-o-up"></i>
    <h3>SUSPENDISSE</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, ad?</p>
    <div class="button">Read More</div>
  </div>
  <div class="small-3 panel columns service">
    <i class="fa fa-key"></i>
    <h3>MAECENAS</h3><p>Porro quibusdam nostrum eaque, quasi laudantium delectus quaerat cumque, quos.</p>
    <div class="button">Read More</div>
  </div>
  <div class="small-3 panel columns service">
    <i class="fa fa-flag"></i>
    <h3>ALIQUAM</h3><p>Iste architecto omnis, esse facere quod ratione, officia veritatis fugit.</p>
    <div class="button">Read More</div>
  </div>
  <div class="small-3 panel columns service">
    <i class="fa fa-flask"></i>
    <h3>HABITASSE</h3><p>Ducimus voluptates assumenda, illum adipisci sed quaerat est ipsum nisi.</p>
    <div class="button">Read More</div>
  </div>
</div>

.services {
  display: flex;

}
.service {
  flex-direction: column;
}
.button {
  align-self: flex-end;
}

Answer 1

align-self 仅适用于 flex 父元素的直接子元素，因此：

使用 display: flex 使 .service 成为弹性父级并设置 flex-wrap: wrap
将按钮居中 margin: 0 auto

工作示例

还有available as a Codepen.

.services {
  display: flex;
}
.service {
  display: flex;
  flex-wrap: wrap;
}
.button {
  align-self: flex-end;
  margin: 0 auto !important; 
  /* !important used for this example only to override foundation.css*/
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/css/foundation.min.css" rel="stylesheet"/>

<div class="row services">
  <div class="small-3 panel columns service">
    <i class="fa fa-thumbs-o-up"></i>
    <h3>SUSPENDISSE</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, ad?</p>
    <div class="button">Read More</div>
  </div>
  <div class="small-3 panel columns service">
    <i class="fa fa-key"></i>
    <h3>MAECENAS</h3><p>Porro quibusdam nostrum eaque, quasi laudantium delectus quaerat cumque, quos.</p>
    <div class="button">Read More</div>
  </div>
  <div class="small-3 panel columns service">
    <i class="fa fa-flag"></i>
    <h3>ALIQUAM</h3><p>Iste architecto omnis, esse facere quod ratione, officia veritatis fugit.</p>
    <div class="button">Read More</div>
  </div>
  <div class="small-3 panel columns service">
    <i class="fa fa-flask"></i>
    <h3>HABITASSE</h3><p>Ducimus voluptates assumenda, illum adipisci sed quaerat est ipsum nisi.</p>
    <div class="button">Read More</div>
  </div>
</div>

将单个元素移动到弹性容器的末尾

Move single element to the end of a flex container

css

flexbox

zurb-foundation

工作示例