html – 使用Flexbox对齐角落中的元素

发布时间：2020-12-14 18:32:58 所属栏目：资源来源：网络整理

导读：我试图使用Flexbox在Flex容器的四个角落放置四个元素,我正在努力.我无法弄清楚如何证明单个flex-items的内容.每次我尝试,它最终将flex-container的所有内容放到左侧或右侧(或顶部/底部,取决于主轴). HTML： div class="container" div class="top-left" TL /

我试图使用Flexbox在Flex容器的四个角落放置四个元素,我正在努力.我无法弄清楚如何证明单个flex-items的内容.每次我尝试,它最终将flex-container的所有内容放到左侧或右侧(或顶部/底部,取决于主轴).

HTML：

<div class="container">
    <div class="top-left">
         TL
    </div>
    <div class="top-right">
        TR
    </div>
    <div class="bottom-left">
        BL
    </div>
    <div class="bottom-right">
       BR
    </div>
</div>

这是我的CSS：

.container {
    display: -webkit-flex;
    background-color:#ccc;
}

.top-left {
 /* ? */
}

.top-right {

}

.bottom-left {

}

.bottom-right {

}

这是一个小提琴,说明我正在尝试做什么：

http://jsfiddle.net/JWNmZ/8/

解决方法

这是一种方法(为清晰起见,省略了前缀)： http://jsfiddle.net/JWNmZ/10/

.container {
    display: flex;
    flex-wrap: wrap;
    background-color:#ccc;
}

.top-left {
    flex: 50%; 
}

.top-right {
    flex: 50%;
    text-align: right;
}

.bottom-left {
    flex: 50%;
}

.bottom-right {
    flex: 50%;
    text-align: right;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!