Flex-контейнер и потомки

• Задать flex-контейнер:

  display: flex;

  display: inline-flex;

• Каждый элемент, имеющий прямого предка flex-контейнер становится flex-потомком, т.е. parent>child: если

  ul { display: flex; }

  то все li являются прямыми потомками (flex-child), т.к. ul>li.
• Анонимные блоки для текста: если прямым потомком flex-контейнера оказывается текст, то такой текст оборачивается в анонимный блок и этот блок является flex-потомком.
• Анонимные блоки для пробелов: все пробелы, переносы и т.п., являющиеся прямыми потомками flex-контейнера, оборачивается в анонимный блок с display: 'none'.
• Hello world!

  1

  2

  3

  4

  5

  6

• 
            <div class="flex-parent">
                Hello world! // text
              <div class="flex-child">1</div>
              // space              
              <div class="flex-child">2</div>
              <div class="flex-child">3</div>
              <div class="flex-child">4</div>
              <div class="flex-child">5</div>
              <div class="flex-child">6</div>
            </div>