Giữ mục giữa làm trung tâm khi các mặt hàng phụ có độ rộng khác nhau

Question

Hãy tưởng tượng bố trí sau, nơi các dấu chấm đại diện cho khoảng cách giữa các ô:

[Left box]......[Center box]......[Right box] 

Khi tôi loại bỏ các hộp bên phải, tôi thích hộp trung tâm vẫn ở trung tâm, như vậy:

[Left box]......[Center box]................. 

Điều tương tự cũng xảy ra nếu tôi xóa hộp bên trái.

................[Center box]................. 

Bây giờ khi nội dung trong hộp trung tâm dài hơn, nó sẽ chiếm nhiều không gian khi cần thiết trong khi vẫn căn giữa. Hộp bên trái và bên phải sẽ không bao giờ co lại và do đó khi không còn chỗ trống, overflow:hidden và text-overflow: ellipsis sẽ có hiệu lực để phá vỡ nội dung;

[Left box][Center boxxxxxxxxxxxxx][Right box] 

Tất cả những điều trên là tình huống lý tưởng của tôi, nhưng tôi không biết làm thế nào để đạt được hiệu ứng này. Bởi vì khi tôi tạo cấu trúc flex như vậy:

.parent { 
    display : flex; // flex box 
    justify-content : space-between; // horizontal alignment 
    align-content : center; // vertical alignment 
} 

Nếu hộp bên trái và bên phải có cùng kích thước, tôi sẽ có được hiệu quả mong muốn. Tuy nhiên khi một trong hai là từ một kích thước khác nhau hộp trung tâm là không thực sự trung tâm nữa.

Có ai có thể giúp tôi không?

Cập nhật

Một justify-self sẽ được tốt đẹp, đây sẽ là lý tưởng:

.leftBox { 
    justify-self : flex-start; 
} 

.rightBox { 
    justify-self : flex-end; 
} 

Answer 1

Nếu trái và hộp đúng sẽ được chính xác kích thước tương tự, tôi nhận được hiệu quả mong muốn. Tuy nhiên khi một trong hai là một kích thước khác nhau hộp trung tâm là không thực sự trung tâm nữa. Có ai có thể giúp tôi không?

Đây là phương pháp hoàn toàn tập trung vào mục giữa, bất kể chiều rộng của anh chị em.

• CSS tinh khiết
• không định vị tuyệt đối
• không JS/jQuery

Sử dụng lồng đựng flex và auto lề:

.container { 
 
    display: flex; 
 
} 
 
.box { 
 
    flex: 1; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.box:first-child > span { margin-right: auto; } 
 

 
.box:last-child > span { margin-left: auto; } 
 

 
/* non-essential */ 
 
.box { 
 
    align-items: center; 
 
    border: 1px solid #ccc; 
 
    background-color: lightgreen; 
 
    height: 40px; 
 
}

<div class="container"> 
 
    <div class="box"><span>short text</span></div> 
 
    <div class="box"><span>centered text</span></div> 
 
    <div class="box"><span>loooooooooooooooong text</span></div> 
 
</div>

Dưới đây là cách hoạt động:

• Các cấp cao nhất div (.container) là một container flex.
• Mỗi div con (.box) hiện là một mục flex.
• Mỗi .box mục được cung cấp flex: 1 để phân phối không gian vùng chứa bằng nhau.
• Hiện tại các mục đang tiêu thụ hết không gian trong hàng và có chiều rộng bằng nhau.
• Đặt từng vật chứa một thùng chứa flex (lồng nhau) và thêm justify-content: center.
• Hiện tại, mỗi thành phần span là một mặt hàng flex trung tâm.
• Sử dụng flex auto lề để dịch chuyển bên trái và bên phải span s.

Bạn cũng có thể từ bỏ justify-content và sử dụng auto lề độc quyền.

Nhưng justify-content có thể hoạt động tại đây vì lợi nhuận auto luôn được ưu tiên.

8.1. Aligning with auto margins

Trước khi liên kết qua justify-content và align-self, bất kỳ không gian trống dương tính được phân phối đến lề tự động trong không gian đó.

Answer 2

1. Sử dụng ba mục flex trong container
2. Set flex: 1 để những người đầu tiên và cuối cùng. Điều này làm cho chúng phát triển như nhau để lấp đầy không gian còn trống còn lại bởi phần giữa.
3. Do đó, phần giữa sẽ có xu hướng được căn giữa.

4. Tuy nhiên, nếu mục đầu tiên hoặc cuối cùng có nội dung rộng, mục flex đó cũng sẽ tăng lên do giá trị ban đầu mới min-width: auto.

   Lưu ý rằng Chrome dường như không triển khai đúng cách này. Tuy nhiên, bạn có thể đặt min-width thành -webkit-max-content hoặc -webkit-min-content và nó cũng sẽ hoạt động.

5. Chỉ trong trường hợp đó phần tử ở giữa sẽ bị đẩy ra khỏi tâm.

.outer-wrapper { 
 
    display: flex; 
 
} 
 
.item { 
 
    background: lime; 
 
    margin: 5px; 
 
} 
 
.left.inner-wrapper, .right.inner-wrapper { 
 
    flex: 1; 
 
    display: flex; 
 
    min-width: -webkit-min-content; /* Workaround to Chrome bug */ 
 
} 
 
.right.inner-wrapper { 
 
    justify-content: flex-end; 
 
} 
 
.animate { 
 
    animation: anim 5s infinite alternate; 
 
} 
 
@keyframes anim { 
 
    from { min-width: 0 } 
 
    to { min-width: 100vw; } 
 
}

<div class="outer-wrapper"> 
 
    <div class="left inner-wrapper"> 
 
    <div class="item animate">Left</div> 
 
    </div> 
 
    <div class="center inner-wrapper"> 
 
    <div class="item">Center</div> 
 
    </div> 
 
    <div class="right inner-wrapper"> 
 
    <div class="item">Right</div> 
 
    </div> 
 
</div> 
 
<!-- Analogous to above --> <div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">Left</div></div><div class="center inner-wrapper"><div class="item animate">Center</div></div><div class="right inner-wrapper"><div class="item">Right</div></div></div><div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">Left</div></div><div class="center inner-wrapper"><div class="item">Center</div></div><div class="right inner-wrapper"><div class="item animate">Right</div></div></div>

Answer 3

Bạn có thể làm điều này như sau:

.bar { 
 
    display: flex;  
 
    background: #B0BEC5; 
 
} 
 
.l { 
 
    width: 50%; 
 
    flex-shrink: 1; 
 
    display: flex; 
 
} 
 
.l-content { 
 
    background: #9C27B0; 
 
} 
 
.m { 
 
    flex-shrink: 0; 
 
} 
 
.m-content {  
 
    text-align: center; 
 
    background: #2196F3; 
 
} 
 
.r { 
 
    width: 50%; 
 
    flex-shrink: 1; 
 
    display: flex; 
 
    flex-direction: row-reverse; 
 
} 
 
.r-content { 
 
    background: #E91E63; 
 
}

<div class="bar"> 
 
    <div class="l"> 
 
     <div class="l-content">This is really long content. More content. So much content.</div> 
 
    </div> 
 
    <div class="m"> 
 
     <div class="m-content">This will always be in the center.</div> 
 
    </div> 
 
    <div class="r"> 
 
     <div class="r-content">This is short.</div> 
 
    </div> 
 
</div>