gpt4 book ai didi

html - 垂直对齐两个 flex 元素

转载 作者:可可西里 更新时间:2023-11-01 13:50:49 27 4
gpt4 key购买 nike

<分区>

我有一个 flex 容器 .container 和两个 flex 元素:item-oneitem-two。我想将第一项垂直居中并将第二项粘贴到底部。

我不知道如何在这种情况下垂直对齐第一项。

HTML:

<div class="container">
<div class="item-one">Item One</div>
<div class="item-two">Item Two</div>
</div>

CSS:

html, body {
height: 100%;
margin: 0;
}

.container {
width: 500px;
margin: 0 auto;
border: 5px solid orange;
height: 100%;

/* Flex properties */
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}

.item-one {
border: 5px solid yellow;
flex-basis: 500px;
}

.item-two {
border: 5px solid red;
align-self: flex-end;
}

CodePen

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com