html - 两个元素垂直居中，左右浮动

Question

我试图在父 div 中垂直对齐两个 div。

垂直对齐很简单，但我也在尝试 float div，一左一右。

这可能吗？

.outer {
  background: red;
  height: 300px;
  display: flex;
  align-items: center;
}
.inner_right {
  background: blue;
  float: right;
}
.inner_left {
  background: yellow;
  float: left;
}

<div class="outer">
  <div class="inner_right">
    RIGHT MIDDLE
  </div>
  <div class="inner_left">
    LEFT MIDDLE
  </div>
</div>

https://jsfiddle.net/xh8rbnmh/

Answer 1

body { margin: 0; }

.outer {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 1 */
    background: red;
    height: 300px;
}

.inner_right {
    order: 1;                       /* 2 */
    /* float: right; */             /* 3 */
    background: aqua;
}

.inner_left {
    /* float: left; */              /* 3 */
    background: yellow;
}

<div class="outer">
  <div class="inner_right">RIGHT MIDDLE</div>
  <div class="inner_left">LEFT MIDDLE</div>
</div>

1. methods for aligning flex items on main axis
2. the flex order property can move elements around the screen
3. floats are ignored in a flex formatting context