Question

我正在尝试使用Flexbox实现相当于浮动。

如果只有一个元素被推到右边，我会成功，但是当有多个元素需要向右浮动时失败，除非使用普通的兄弟选择器（~）。

尝试＃1：

失败，因为红色区块应位于右侧

＆＃13;

.block {
  display: flex;
  margin: -5px;
}
.block__element {
  background: #ddd;
  padding: 5px;
  margin: 0 5px;
}
.block__element--first {
  order: -1;
}
.block__element--right {
  margin-left: auto;
}
.u-error {
  background: #ce0e0e;
  color: #fff;
}

＆＃13;

<div class="block">
  <div class="block__element">random elem</div>
  <div class="block__element block__element--right u-error">right elem</div>
  <div class="block__element block__element--first">first elem</div>
  <div class="block__element block__element--right">right elem</div>
</div>

＆＃13;

尝试＃2：

使用常规兄弟选择器（~）因此依赖于标记顺序，如果使用order修改订单则无效。

＆＃13;

.block {
  display: flex;
  margin: -5px;
}
.block__element {
  background: #ddd;
  padding: 5px;
  margin: 0 5px;
}
.block__element--first {
  order: -1;
}
.block__element--right {
  margin-left: auto;
}
.u-error {
  background: #ce0e0e;
  color: #fff;
}

＆＃13;

<div class="block">
  <div class="block__element">random elem</div>
  <div class="block__element block__element--right u-error">right elem</div>
  <div class="block__element block__element--first">first elem</div>
  <div class="block__element block__element--right">right elem</div>
</div>

＆＃13;

Answer 1

我认为关键是不对您想要位于右侧的项目使用margin-left: auto。如你所见，它们将它们彼此隔开。

相反，请在左侧部分的最右侧项目上使用margin-right: auto。这将推动其他一切向右移动。

.block > div:first-child { margin-right: auto; }
/* The actual left-section right-most item has order:-1, so the selector above
   ends up targeting the proper item. */

.block {
  display: flex;
  margin: -5px;
}
.block__element {
  background: #ddd;
  padding: 5px;
  margin: 0 5px;
}
.block__element--first {
  order: -1;
}
.block__element--right {} .u-error {
  background: #ce0e0e;
  color: #fff;
}

<div class="block">
  <div class="block__element">random elem</div>
  <div class="block__element block__element--right u-error">right elem</div>
  <div class="block__element block__element--first">first elem</div>
  <div class="block__element block__element--right">right elem</div>
</div>

要考虑的另一个选项是使用一个伪元素，在左侧和右侧部分之间插入一个不可见的弹性项目，并提供此项目flex: 1。

.block::after {
  content: "spacer element";
  background: #ddd;
  padding: 5px;
  margin: 0 5px;
  flex: 1;
  visibility: hidden; /* disable this rule to see the item at work */
}
.block {
  display: flex;
  margin: -5px;
}
.block__element {
  background: #ddd;
  padding: 5px;
  margin: 0 5px;
}
.block__element--first {
  order: -1;
}
.block__element--right {
  order: 2;
}
.u-error {
  background: #ce0e0e;
  color: #fff;
}

<div class="block">
  <div class="block__element">random elem</div>
  <div class="block__element block__element--right u-error">right elem</div>
  <div class="block__element block__element--first">first elem</div>
  <div class="block__element block__element--right">right elem</div>
</div>

将多个弹性项对齐，就像它们向右浮动一样

1 个答案: