Flexbox не упаковывать как задумано - PullRequest
Новая
       7

Flexbox не упаковывать как задумано

0 голосов
/ 27 июня 2018

Я новичок в выполнении заданий по разработке полностью сам, но ранее мне приходилось сталкиваться с этим во время работы - мне это очень нравится, но у меня есть проблема с моими предметами в контейнере: переупаковка предметов через flexbox и интересно, может ли кто-нибудь там помочь?

Я пытаюсь установить порядок для временной шкалы на прилагаемом настольном компьютере:

1 2

3 4

5 6

и для мобильных:

1

2

3

4

5

6

В данный момент он отображается только в вертикальном направлении, что хорошо для мобильных устройств, хотя я хочу, чтобы оно пролилось и обернулось в 2 столбца.

Я посмотрел на пошаговые руководства re: 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>

1 Ответ

0 голосов
/ 27 июня 2018

Нет необходимости устанавливать порядок, как указано в комментариях.

Просто установите правильный flex-basis для мобильных (100%) и настольных компьютеров (50%): 

* {
  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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...