Выравнивание слева направо с помощью Flex

Question

Итак, у меня есть такой код более или менее

<div class="content">
   <div class="c1">
   <div>
   <div class="c2">
   <div>
   <div class="c3">
   <div>
   <div class="c4">
   <div>
</div>

Можно ли с помощью flex сделать это?

<c1>         <c3>
<c2>         <c4>  

Я знаю, что могу использовать <ul> или <table>, но мне просто интересно, смогу ли я сделать это с помощью flex. Я пытался использовать flex, но не могу этого сделать.

Answer 1

Да, вы можете сделать, пожалуйста, рассмотрите ниже код.
HTML

 <div class="content ">  
      <div class="col-12 d-flex justify-content-between">
       <div class="c1 col-6 text-center">c1
       </div>
       <div class="c2 col-6 text-center">c2
       </div>
     </div>
     <div class="col-12 d-flex justify-content-between">
       <div class="c3 col-6 text-center">c3
       </div>
       <div class="c4 col-6 text-center">c4
       </div>
         </div>
    </div>

CSS

.justify-content-around {
    -ms-flex-pack: distribute!important;
    justify-content: space-around!important;
}
.d-flex {
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
}

Answer 2

А что с этим трюком?

.content
{ 
    display: flex; 
    flex-direction: column; 
    height: 50px; 
    flex-wrap: wrap; 
}

<div class="content">
    <div class="c1">1</div>
    <div class="c2">2</div>
    <div class="c3">3</div>
    <div class="c4">4</div>
</div>

Answer 3

Вы можете легко сделать это с помощью сетки CSS, на мой взгляд, это более полезно, но это код, который использует сетку CSS

HTML

<div class="content">
    <div class="c1">test 1</div>
    <div class="c2">test 2</div>
    <div class="c3">test 3</div>
    <div class="c4">test 4</div>
</div>

CSS:

.content {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

Answer 4

DEMO

Да, это возможно с Flexbox - задайте высоту для .content и дочерних элементов div (например, содержимое: 100px, divs 50px) и укажите flex-flow: column wrap

.content {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-flow: column wrap;
   align-content: stretch;
   height: 100px;
}

.content div {
  height: 50px;
  width: 50px;
}

Flex-flow является сокращением для flex-direction и flex-wrap.

Flex-direction устанавливает направление - строка, столбец, обратный ряд, обратный столбец.

Flex-wrap упаковывает гибкие элементы (или нет). По умолчанию это nowrap, для демонстрации используется wrap, и вы также можете использовать wrap-reverse

Answer 5

Вы можете достичь этого, изменив разметку на следующую структуру:

<div class="content">
   <div class="left-col">
       <div class="c1"><div>
       <div class="c2"><div>
   </div>
   <div class="right-col">
       <div class="c3"><div>
       <div class="c4"><div>
   </div>
</div>

Теперь у вас есть две колонки. Просто добавьте следующие стили к вашему CSS:

.content {
    display: flex;
    justify-content: space-between; // or whatever you want
    flex-direction: row; // row is the default value, so you don't need to specify it. It will place the cols beside each other.
}

.left-col, .right-col {
    display: flex;
    flex-direction: column;
}

Указав flex-direction: column;, элементы будут расположены ниже друг друга.

Вот замечательный ресурс: https://css -tricks.com / snippets / css / a-guide-to-flexbox /

Может быть, вы также хотите проверить новый нативный grid-layout: https://www.w3schools.com/css/css_grid.asp