在不使用 css 属性 float 的情况下使两个元素表现得像浮动元素

debugcn 发表于 Dev

慢戳123

我想在不使用css属性float的情况下水平对齐两个元素。

更具体地说：

我希望它们水平对齐，浮动到父级的每一侧：

而且，如果屏幕变小，我希望它们相互包裹，同时仍然浮动到父级的每一侧（就像浮动一样）：

这可以使用 flexbox 或类似的东西来实现吗？

伊恩斯坦利

我不知道有一种方法可以像真正的浮点数一样仅基于子元素的属性来制作左右交换边，而无需flex-direction:row-reverse;在包装器上指定。请参阅我的示例进行比较：http : //codepen.io/ijstanley/pen/JWXwOy

<p>pseudo floats in reverse order in markup</p>
<div class="flex wrapper">
  <div class="pseudo float right">right</div>
  <div class="pseudo float left">left</div>
</div>
<p>pseudo floats in correct order in markup</p>
<div class="flex wrapper">
  <div class="pseudo float left">left</div>
  <div class="pseudo float right">right</div>
</div>
<p>pseudo floats in reverse order in markup, reverse flex direction</p>
<div class="reverse flex wrapper">
  <div class="pseudo float right">right</div>
  <div class="pseudo float left">left</div>
</div>
<p>pseudo floats in correct order in markup, reverse flex direction</p>
<div class="reverse flex wrapper">
  <div class="pseudo float left">left</div>
  <div class="pseudo float right">right</div>
</div>
<p>actual floats</p>
<div class="floater wrapper">
  <div class="real float left">left</div>
  <div class="real float right">right</div>
</div>

.wrapper {
  border:3px solid gray;
}

.wrapper.flex {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:space-between;
}

.wrapper.flex.reverse {
  flex-direction:row-reverse;
}

.wrapper.floater {
  width:100%;
}

.wrapper.floater::after {
  content:'';
  display:block;
  clear:both;
}

.float {
  min-height:200px;
  background:red;
  border:3px solid black;
  width:300px;
}

.float.pseudo.left {
  margin-right:auto;
}

.float.real.left {
  float:left;
}

.float.real.right {
  float:right;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。