使用flex[重复]对齐项目

Question

我有如下要求：

|[]                  [][]|

一个元素位于视口的左侧，两个元素位于视口的右侧。为了学习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
}

Answer 1

您可以在右侧所需的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;
}

html prettyprint-override"><div class="parent">
  <div class="child"></div>
  <div class="child child--right"></div>
  <div class="child"></div>
</div>