Tinggi baris yang sama dalam wadah fleksibel

Question 1

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 ?

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

Question 2

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:

Tinggi baris yang sama dalam CSS Grid Layout

Jika tidak, pertimbangkan alternatif JavaScript.

Question 3

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

Question 4

Tidak, Anda tidak dapat mencapai itu tanpa menyetel ketinggian tetap (atau menggunakan skrip).

Berikut adalah 2 jawaban saya, menunjukkan bagaimana menggunakan skrip untuk mencapai sesuatu seperti itu:

Bagaimana cara mendapatkan header dari kartu atau sejenis yang memiliki tinggi yang sama dengan flex box?
Ketinggian yang sama untuk item flex dalam container flex kolom arah flex

Question 5

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>

Question 6

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.

Question 7

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

.list-content{
  width: 100%;
  height:150px;
}

Question 8

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

Question 9

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>

Question 10

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>