ทำให้ไอเท็ม flex ใช้ความกว้างของเนื้อหาไม่ใช่ความกว้างของคอนเทนเนอร์พาเรนต์

ฉันมีภาชนะที่มี<div> แต่ก็มีเด็ก display: flex<a>

ฉันจะทำให้เด็กปรากฏเป็น "อินไลน์" ได้อย่างไร

โดยเฉพาะฉันจะกำหนดความกว้างของเด็กตามเนื้อหาได้อย่างไรและไม่ขยายไปถึงความกว้างของผู้ปกครอง

สิ่งที่ฉันพยายาม:

ฉันตั้งค่าให้เด็กdisplay: inline-flexแต่ก็ยังใช้ความกว้างเต็ม ฉันยังลองคุณสมบัติการแสดงผลอื่น ๆ ทั้งหมด แต่ไม่มีผลใด ๆ

ตัวอย่าง:

.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

ใช้align-items: flex-startบนภาชนะบรรจุหรือalign-self: flex-startในรายการที่ยืดหยุ่น

display: inline-flexไม่จำเป็นต้อง

align-items: stretchการตั้งค่าเริ่มต้นของภาชนะดิ้นเป็น ซึ่งหมายความว่ารายการที่ยืดหยุ่นจะขยายเพื่อครอบคลุมความยาวเต็มของคอนเทนเนอร์ตามแนวแกน

align-selfคุณสมบัติจะเป็นสิ่งเดียวกันเป็นalign-itemsยกเว้นว่าalign-selfนำไปใช้กับรายการดิ้นในขณะที่align-itemsนำไปใช้กับภาชนะดิ้น

โดยค่าเริ่มต้นสืบทอดค่าของalign-selfalign-items

เนื่องจากคอนเทนเนอร์ของคุณคือflex-direction: columnแกนไขว้เป็นแนวนอนและalign-items: stretchกำลังขยายความกว้างขององค์ประกอบลูกให้มากที่สุด

คุณสามารถแทนที่ค่าเริ่มต้นด้วยalign-items: flex-startบนคอนเทนเนอร์ (ซึ่งได้รับการสืบทอดจากไอเท็มเฟล็กทั้งหมด) หรือalign-self: flex-startบนไอเท็ม (ซึ่ง จำกัด อยู่ที่รายการเดียว)

เรียนรู้เพิ่มเติมเกี่ยวกับการจัดแนวเฟล็กซ์ตามแนวแกนไขว้ที่นี่:

• flex-wrap ทำงานอย่างไรกับการจัดตำแหน่งด้วยตนเองจัดรายการและจัดเรียงเนื้อหา

เรียนรู้เพิ่มเติมเกี่ยวกับการจัดแนวโค้งตามแกนหลักที่นี่:

• ใน CSS Flexbox เหตุใดจึงไม่มีคุณสมบัติ "justify-items" และ "justify-self"

นอกจากนี้align-selfคุณยังสามารถพิจารณาระยะขอบอัตโนมัติซึ่งจะทำในสิ่งเดียวกัน

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