Как отобразить эту конкретную схему с помощью flex?

Question

код:

<div class="wrapper">
    <div class="container">
        <div class="box">box</div>
        <div class="test1a">
            <div class="text1a">text1a</div>
            <div class="text2a">text2a</div>
            <div class="text3a">text3a</div>
            <div class="text4a">text4a</div>
        </div>
        <div class="test1b">
            <div class="text1b">text1b</div>
            <div class="text2b">text2b</div>
            <div class="text3b">text3b</div>
            <div class="text4b">text4b</div>
        </div>
    </div>
</div>

.wrapper {
  padding:10px;
  background:white;
}

.container {
  padding:10px;
  backgorund:black;
}

.box { 
  background:red;
}

.test1a { 
  background:green;
}

.text1a {
  background:blue;
}

.text2a {
  background:red;
}

.text3a {
  background:yellow;
}

.text4a {
  background:orange;
}

.test1b { 
  background:blue;
 }

.text1b { 
  background:green;
}

.text2b { 
  background:red;
}

.text3b {
  background:yellow;
}

.text4b { 
  background:orange;
}

• скрипка - https://jsfiddle.net/2v79vmz4/1/

Так что я бы хотел добиться этого с помощью flexbox.И важно то, что text1a должна иметь такую ​​же ширину, что и text1b и т. Д. - text2a с text2b и т. Д. (Длина текста каждый раз отличается).

При уменьшении (окно) они должны меняться от строки кколонка.

текст «коробки» и все остальные тексты должны быть в центре их квадратов.Квадраты должны растягиваться для всех доступных мест.

Answer 1

Я добавил класс textbox ко всем текстовым полям, сделал контейнеры текстовых полей (.test1a и .test1b) флексбоксы, позволил дочерним элементам (с классом textbox) обернуть в поле (flex-wrap: wrap) , сделал текстовые поля равными ширине с flex: 1 и это в основном все. Просто измените flex-direction на столбец в определенной точке останова, и ваш макет готов к работе с мобильными устройствами.

https://jsfiddle.net/2v79vmz4/2/

Я бы посоветовал изучить основы flexbox , например, на css-tricks.