Cara membuat bungkus item fleksibel dengan lebar tetap

Saya mencoba membuat tata letak di mana blok paragraf div dibungkus dari kiri ke kanan, masing-masing dengan lebar tetap. Sesuatu seperti ini: masukkan deskripsi gambar di sini

Namun yang saya dapatkan adalah ini, entah bagaimana item fleksibel ditumpuk di sebelah kiri:

masukkan deskripsi gambar di sini

Cuplikan kode di sini:

.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>

Apakah ini ada hubungannya dengan penataan gaya di templat Django?


html css flexbox django-templates
person yinkouya    schedule 12.12.2017    source sumber
comment
Cuplikan tidak menampilkan masalahnya   -  person Paulie_D    schedule 12.12.2017
comment
Sebenarnya tidak ada masalah dengan kode Anda. Saya mencobanya di biola (jsfiddle.net/m0nk3y/f05xhv4b) dan berfungsi dengan baik . Anda bahkan tidak perlu melakukan flex-flow: row wrap; Anda cukup melakukan flex-flow: wrap. Mereka membungkus karena lebar wadahnya tidak cukup lebar untuk menampung banyak .thing   -  person Gene Parcellano    schedule 12.12.2017
comment
Jadikan .thing wadah fleksibel, bukan .things. stackoverflow.com/q/37840646/3597276   -  person Michael Benjamin    schedule 12.12.2017

Jawaban (2)


arrow_upward
0
arrow_downward

Perubahan yang mungkin perlu Anda lakukan adalah sebagai berikut:

  • Pertama, karena Anda menggunakan perulangan for untuk menghasilkan setiap hal yang memiliki judul, deskripsi, dll. Anda perlu mengambil kode Django Anda untuk awal dan akhir perulangan di luar <div class="thing"> sebagai:

    {% 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 %}

  • Tambahkan properti justify-content: space-around; di wadah .things Anda untuk mendistribusikan ruang secara merata.

  • Daripada menyetel lebar untuk wadah .thing menggunakan flex:0 1 25%; di mana 25% akan menjadi lebar wadah .thing, Anda juga dapat menyetelnya sebagai nilai absolut dalam px dan akan terbungkus ketika tidak dapat disesuaikan lagi di baris yang sama . Jika Anda mengubah '0' menjadi '1', Anda dapat merenggangkannya ke dimensi yang tidak rata.

.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
Anda benar, masalahnya adalah saya harus memasang loop for di luar seluruh div. . Saya juga mencoba ‹flex:1 1 25%›, itu berfungsi dengan baik tanpa ‹justify-content: space-around›. Terima kasih. - person yinkouya; 13.12.2017
comment
@yinkouya Tidak masalah :) - person ; 13.12.2017

arrow_upward
0
arrow_downward

Anda harus menggunakan justify-content:space-around untuk memberi ruang di sekitar item ke induk .things dan flex-basis:25% untuk menyetel panjang awal ke anak .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
Saya sebenarnya mencoba saran Anda sebelum saya memposting ini. Masalahnya adalah saya salah memasukkan loop for. Terima kasih. - person yinkouya; 13.12.2017