Làm cho div lấp đầy không gian * ngang * trong flexbox

Question

Tôi có 2 div cạnh nhau trong một flexbox. Tay phải luôn luôn có cùng độ rộng và tôi muốn bàn tay trái chỉ cần lấy không gian còn lại. Nhưng nó sẽ không trừ khi tôi đặc biệt thiết lập chiều rộng của nó.

Vì vậy, tại thời điểm này, nó được đặt thành 96% trông OK cho đến khi bạn thực sự đè bẹp màn hình - sau đó div tay phải sẽ hơi bị bỏ đói một chút so với không gian cần thiết.

Tôi đoán tôi có thể rời khỏi nó vì nó là nhưng nó cảm thấy sai - như phải có một cách để nói:

một trong những quyền luôn luôn là như nhau; bạn ở bên trái - bạn sẽ có được tất cả những gì còn lại

.ar-course-nav { 
 
    cursor: pointer; 
 
    padding: 8px 12px 8px 12px; 
 
    border-radius: 8px; 
 
} 
 
.ar-course-nav:hover { 
 
    background-color: rgba(0, 0, 0, 0.1); 
 
}

<br/> 
 
<br/> 
 
<div class="ar-course-nav" style="display:flex; justify-content:space-between;"> 
 
    <div style="width:96%;"> 
 
    <div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;"> 
 
     <strong title="Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!"> 
 
       Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer! 
 
      </strong> 
 
    </div> 
 
    <div style="width:100%; display:flex; justify-content:space-between;"> 
 
     <div style="color:#555555; margin-right:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;" title="A really really really really really really really really really really really long department name"> 
 
     A really really really really really really really really really really really long department name 
 
     </div> 
 
     <div style="color:#555555; text-align:right; white-space:nowrap;"> 
 
     Created: 21 September 2016 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div style="margin-left:8px;"> 
 
    <strong>&gt;</strong> 
 
    </div> 
 
</div>

Answer 1

Sử dụng flex-grow tài sản để thực hiện một mục flex tiêu thụ còn trống trên trục chính.

Thuộc tính này sẽ mở rộng mục càng nhiều càng tốt, điều chỉnh độ dài thành môi trường động, chẳng hạn như thay đổi kích thước màn hình hoặc thêm/xóa các mục khác.

Ví dụ phổ biến là flex-grow: 1 hoặc sử dụng thuộc tính viết tắt, flex: 1.

Do đó, thay vì width: 96% trên div của bạn, hãy sử dụng flex: 1.

---

Bạn đã viết:

Vì vậy, vào lúc này, đó là thiết lập đến 96% mà có vẻ OK cho đến khi bạn thực sự dẹp màn hình - thì div tay phải được một chút thiếu của không gian nó cần.

Các cán nát của div chiều rộng cố định là liên quan đến một bất động sản flex: flex-shrink

Theo mặc định, các mục flex được thiết lập để flex-shrink: 1 cho phép họ thu nhỏ để ngăn chặn tràn của container.

Để tắt tính năng này, hãy sử dụng flex-shrink: 0.

Để biết thêm chi tiết, xem Các flex-shrink yếu tố phần trong câu trả lời ở đây:

• What are the differences between flex-basis and width?

---

Tìm hiểu thêm về sự liên kết flex dọc theo trục chính ở đây:

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Tìm hiểu thêm về sự liên kết flex dọc theo trục chéo đây:

• How does flex-wrap work with align-self, align-items and align-content?