align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式(1)
stretch 默认, | 拉伸元件以适应容器。 |
---|---|
center | 中心元素在容器内。 |
flex-start | 位置元素在容器的开头。 |
flex-end | 位置元素在容器的末端。 |
baseline | 位置元素在容器的基线。 |
initial | 设置为默认值。 |
inherit | 从其父元素继承此属性。 |
align-items: center;
align-items: flex-start;
align-items: flex-end;
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>
css
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.container {
display: flex;
display: -webkit-flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 0 auto;
padding-top: 100px;
width: 50%;
height: 400px;
justify-content: center;
/* align-items: center; */
/* align-items: flex-start; */
align-items: stretch;
outline: 1px dashed red;
}
.item {
width: 150px;
border: 1px solid gray;
}
.item1 {
height: 80px;
}
.item2 {
height: 150px;
}
.item3 {
height: 240px;
}
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果