css - Flexbox 没有按预期包装

Question

我是完全自己执行开发工作的新手，但之前在工作中接触过很多这样的工作——我真的很喜欢它，但我在容器中的元素遇到问题:包装元素通过 flexbox 并想知道是否有人可以提供帮助？

我正在尝试为桌面附件中的时间线设置顺序:

1 2

3 4

5 6

对于移动设备:

1

2

3

4

5

6

目前它仅在垂直方向显示，这对移动设备来说是可以的，但我希望它溢出并覆盖 2 列。

我查看了有关 flex-wrap 的演练，但我尝试的任何方法都不起作用 - 我可能找错了树。

有人可以帮忙吗？

谢谢!

GC

/* order timeline */

.timeline-order {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    flex-flow: wrap row;
}

.row .timeline-1 {
    order: 1;
}

.row .timeline-2 {
    order: 2;
}

.row .timeline-3 {
    order: 3;
}

.row .timeline-4 {
    order: 4;
}

.row .timeline-5 {
    order: 5;
}

.row .timeline-6 {
    order: 6;
}

.timeline {
    padding: 60px 0
}

.timeline .section-headline {
    margin-bottom: 60px
}

.timeline-item {
    float: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #222;
    border-top: 6px solid #333;
    padding: 10%;
    margin: 15px 0
}

.timeline-item-image {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    margin-bottom: 60px
}

.timeline time {
    display: inline-block;
    margin: 10px 0;
    opacity: .8
}

.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

@media (min-width:576px) {
    .container {
        max-width: 540px
    }
}

@media (min-width:768px) {
    .container {
        max-width: 720px
    }
}

@media (min-width:992px) {
    .container {
        max-width: 960px
    }
}

@media (min-width:1200px) {
    .container {
        max-width: 1140px
    }
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff
}

<section class="timeline">
        <div class="container timeline-order">
            <div class="row">
                <div class="col-12">
                    <h2 class='section-headline'>The Timeline</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-lg-6">
                    <div class="timeline-item timeline-1">
                        <img src="/images/timeline/pioneer.jpg" width='240' alt="Pioneer 0" class="timeline-item-image">
                        <div class="timeline-item-content">
                            <h3>Title</h3>
                            <time>17 August 1958</time>
                            <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
                        </div>
                    </div>
                    <div class="timeline-item timeline-2">
                        <img src="/images/timeline/luna-1.jpg" width='240' alt="Luna E-1 No.1" class="timeline-item-image">
                        <div class="timeline-item-content">
                            <h3>Title</h3>
                            <time>23 September 1958</time>
                            <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
                                <br/> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
                        </div>
                    </div>
                    <div class="timeline-item timeline-3">
                        <img src="/images/timeline/apollo-11.jpg" width='240' alt="Apollo 11" class="timeline-item-image">
                        <div class="timeline-item-content">
                            <h3>Title</h3>
                            <time>16 July 1969</time>
                            <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
                        </div>
                    </div>
                    <div class="timeline-item timeline-4">
                        <img src="/images/timeline/luna-24.jpg" width='240' alt="Luna 24" class="timeline-item-image">
                        <div class="timeline-item-content">
                            <h3>Title</h3>
                            <time>9 August 1976</time>
                            <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
                        </div>
                    </div>
                    <div class="timeline-item timeline-5">
                        <img src="/images/timeline/hiten.jpg" width='240' alt="Hiten" class="timeline-item-image">
                        <div class="timeline-item-content">
                            <h3>Title</h3>
                            <time>24 January 1990</time>
                            <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
                                <br/> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
                        </div>
                    </div>
                    <div class="timeline-item timeline-6">
                        <img src="/images/timeline/artemis.jpg" width='240' alt="ARTEMIS" class="timeline-item-image">
                        <div class="timeline-item-content">
                            <h3>Title</h3>
                            <time>Spring 2010</time>
                            <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
                                <br> Text text text text text text text text text text text text texttext text text text text text text text text</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

Answer 1

如评论中所述，无需设置顺序。

只需为移动设备 (100%) 和桌面设备 (50%) 设置正确的 flex-basis:

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #333;
}

.item {
  padding: .5rem;
  border: 1px dashed lightblue;
  flex-grow: 1;
  flex-basis: 50%;
}

@media (max-width: 767px) {
  .item {
    flex-basis: 100%;
  }
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>