Esnek bir kapta eşit yükseklikteki satırlar

Question 1

Gördüğünüz gibi list-items, ilki rowaynı height. Ancak ikincideki öğeler rowfarklıdır heights. Tüm eşyaların üniforma olmasını istiyorum height.

Bunu sabit yükseklik vermeden ve sadece flexbox kullanarak başarmanın bir yolu var mı?

İşte benim 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>

Snippet'i genişlet

Question 2

Cevap hayır.

Nedeni, flexbox spesifikasyonunda verilmiştir:

6. Esnek Hatlar

Çok satırlı esnek bir kapta, her satırın çapraz boyutu, satırdaki esnek öğeleri içermek için gereken minimum boyuttur.

Diğer bir deyişle, satır bazlı esnek konteynerde birden fazla satır olduğunda, her satırın yüksekliği ("çapraz boyut"), satırdaki esnek öğeleri içermek için gereken minimum yüksekliktir.

Bununla birlikte, CSS Izgara Düzeni'nde eşit yükseklikteki satırlar mümkündür:

CSS Grid Layout'ta eşit yükseklikteki satırlar

Aksi takdirde, bir JavaScript alternatifi düşünün.

Question 3

Artık bunu başarabilirsiniz ile 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>

Snippet'i genişlet

Izgaranın kendisi flexbox olmasa da, bir flexbox konteynere çok benzer davranır ve ızgara içindeki öğeler esnek olabilir .

Izgara düzeni, duyarlı ızgaralar istemeniz durumunda da çok kullanışlıdır. Yani, ızgaranın satır başına farklı sayıda sütuna sahip olmasını istiyorsanız, o zaman değiştirebilirsiniz 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

ve bunun gibi...

Medya sorgularıyla karıştırıp sayfanın boyutuna göre değişiklik yapabilirsiniz.

Ne yazık ki , tarayıcılarda (kutunun dışında), sayfa boyutuna göre değil, sütunların sayısını kapsayıcı boyutuna göre değiştirerek iyi çalışmasını sağlamak için kapsayıcı sorguları / öğe sorguları için hala destek yoktur (bu kullanmak harika olur. yeniden kullanılabilir web bileşenleri ile).

Izgara düzeni hakkında daha fazla bilgi:

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

Tarayıcılar genelinde Izgara Düzeni desteği:

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

Question 4

Hayır, bunu sabit bir yükseklik ayarlamadan (veya bir komut dosyası kullanmadan) başaramazsınız.

İşte böyle bir şeyi başarmak için bir senaryonun nasıl kullanılacağını gösteren 2 cevabım:

Flex box ile aynı yüksekliğe sahip olmak için kartlardan veya benzerlerinden başlık nasıl alınır?
Esnek yönlü sütun esnek kabındaki esnek öğeler için aynı yükseklik

Question 5

Eşleme yaptığınız öğeleri biliyorsanız, bunu her seferinde bir satır yaparak başarabilirsiniz . Bunun geçici bir çözüm olduğunu biliyorum ama işe yarıyor.

Benim için satır başına 4 öğe vardı, bu yüzden her satırda 4'lü iki satıra böldüm height: 50%, kurtuldum flex-grow, sahip oldum <RowOne />ve <RowTwo />bir <div>ile flex-column. Bu hile yapacak

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

Question 6

Bu, ebeveyn yüksekliğinin sabit olduğu durumlarda çalışıyor gibi görünüyor (Chrome ve Firefox'ta test edilmiştir):

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

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

Herhangi bir nedenle ızgaraları kullanmak mümkün değilse, belki çözüm budur.

Question 7

Davanız yüksekliği size sunmak zorunda yüksekliği, otomatik olarak hesaplanır
bunu kullanın

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

Question 8

Flexbox ile şunları yapabilirsiniz:

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>

Snippet'i genişlet

Question 9

"P" etiketinin yüksekliğini veya "list-item" yüksekliğini sabitleyerek bunu yapabilirsiniz.

"P" nin yüksekliğini sabitleyerek yaptım

ve taşma gizlenmelidir.

.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

aynı yükseklik için css'nizin "görüntü" Özelliklerini değiştirmelisiniz. Daha fazla ayrıntı için verilen örneğe bakın.

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