使用flex实现四列到列列表的反馈

Question

我无法实现响应式弹性布局来容纳无序列表。现在，对于大断点，它设置为两列，对于小移动尺寸则移至一列。我希望它在台式机、笔记本电脑和平板电脑尺寸上为四列，然后在移动设备上分为两列。

出于可访问性目的，我需要使用无序列表，因为这最终将包含一个图像列表，加上它各自的 link。

https://codepen.io/shannonhc/pen/WNjjoKp

非常感谢任何想法！

<div class="container">
    <div class="row section-header">
        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
            <h2 class="section-title">Lorem ipsum</h2>
            <p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
        </div>
    </div>
    <ul class="m-list-flex">
        <li class="flex-item h-center-items h-flex-columns">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" alt="" />
            <a href="">Visit W3Schools.com!</a>
        </li>
        <li class="flex-item h-center-items h-flex-columns">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" alt="" />
            <a href="">Visit W3Schools.com!</a>
        </li>
        <li class="flex-item h-center-items h-flex-columns">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" alt="" />
            <a href="">Visit W3Schools.com!</a>
        </li>
        <li class="flex-item h-center-items h-flex-columns">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" alt="" />
            <a href="">Visit W3Schools.com!</a>
        </li>
        <li class="flex-item h-center-items h-flex-columns">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" alt="" />
            <a href="">Visit W3Schools.com!</a>
        </li>
        <li class="flex-item h-center-items h-flex-columns">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" alt="" />
            <a href="">Visit W3Schools.com!</a>
        </li>
        <li class="flex-item h-center-items h-flex-columns">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" alt="" />
            <a href="">Visit W3Schools.com!</a>
        </li>
        <li class="flex-item h-center-items h-flex-columns">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" alt="" />
            <a href="">Visit W3Schools.com!</a>
        </li>
    </ul>

div {
    display: block;
    text-align: center;
}

.container {
    max-width: 1000px;
    width: 100%;
    margin: auto;
}

img {
    width: 200px;
    padding: 10px;
}

.m-list-flex {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
}

.m-list-flex .h-flex-columns {
    display: flex;
    flex-direction: column;
}

.m-list-flex .h-center-items {
    text-align: center;
}

.m-list-flex .flex-item {
    -ms-flex: 1;
    flex: 1;
    padding: 30px;
}

@media screen and (min-width: 768px) {
    .container {
        width: 600px;
    }
}

@media screen and (max-width: 991px) {

    .m-list-flex .h-flex-columns,
    .m-list-flex .flex-item {
        -ms-flex-preferred-size: 33%;
        flex-basis: 33%;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-bottom: 6rem;
    }
}
}

Answer 1

我稍微清理了您的代码，使其更易于使用。我创建了这个基本的 pen，希望这就是您的意思。

我简化了 class 命名方案。如果需要，您可以将其改回您的命名方案。

在使用媒体查询时，我发现定义一个默认状态（在本例中是只有两列的移动版本）然后定义一个查询来覆盖该样式更容易。

ul.flex-list {
    width: calc((200px + 2 * 10px)*2);
}

@media screen and (min-width: 991px) {
    ul.flex-list {
        width: calc((200px + 2 * 10px)*4);
    }
}

断点可以设置成你想要的大小。我希望这回答了你的问题。如果您有任何后续问题，请随时提出。

使用flex实现四列到列列表的反馈

Feedback to achieve four column to column list using flex

html

css

html-lists

flexbox