Как мне использовать mimi c float с помощью flexbox?

Question

Я пытаюсь использовать flexbox как поплавки. Я хотел бы, чтобы один ребенок образовал столбец справа, а остальные дети образовали еще один столбец слева. Я не могу добавить дополнительные HTML - я могу работать только с CSS.

Я понял, как это сделать, но мне просто нужно, чтобы оба столбца выровнялись по наверх . Мой текущий код имеет левый столбец чуть ниже правого столбца.

https://jsfiddle.net/o2fbtuLc/

.parent {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.child {
  max-width: 48%;
}

.right {
  margin-left: auto;
}

<div class="parent">
  <div class="child right">Right</div>
  <div class="child">Left</div>
  <div class="child">Left</div>
  <div class="child">Left</div>
</div>

Answer 1

просто используйте flexbox по назначению!

.parent {
  display: flex;
  justify-content:space-between;
}

<div class="parent">
 <div>
  <div class="child">Left</div>
  <div class="child">Left</div>
  <div class="child">Left</div></div>
  <div class="child right">Right</div>
</div>

Answer 2

CSS -Сетка может это сделать:

.parent {
  display: grid;
  grid-template-columns: auto auto;
  grid-auto-flow: column;
}

.child {
  max-width: 48%;
  grid-column: 1;
  border: 1px solid green;
}

.right {
  grid-column: 2;
}

<div class="parent">
  <div class="child right">Right</div>
  <div class="child">Left</div>
  <div class="child">Left</div>
  <div class="child">Left</div>
  <div class="child right">Right</div>
</div>

Answer 3

Если вы хотите избежать grid (возможно, задействовано IE 11?) , старый способ через отображение таблицы, тоже может:

.parent {
  display: table;
  width: 100%;
  direction: rtl;/* alike a flow column reverse here */
  text-align: left;
  border: solid;
}

.child {
  direction: ltr;/* ! reset flow direction  ;)*/
  border: solid;
}

.right {/* i will also expand if first col is longer than myself  */
  display: table-cell;
  width: 50%;/* set column width here ! left over will be for the other one(s). */
}

/* margins ? */
.bis {border-spacing:2px;}
.bis .child {margin-right:2px;}
.bis .right + .child ~ .child {margin-top:2px;}
.bis .right{text-align:center;vertical-align:middle;

<div class="parent">
  <div class="child right">Right</div>
  <div class="child">Left</div>
  <div class="child">Left</div>
  <div class="child">Left</div>
</div>
<hr>
<div class="parent bis">
  <div class="child right">possible gaps /  VH-align</div>
  <div class="child">Left</div>
  <div class="child">two<br>lines</div>
  <div class="child">Left</div>
</div>

Answer 4

Вы можете использовать order. Также я удалил flex-direction: column и добавил max-width: 100% для элементов после второго элемента.

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  width: 100%;
  max-width: 48%;
}

.child:nth-child(2) {
  order: 1;
}

.child:nth-child(3) {
  order: 3;
}

.child:nth-child(4) {
  order: 4;
}

.right {
  order: 2;
}

.child:nth-child(n + 3) {
  max-width: 100%;
}

<div class="parent">
  <div class="child right">Right</div>
  <div class="child">Left</div>
  <div class="child">Left</div>
  <div class="child">Left</div>
</div>

Если .right выше, мы можем использовать grid-area.

.parent {
  display: grid;
  grid-template-areas:  "left1 right" 
                        "left2 right" 
                        "left3 right";
}

.child {
  width: 100%;
  background: blue;
  height: 30px;
}

.child:nth-child(2) {
  grid-area: left1;
}

.child:nth-child(3) {
  grid-area: left2;
}

.child:nth-child(4) {
  grid-area: left3;
}

.right {
  background: red;
  height: 80px;
  grid-area: right;
}

<div class="parent">
  <div class="child right">Right</div>
  <div class="child">Left</div>
  <div class="child">Left</div>
  <div class="child">Left</div>
</div>