时间戳

首页 > 解决方案 > 如何使用 flexbox 对列表项进行排序？

html - 如何使用 flexbox 对列表项进行排序？

问题描述

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

在此处输入图像描述

我知道它使用简单的框架，如引导程序等，但我只想使用 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/

不幸的是我没有得到我想要的结果，我需要改变什么才能得到我想要的？新手尽管弯曲

标签： htmlcssflexbox

解决方案

我想你想实现一个垂直计数的列表项，它会包裹到右侧。您已经设法自定义递增数字，这似乎工作得很好。

您要应用的实际元素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/

我希望这回答了你的问题。

推荐阅读