将flex儿童对准顶部中心和底部中心,flexbox

时间:2016-10-17 07:16:46

标签: html css flexbox

我需要使用flexbox进行布局,其中2个flex-items,item-1应该在顶部中心对齐,而item-2应该在bottom-center。我无法弄清楚如何做到这一点。

见下面的代码:



.container{
  padding:10px;
  background: #fff;
  border-radius:5px;
  margin: 45px auto;
  box-shadow: 0 1.5px 0 0 rgba(0,0,0,0,1.1);
}

.item{
  color: #fff;
  padding: 15px;
  margin: 5px;
  background: #3db5da;
  border-radius: 3px;
}

.container{
  display: flex;
  min-height: 50vh;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.item{
  /*margin: auto;*/
  /*align-self: flex-start;*/
}

.item-4{
  align-self: flex-start;
}

<div class="container">
  <div class="item item-4">
    Flex Item
    <p>Vertical and horizontal align easy!</p>
  </div>
  <div class="item item-5"> bottom-center</div>
</div>
&#13;
&#13;
&#13;

这是小提琴链接:https://jsfiddle.net/q5cw4xvy/

2 个答案:

答案 0 :(得分:1)

你是说这样的意思吗? https://jsfiddle.net/da4jdff7/1/

.container{
display: flex;
min-height: 50vh;
align-items: center;
flex-direction: column;
}

.item-5 {
margin-top: auto
}

答案 1 :(得分:1)

您要找的是justify-content: space-between;将项目对齐到角落。 将其添加到.container,然后就可以了。

.container{
    /*justify-content: center;*/
    justify-content: space-between;
}

.item-4 align-self: flex-start;你有android { ... buildTypes { release { signingConfig signingConfigs.staging ... } } signingConfigs { defaultSignature { keyAlias 'default' keyPassword 'password' storeFile file('default-keystore.jks') storePassword 'password' } } } ,但你并不需要。{1}}只需删除它。

https://jsfiddle.net/q5cw4xvy/2/

为了更好地帮助您了解flexbox,有一个非常好的css-tricks article