Как заказать элементы списка с помощью flexbox?

Question

У меня есть простой раздел, который отображает элементы списка и изображение, вот как это должно выглядеть:

Я знаю, как просто использовать фреймворк, напримерзагрузчик и т. д., но я хочу использовать только flex.

Вот HTML-код:

<section class="info-section">
    <div class="main-info">
        <div class="main-info_left">
            <h2>Nature from air</h2>
            <p>Mauris consequat libero metus, nec ultricies sem efficitur quis. Integer bibendum eget metus ac accumsan. Integer sit amet lacus egestas, semper est quis, viverra ex.</p>

            <ol class="info-list">
                <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
                </li>
                <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
                </li>
                <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
                </li>
                <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
                </li>
                <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
                </li>

            </ol> 
        </div>
        <div class="main-info_right">
            <span><img src="images/drone.png"></span>
        </div>
    </div>

</section>

Вот CSS-файл, который я пробовал:

.main-info{
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
}

ol {
    counter-reset:li; /* Initiate a counter */
    margin-left:0; /* Remove the default left margin */
    padding-left:0; /* Remove the default left padding */
}
ol > li {
    position: relative;
    margin: 21px 0 57px 2em;
    padding: 22px 41px;
    list-style: none;
    background: #fff;
}
ol > li:before {
    content:counter(li); /* Use the counter as content */
    counter-increment:li; /* Increment the counter by 1 */
    /* Position and style the number */
    position:absolute;
    top:-2px;
    left:-2em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    /* Some space between the number and the content in browsers that support
       generated content but not positioning it (Camino 2 is one example) */
    margin-right:8px;
    padding: 17px;
    border: 1px solid rgb(63, 78, 118);;
    background:#fff;
    font-weight:bold;
    font-family: proximaNova;
    text-align:center;
}
li ol,
li ul {margin-top:6px;}
ol ol li:last-child {margin-bottom:0;}

Вот Jsfiddle: http://jsfiddle.net/bmL7jogu/1/

К сожалению, я не могу получить желаемый результат, что мне нужно изменить, чтобы получить то, что я хочу?новичок, чтобы согнуть хотя

Answer 1

Полагаю, вы хотите получить список элементов с вертикальным счетом, который переносится в правую сторону.Вам уже удалось настроить инкрементные числа, что, кажется, прекрасно работает.

Фактический элемент, к которому вы хотите применить display: flex;, равен <ol>, который является родителем <li> для создания столбцов.,Кроме того, по умолчанию flexbox будет накапливаться по горизонтали, а не по вертикали, и поэтому вам нужно применить flex-direction: column; для достижения вертикального направления.Наконец, добавление flex-wrap: wrap; позволит дочерним элементам flexbox «перенести» на следующую строку, в нашем случае на правую сторону первых столбцов.Конфигурируя, например, от max-width: 50%; до <li>, вы можете настроить, сколько столбцов будет отображаться при переносе.

Подводя итог, приведенный ниже код позволит получить требуемые элементы списка:

ol {
  display: flex;
  flex-direction: column; /* Make flex children pile up 'vertically'. */
  flex-wrap: wrap; /* Wrap children to next 'column'. */
  max-width: 60%; /* To prevent covering the drone image. */
  max-height: 600px; /* Set maximum height so columns will wrap. */
  margin-left: 0; /* Remove the default left margin */
  padding-left: 0; /* Remove the default left padding */
  counter-reset: li; /* Initiate a counter */
}

ol > li {
  position: relative;
  margin: 21px 0 57px 2em;
  padding: 22px 41px;
  max-width: 50%;
  list-style: none;
}

Кроме тогоЯ бы порекомендовал вам установить изображение вашего беспилотника от background-image до .main-info, так как оно выглядит как фон.Таким образом, вы можете избежать борьбы с вложенным flexbox для достижения вашего дизайна.

Окончательный код: https://jsfiddle.net/dorapen/7rdb096t/

Надеюсь, это ответ на ваш вопрос.

Answer 2

Вы должны установить display: flex для родителя, а затем добавить order:1 к первому элементу и затем заказать другие.

.parent{
display: flex;
flex-wrap: wrap;
}
.parent .order1{
order: 1;
}
.parent .order2{
order: 2;
}
.parent .order3{
order: 3;
}


<div class="parent">
 <p class="order3"></p>
 <p class="order1"></p>
 <p class="order2"></p>
</div>

Вы также можете сделать это с property column-count: 2;

Надеюсь, это поможет!