Html 如何使用Flexbox CSS在一个角落中获取每个元素？

我试图使用Flexbox将一个链接放到每个角（左、上、右、下）

我尝试了

top:0

或将

flex direction

设置为

column

.container{
位置：相对位置；
}
.顶{
显示器：flex；
证明内容：之间的空间；
}
.底部{
显示器：flex；
证明内容：之间的空间；
弯曲方向：行；
}

---

对于类似的内容，

位置：绝对可能更好

.container { position: relative; }

.top-left { position: absolute; top: 0; left: 0 }

.top-right { position: absolute; top: 0; right: 0 }

.bottom-left { position: absolute; bottom: 0; left: 0 }

.bottom-right { position: absolute; bottom: 0; right: 0 }

这是因为
底部
和
顶部
divs的高度，它将只占用最小内容高度作为默认值，包装容器也是如此
这是一种仅使用flexbox修复的方法：


.container{
高度：95vh；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
}
.顶{
显示器：flex；
证明内容：之间的空间；
}
.底部{
显示器：flex；
证明内容：之间的空间；
弯曲方向：行；
}
清洁简单的flexbox解决方案（无黑客攻击或绝对定位）：


.container{
高度：100vh；
显示器：flex；
柔性包装：包装；
对齐内容：之间的间距；/*水平间距*/
对齐内容：间距；/*垂直间距*/
}
.顶部，.底部{
弹性基础：100%；/*强制。底部包裹*/
显示器：flex；
证明内容：之间的空间；
}
a{
背景颜色：橙色；
}
身体{
保证金：0；
背景颜色：浅灰色；
}
您不需要为flexbox使用
.top和.bottom
。Flexbox可以处理更少的HTML代码

<style>
.container {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    height: 100%;
}

.container a {
    flex: 1 1 50%;
}

.container a:nth-child(2n) {
    text-align: right;
}

.container a:nth-child(3),
.container a:nth-child(4) {
    align-self: flex-end;
}


.集装箱{
位置：相对位置；
显示器：flex；
柔性流：行换行；
身高：100%；
}
.货柜a{
弹性：150%；
}
.容器a:第n个子容器（2n）{
文本对齐：右对齐；
}
.容器a：第n个孩子（3），
.容器a：第n个子容器（4）{
自对准：柔性端；
}


只需将
高度：100vh
添加到您的
身体中
CSS标签中即可。。。
<div class="container">
    <a href="#">ONE</a>
    <a href="#">TWO</a>
    <a href="#">THREE</a>
    <a href="#">FOUR</a>
</div>