Question

我有一个简单的部分，显示列表项和图像，这是它的外观：

我知道使用Bootstrap等框架很简单，但是我只想使用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;

希望有帮助！

如何使用flexbox订购列表项？

2 个答案: