Làm cho các mục flex lấy chiều rộng nội dung, không phải chiều rộng của vùng chứa cha

Tôi có một container <div>với display: flex. Nó có một đứa con<a> .

Làm thế nào tôi có thể làm cho đứa trẻ xuất hiện "nội tuyến"?

Cụ thể, làm thế nào tôi có thể làm cho chiều rộng của trẻ được xác định bởi nội dung của nó và không mở rộng sang chiều rộng của cha mẹ?

Những gì tôi đã cố gắng:

Tôi đặt con display: inline-flex, nhưng nó vẫn chiếm hết chiều rộng. Tôi cũng đã thử tất cả các thuộc tính hiển thị khác, nhưng không có gì có hiệu lực.

Thí dụ:

.container {
  background: red;
  height: 200px;
  flex-direction: column;
  padding: 10px;
  display: flex;
}
a {
  display: inline-flex;
  padding: 10px 40px;
  background: pink;
}

<div class="container">
  <a href="#">Test</a>
</div>

http://codepen.io/donpinkus/pen/YGRxRY

Sử dụng align-items: flex-starttrên container, hoặc align-self: flex-starttrên các mặt hàng flex.

Không cần display: inline-flex.

Một thiết lập ban đầu của một container flex là align-items: stretch. Điều này có nghĩa là các vật phẩm flex sẽ mở rộng để bao phủ toàn bộ chiều dài của container dọc theo trục chéo.

Các align-selfbất động sản làm điều tương tự như align-items, ngoại trừ việc align-selfáp dụng cho các mặt hàng flex khi align-itemsáp dụng cho các thùng chứa flex .

Theo mặc định, align-selfkế thừa giá trị của align-items.

Vì container của bạn là flex-direction: column, trục chéo nằm ngang vàalign-items: stretch đang mở rộng chiều rộng của phần tử con hết mức có thể.

Bạn có thể ghi đè mặc định với align-items: flex-starttrên container (được kế thừa bởi tất cả các mục flex) hoặc align-self: flex-starttrên mục (được giới hạn trong một mục duy nhất).

Tìm hiểu thêm về căn chỉnh flex dọc theo trục chéo tại đây:

• Làm thế nào để flex-quấn hoạt động với align-self, align-item và align-content?

Tìm hiểu thêm về căn chỉnh flex dọc theo trục chính tại đây:

• Trong CSS Flexbox, tại sao không có thuộc tính "justify-items" và "justify-self"?

Ngoài ra, align-selfbạn cũng có thể xem xét tự động ký quỹ sẽ làm điều gần như tương tự

.container {
  background: red;
  height: 200px;
  flex-direction: column;
  padding: 10px;
  display: flex;
}
a {
  margin-right:auto;
  padding: 10px 40px;
  background: pink;
}

<div class="container">
  <a href="#">Test</a>
</div>