แถวที่มีความสูงเท่ากันในคอนเทนเนอร์แบบยืดหยุ่น

Question 1

ในขณะที่คุณสามารถมองเห็นlist-itemsในครั้งแรกที่มีเหมือนกันrow heightแต่รายการในครั้งที่สองมีความแตกต่างกันrow ฉันต้องการทุกรายการจะมีเครื่องแบบheightsheight

มีวิธีการเพื่อให้บรรลุนี้โดยไม่ให้การใด ๆคงที่สูงและเป็นเพียงการใช้flexbox ?

นี่คือไฟล์ 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>

ขยายข้อมูลโค้ด

Question 2

คำตอบคือไม่

เหตุผลมีอยู่ในข้อกำหนดของ flexbox:

6. เส้น Flex

ในคอนเทนเนอร์เฟล็กซ์แบบหลายบรรทัดขนาดกากบาทของแต่ละบรรทัดคือขนาดต่ำสุดที่จำเป็นในการบรรจุรายการเฟล็กซ์ในบรรทัด

กล่าวอีกนัยหนึ่งคือเมื่อมีหลายบรรทัดในคอนเทนเนอร์เฟล็กตามแถวความสูงของแต่ละบรรทัด ("ขนาดกากบาท") คือความสูงขั้นต่ำที่จำเป็นในการบรรจุรายการเฟล็กซ์ในบรรทัด

อย่างไรก็ตามแถวที่มีความสูงเท่ากันเป็นไปได้ใน CSS Grid Layout:

แถวที่มีความสูงเท่ากันใน CSS Grid Layout

มิฉะนั้นให้พิจารณาทางเลือกของ JavaScript

Question 3

คุณสามารถทำได้ทันทีด้วย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>

ขยายข้อมูลโค้ด

แม้ว่ากริดเองจะไม่ใช่เฟล็กบ็อกซ์ แต่ก็มีลักษณะคล้ายกับคอนเทนเนอร์เฟล็กบ็อกซ์มากและรายการภายในกริดสามารถยืดหยุ่นได้

เค้าโครงกริดยังมีประโยชน์มากในกรณีที่คุณต้องการกริดที่ตอบสนอง นั่นคือถ้าคุณต้องการให้กริดมีจำนวนคอลัมน์ที่แตกต่างกันต่อแถวคุณสามารถเปลี่ยนได้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

และอื่น ๆ ...

คุณสามารถผสมกับแบบสอบถามสื่อและเปลี่ยนตามขนาดของหน้า

น่าเสียดายที่ยังไม่มีการรองรับการสืบค้นคอนเทนเนอร์ / การสืบค้นองค์ประกอบในเบราว์เซอร์ (นอกกรอบ) เพื่อให้สามารถใช้งานได้ดีกับการเปลี่ยนจำนวนคอลัมน์ตามขนาดคอนเทนเนอร์ไม่ใช่ขนาดหน้า (จะดีมากที่จะใช้ ด้วยคอมโพเนนต์ของเว็บที่ใช้ซ้ำได้)

ข้อมูลเพิ่มเติมเกี่ยวกับเค้าโครงกริด:

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

การสนับสนุน Grid Layout ในเบราว์เซอร์:

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

Question 4

ไม่คุณไม่สามารถทำได้โดยไม่ต้องตั้งค่าความสูงคงที่ (หรือใช้สคริปต์)

นี่คือคำตอบ 2 ข้อของฉันแสดงวิธีใช้สคริปต์เพื่อให้บรรลุสิ่งนั้น

Question 5

ดูเหมือนว่าจะใช้งานได้ในกรณีที่มีความสูงของผู้ปกครองคงที่ (ทดสอบใน Chrome และ 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;
}

หากไม่สามารถใช้กริดด้วยเหตุผลบางประการอาจเป็นวิธีแก้ปัญหา

Question 6

ถ้าคุณรู้ว่ารายการที่คุณกำลังทำแผนที่ผ่านที่คุณสามารถทำได้โดยการทำหนึ่งแถวในเวลา ฉันรู้ว่ามันเป็นวิธีแก้ปัญหา แต่ได้ผล

สำหรับผมผมมี 4 รายการต่อแถวเพื่อให้ฉันมันแตกออกเป็นสองแถว 4 กับแต่ละแถวheight: 50%ได้รับการกำจัดของflex-growมี<RowOne />และ<RowTwo />ในด้วย<div> flex-columnนี้จะทำเคล็ดลับ

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

Question 7

ในกรณีของคุณความสูงจะถูกคำนวณโดยอัตโนมัติดังนั้นคุณต้องระบุความสูง
โดยใช้สิ่งนี้

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

Question 8

คุณสามารถทำได้ด้วย 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>

ขยายข้อมูลโค้ด

Question 9

คุณสามารถทำได้โดยกำหนดความสูงของแท็ก "P" หรือกำหนดความสูงของ "list-item"

ฉันได้ทำโดยกำหนดความสูงของ "P"

และควรซ่อนส่วนที่ล้น

.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

สำหรับความสูงที่เท่ากันคุณควรไล่คุณสมบัติ css "display" ของคุณ สำหรับรายละเอียดเพิ่มเติมโปรดดูตัวอย่าง

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