Tinggi baris yang sama dalam wadah fleksibel

91

Seperti yang Anda lihat, list-itemsyang pertama rowmemiliki kesamaan height. Tetapi item yang kedua rowmemiliki perbedaan heights. Saya ingin semua item memiliki seragam height.

Apakah ada cara untuk mencapai ini tanpa memberikan ketinggian tetap dan hanya menggunakan flexbox ?

masukkan deskripsi gambar di sini

Ini milikku code 

.list {
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
}
.list-item {
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content {
  width: 100%;
}
<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>box 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>
Luaskan cuplikan

html css flexbox Jinu Kurian
sumber
Salah satu caranya adalah mengatur ketinggian pada elemen yang dapat bervariasi tingginya
onmyway133

Jawaban:

79

Jawabannya adalah tidak.

Alasannya diberikan dalam spesifikasi flexbox:

6. Garis Fleksibel

Dalam penampung fleksibel multi-baris, ukuran silang setiap baris adalah ukuran minimum yang diperlukan untuk memuat item fleksibel di baris.

Dengan kata lain, bila ada beberapa baris dalam wadah fleksibel berbasis baris, tinggi setiap baris ("ukuran silang") adalah tinggi minimum yang diperlukan untuk memuat item fleksibel pada baris tersebut.

Namun, tinggi baris yang sama dimungkinkan dalam CSS Grid Layout:

Jika tidak, pertimbangkan alternatif JavaScript.

Michael Benjamin
sumber
Apakah css grid aman digunakan seperti untuk saat ini?
Alexander Kim
40

Anda dapat melakukannya sekarang dengan display: grid:

.list {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  max-width: 500px;
}
.list-item {
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  margin-bottom: 20px;
}
.list-content {
  width: 100%;
}
<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>box 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>
Luaskan cuplikan

Meskipun grid itu sendiri bukan flexbox, perilakunya sangat mirip dengan container flexbox , dan item di dalam grid bisa fleksibel .

Tata letak grid juga sangat berguna jika Anda menginginkan grid responsif. Artinya, jika Anda ingin grid memiliki jumlah kolom yang berbeda per baris, Anda dapat mengubahnya grid-template-columns:

grid-template-columns: repeat(1, 1fr); // 1 column
grid-template-columns: repeat(2, 1fr); // 2 columns
grid-template-columns: repeat(3, 1fr); // 3 columns

dan seterusnya...

Anda dapat mencampurnya dengan kueri media dan mengubahnya sesuai dengan ukuran halaman.

Sayangnya, masih belum ada dukungan untuk kueri penampung / kueri elemen di browser (di luar kotak) untuk membuatnya berfungsi dengan baik dengan mengubah jumlah kolom sesuai dengan ukuran penampung, bukan ukuran halaman (ini akan sangat bagus untuk digunakan dengan komponen web yang dapat digunakan kembali).

Informasi selengkapnya tentang tata letak kisi:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Dukungan Tata Letak Grid di semua browser:

https://caniuse.com/#feat=css-grid

Lucas Basquerotto
sumber
Ini adalah jenis pendekatan "bisa melakukan" yang saya suka! Terima kasih atas contoh kerjanya juga
hananamar
0

Jika Anda mengetahui item yang Anda petakan, Anda dapat melakukannya dengan melakukan satu baris dalam satu waktu . Saya tahu ini solusinya, tetapi berhasil.

Bagi saya, saya memiliki 4 item per baris, jadi saya pecah menjadi dua baris 4 dengan setiap baris height: 50%, menyingkirkan flex-grow, memiliki <RowOne />dan <RowTwo />dalam <div>dengan flex-column. Ini akan berhasil

<div class='flexbox flex-column height-100-percent'>
   <RowOne class='flex height-50-percent' />
   <RowTwo class='flex height-50-percent' />
</div>
Kevin Danikowski
sumber
0

Ini tampaknya berfungsi dalam kasus dengan tinggi induk tetap (diuji di Chrome dan Firefox):

.child {
        height    : 100%;
        overflow  : hidden;
}

.parent {
        display: flex;
        flex-direction: column;
        height: 70vh; // ! won't work unless parent container height is set
        position: relative;
}

Jika tidak mungkin menggunakan kisi karena alasan tertentu, mungkin itu solusinya.

Stanislav E. Govorov
sumber
-1

Dalam kasus Anda, tinggi akan dihitung secara otomatis, jadi Anda harus memberikan ketinggian
gunakan ini

.list-content{
  width: 100%;
  height:150px;
}
Tom
sumber
Maaf, tingginya mungkin berbeda dengan isinya. Jadi tidak bisa memberikan ketinggian tetap.
Jinu Kurian
Ketinggian dihitung secara otomatis, jadi dengan konten Anda yang berbeda, ketinggian akan berbeda, jadi Anda harus menggunakan ketinggian tetap jika tidak, Anda tidak bisa mendapatkan ketinggian yang seragam.
Tom
-1

Anda bisa dengan flexbox:

ul.list {
    padding: 0;
    list-style: none;
    display: flex;
    align-items: stretch;
    justify-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
li {
    width: 100px;
    padding: .5rem;
    border-radius: 1rem;
    background: yellow;
    margin: 0 5px;
}
<ul class="list">
  <li>title 1</li>
  <li>title 2<br>new line</li>
  <li>title 3<br>new<br>line</li>
</ul>
Luaskan cuplikan

Hisham Dalal
sumber
Saya tidak berpikir ini memberikan ketinggian yang sama ketika item ditumpuk secara vertikal.
workwise
maaf, tetapi Anda dapat mencoba jawaban lain selain memberi tanda negatif pada jawaban saya!
Hisham Dalal
-3

Anda dapat melakukannya dengan memperbaiki tinggi tag "P" atau memperbaiki tinggi "list-item".

Saya telah selesai dengan memperbaiki ketinggian "P"

dan luapan harus disembunyikan.

.list{
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
}

.list-item{
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content{
  width: 100%;
}
p{height:100px;overflow:hidden;}
<ul class="list">
  <li class="list-item">
    <div class="list-content">
    <h2>box 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>

Ajay Malhotra
sumber
Sepertinya bukan jawaban yang saya cari, jika konten menjadi lebih besar, itu akan disembunyikan.
Jinu Kurian
@JinuKurian dimana saya menambahkan overflow: hidden, Jika diubah menjadi overflow: auto maka scroll akan muncul. maka Anda dapat melihat konten lengkap juga
Ajay Malhotra
-6

untuk ketinggian yang sama Anda harus mengubah Properti "display" css Anda. Untuk lebih jelasnya lihat contoh yang diberikan.

.list{
  display: table;
  flex-wrap: wrap;
  max-width: 500px;
}

.list-item{
  background-color: #ccc;
  display: table-cell;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content{
  width: 100%;
}
<ul class="list">
  <li class="list-item">
    <div class="list-content">
    <h2>box 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>

Ankit
sumber
Terima kasih, tetapi saya ingin menampilkan daftar dalam beberapa baris.
Jinu Kurian