<分区>
我有如下需求:
|[] [][]|
视口(viewport)左侧的一个元素和视口(viewport)右侧的两个元素。为了学习 display: flex，我正在尝试这种不包装元素的布局。
这种布局可以用 flexbox 实现吗？
这是 HTML:
<div class="parent">
<div class="child child--left"></div>
<div class="child child--right"></div>
<div class="child child--right"></div>
</div>
我尝试使用 align-items 和 align-self 但没有用。请帮忙。
CSS:
.parent{
display: flex; // flexbox
}
最佳答案
你可以在右边你需要的div中使用margin-left:auto:
.parent {
display: flex;
height: 100px;
width: 100%;
}
.child {
flex: 0 0 20px;
border: solid 1px green;
}
.child--right {
margin-left: auto;
}<div class="parent">
<div class="child"></div>
<div class="child child--right"></div>
<div class="child"></div>
</div>关于html - 使用 flex 对齐元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37831500/