使用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

您可以margin-left:auto在右侧需要的div中使用：

.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>