Как сделать так, чтобы flex-элементы переносились с фиксированной шириной

Я пытаюсь сделать макет, в котором блоки абзацев div обтекаются слева направо, каждый с фиксированной шириной. Что-то вроде этого: введите здесь описание изображения

Однако то, что я получил, так это то, что гибкие элементы каким-то образом сложены слева:

введите здесь описание изображения

Фрагмент кода здесь:

.things {
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.thing {
  padding: 10px;
  margin: 10px;
  width: 300px;
}
<div class="things">
  <div class="thing">
    {% for thing in things %}  <!-- It's a Django project -->
    <h2>{{ thing.title }}</h2>
    <p>{{ thing.content }}</p>
    <small>{{ thing.date }}</small>
    {% endfor %}
  </div>
</div>

Это как-то связано со стилем в шаблонах Django?


html css flexbox django-templates
person yinkouya    schedule 12.12.2017    source источник
comment
Фрагмент не отображает проблему   -  person Paulie_D    schedule 12.12.2017
comment
На самом деле с вашим кодом проблем нет. Я попробовал это на скрипке (jsfiddle.net/m0nk3y/f05xhv4b), и все работает отлично. . Вам даже не нужно делать flex-flow: row wrap;, вы можете просто сделать flex-flow: wrap. Они переносятся, потому что ширина контейнера недостаточно широка, чтобы вместить несколько .thing   -  person Gene Parcellano    schedule 12.12.2017
comment
Сделайте .thing гибким контейнером, а не .things. stackoverflow.com/q/37840646/3597276   -  person Michael Benjamin    schedule 12.12.2017

Ответы (2)


arrow_upward
0
arrow_downward

Изменения, которые вам, возможно, потребуется внести, следующие:

  • Во-первых, поскольку вы используете цикл for для создания каждой вещи, которая имеет заголовок, описание и т. д., вам нужно взять код Django для начала и конца цикла за пределами <div class="thing"> как:

    {% for thing in things %}
    <div class="thing">
    <!-- It's a Django project -->
    <h2>{{ thing.title }}</h2>
    <p>{{ thing.content }}</p>
    <small>{{ thing.date }}</small>   
</div> {% endfor %}

  • Добавьте свойство justify-content: space-around; в свой контейнер .things, чтобы равномерно распределить пространство.

  • Вместо того, чтобы устанавливать ширину для контейнера .thing, используйте flex:0 1 25%;, где 25% будет шириной контейнера .thing, вы также можете установить его как абсолютное значение в пикселях, и оно будет переноситься, когда они больше не могут корректироваться в той же строке. . Если вы измените «0» на «1», вы можете растянуть их до неравномерных размеров.

.things {
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-flow:row wrap;
  display: flex;
  justify-content: space-around;
}

.thing {
  border:1px solid black;
  padding: 10px;
  margin:5px;
  flex:0 1 25%;
  background:red;
}
<div class="things">
  <div class="thing">
    <h2>{{ thing.title }}</h2>
    <p>{{ thing.content }}</p>
    <small>{{ thing.date }}</small>
  </div>
  <div class="thing">
    <h2>{{ thing.title }}</h2>
    <p>{{ thing.content }}</p>
    <small>{{ thing.date }}</small>
  </div>
  <div class="thing">
    <h2>{{ thing.title }}</h2>
    <p>{{ thing.content }}</p>
    <small>{{ thing.date }}</small>
  </div>
  <div class="thing">
    <h2>{{ thing.title }}</h2>
    <p>{{ thing.content }}</p>
    <small>{{ thing.date }}</small>
  </div>
  <div class="thing">
    <h2>{{ thing.title }}</h2>
    <p>{{ thing.content }}</p>
    <small>{{ thing.date }}</small>
  </div>
  
</div>

person Community    schedule 12.12.2017
comment
Вы правы, проблема в том, что я должен поставить цикл for за пределами всего div. . Также я попробовал ‹flex:1 1 25%›, он отлично работает без ‹justify-content: space-around›. Спасибо. - person yinkouya; 13.12.2017
comment
@yinkouya Нет проблем :) - person ; 13.12.2017

arrow_upward
0
arrow_downward

Вы должны использовать justify-content:space-around, чтобы освободить место вокруг элементов для родительского элемента .things, и flex-basis:25%, чтобы установить начальную длину для дочернего элемента .thing.

.things {
  font: 13px Verdana;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  box-sizing: border-box;
}

.thing {
  flex-basis: 25%;
  padding: 10px;
  background: cadetblue;
  text-align: center;
  box-sizing: border-box;
  border: 2px solid #fff;
}
<div class="things">
  <div class="thing">
    <h2>Title 1</h2>
    <p>Content</p>
    <small>Date</small>
  </div>
  <div class="thing">
    <h2>Title 2</h2>
    <p>Content</p>
    <small>Date</small>
  </div>
  <div class="thing">
    <h2>Title 3</h2>
    <p>Content</p>
    <small>Date</small>
  </div>
  <div class="thing">
    <h2>Title 4</h2>
    <p>Content</p>
    <small>Date</small>
  </div>
  <div class="thing">
    <h2>Title 5</h2>
    <p>Content</p>
    <small>Date</small>
  </div>
  <div class="thing">
    <h2>Title 6</h2>
    <p>Content</p>
    <small>Date</small>
  </div>
</div>

person Bhuwan    schedule 12.12.2017
comment
Я на самом деле попробовал ваши предложения, прежде чем опубликовать это. Проблема в том, что я неправильно поставил цикл for. Спасибо, в любом случае. - person yinkouya; 13.12.2017