Các hàng có chiều cao bằng nhau trong vùng chứa linh hoạt

Question 1

Như bạn thấy, list-itemscái đầu tiên rowcó giống nhau height. Nhưng các mục trong thứ hai rowcó khác nhau heights. Tôi muốn tất cả các mặt hàng phải có đồng phục height.

Có cách nào để đạt được điều này mà không đưa ra chiều cao cố định và chỉ sử dụng flexbox không?

Đây là 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>

Mở rộng đoạn mã

Question 2

Câu trả lời là không.

Lý do được cung cấp trong thông số kỹ thuật flexbox:

6. Dòng Flex

Trong một vùng chứa linh hoạt nhiều dòng, kích thước chéo của mỗi dòng là kích thước tối thiểu cần thiết để chứa các mục linh hoạt trên dòng.

Nói cách khác, khi có nhiều dòng trong vùng chứa flex dựa trên hàng, chiều cao của mỗi dòng ("kích thước chéo") là chiều cao tối thiểu cần thiết để chứa các mục flex trên dòng.

Tuy nhiên, các hàng có độ cao bằng nhau có thể thực hiện được trong Bố cục Lưới CSS:

Các hàng có độ cao bằng nhau trong Bố cục lưới CSS

Nếu không, hãy xem xét một JavaScript thay thế.

Question 3

Bạn có thể thực hiện điều đó ngay bây giờ với 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>

Mở rộng đoạn mã

Mặc dù bản thân lưới không phải là flexbox, nhưng nó hoạt động rất giống với một vùng chứa flexbox và các mục bên trong lưới có thể được uốn .

Bố cục lưới cũng rất tiện dụng trong trường hợp bạn muốn các lưới đáp ứng. Nghĩa là, nếu bạn muốn lưới có số cột khác nhau trên mỗi hàng thì bạn có thể chỉ cần thay đổi 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

và như thế...

Bạn có thể kết hợp nó với các truy vấn phương tiện và thay đổi theo kích thước của trang.

Đáng tiếc là vẫn không có hỗ trợ cho các truy vấn vùng chứa / truy vấn phần tử trong trình duyệt (ngoài hộp) để làm cho nó hoạt động tốt với việc thay đổi số lượng cột theo kích thước vùng chứa, không theo kích thước trang (điều này sẽ rất tốt để sử dụng với các thành phần web có thể tái sử dụng).

Thông tin thêm về bố cục lưới:

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

Hỗ trợ Bố cục Lưới trên các trình duyệt:

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

Question 4

Không, bạn không thể đạt được điều đó nếu không đặt chiều cao cố định (hoặc sử dụng tập lệnh).

Đây là 2 câu trả lời của tôi, cho thấy cách sử dụng script để đạt được điều như vậy:

Làm thế nào để lấy tiêu đề từ thẻ hoặc tương tự để có cùng chiều cao với hộp flex?
Chiều cao tương tự cho các mục uốn cong trong hộp chứa linh hoạt cột hướng uốn cong

Question 5

Nếu bạn biết các mục bạn đang lập bản đồ, bạn có thể thực hiện điều này bằng cách thực hiện từng hàng một . Tôi biết đó là một cách giải quyết, nhưng nó hoạt động.

Đối với tôi, tôi có 4 mục mỗi hàng, vì vậy tôi chia nó thành hai hàng 4 với mỗi hàng height: 50%, loại bỏ flex-grow, có <RowOne />và <RowTwo />ở <div>cùng flex-column. Điều này sẽ thực hiện thủ thuật

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

Question 6

Điều này dường như hoạt động trong các trường hợp có chiều cao gốc cố định (được thử nghiệm trong Chrome và 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;
}

Nếu không thể sử dụng lưới vì lý do nào đó, có lẽ đó là giải pháp.

Question 7

Trong trường hợp của bạn, chiều cao sẽ được tính toán tự động, vì vậy bạn phải cung cấp chiều cao
sử dụng

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

Question 8

Bạn có thể với 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>

Mở rộng đoạn mã

Question 9

bạn có thể làm điều đó bằng cách sửa chiều cao của thẻ "P" hoặc sửa chiều cao của "list-item".

Tôi đã thực hiện bằng cách sửa chiều cao của "P"

và phần tràn nên được ẩn.

.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

đối với cùng một chiều cao, bạn nên chọn Thuộc tính css "display" của mình. Để biết thêm chi tiết, hãy xem ví dụ cụ thể.

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