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

- Mr_Green

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;
}

<div class="parent">
  <div class="child"></div>
  <div class="child child--right"></div>
  <div class="child"></div>
</div>

- user4994625

---

不错。你在哪里看到这个技巧的？我只是想问一下，以便我能更多地了解它。谢谢。 - Mr_Green

在 StackOverflow 上，链接为 https://dev59.com/tlwY5IYBdhLWcg3wgX6V。 - user4994625

啊，我的帖子是重复的。应该搜索得更好一些。不管怎样，谢谢 :) - Mr_Green

我记不得我在哪里看到的了，我以为是css-trick但实际上是这里。 - user4994625

Answer 2

你需要使用一个定义为 flex:auto; 的 spacer 来使得弹性盒子按预期对齐：DEMO

CSS

.parent{
  display:flex;
}
.spacer{
  flex:auto;
}

and your HTML would be:

<div class="parent">
    <div class="child child--left"></div>
    <div class="spacer"></div>
    <div class="child child--right"></div>
    <div class="child child--right"></div>
</div>

- Amin Jafari

---

谢谢，这很好。我会在我的项目中使用它。但我觉得blonfu的答案很好，因为它在css中处理。+1 :) - Mr_Green

不用谢，这是我在项目中经常使用的。 - Amin Jafari

Answer 3

你可以使用 flex 来填充空间

body {
  margin: 0;
}

.flex {
  display: flex;
  background: purple;
  width: 100%;
  height: 75px;
}
.item {
  background: orange;
  width: 50px;
  height: 50px;
  margin: 12.5px;
}
.filler {
  flex-grow: 1;
}

<div class="flex">
  <div class="item"></div>
  <div class="filler"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

你会注意到我添加了一个类名为filler的

元素，并将其设置为flex-grow: 1;。这意味着该

元素将始终占据剩余空间。

- Andrew Bone

Answer 4

应用：margin-<direction>: auto 在 flex 项的子元素上，实际上会使该项在相反方向上浮动（而不会出现float的任何复杂性）。

.child--right {
  margin-left: auto;
}

- JackHasaKeyboard

Answer 5

在不使用额外填充元素的情况下实现这一点的方法是使用自动边距。

CSS

.child--left {
    margin-right: auto; /* <== here's the auto margin */
}

它将在.child--left的右侧添加一个边距，该边距将填充.parent中的可用空间（基本上就像左右两个子元素之间有一个填充元素，但实际上没有填充元素）

- Arnelle Balane

Answer 6

HTML

   <div class="parent">
        <div class="child child--left"><div class="box"></div></div>
        <div class="child child--right"><div class="box"></div></div>
        <div class="child child--right"><div class="box"></div></div>
    </div>

CSS

   .parent{
      display: flex;
      justify-content: center;
    }

    .box{
      width: 200px;
      height: 200px;
      background: #333;
      margin: 20px
    }

源代码：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

演示：https://jsfiddle.net/rittamdebnath/315wps5g/

- rittam