Flex: 1 หมายถึงอะไร?

ในฐานะที่เราทุกคนรู้ว่าflexคุณสมบัติเป็นชวเลขสำหรับflex-grow, flex-shrinkและflex-basisคุณสมบัติ ค่าเริ่มต้นคือ0 1 autoซึ่งหมายความว่า

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

แต่ฉันได้สังเกตเห็นในหลายสถานที่flex: 1จะใช้ ชวเลขเพื่อ1 1 autoหรือ1 0 auto? ฉันไม่เข้าใจความหมายและฉันไม่ได้รับอะไรเลยเมื่อฉันใช้ Google

นี่คือคำอธิบาย:

https://www.w3.org/TR/css-flexbox-1/#flex-common

flex: <positive-number>
เทียบเท่ากับ flex: <positive-number> 1 0. ทำให้รายการ flex มีความยืดหยุ่นและตั้งค่าพื้นฐาน flex เป็นศูนย์ส่งผลให้ไอเท็มได้รับตามสัดส่วนที่ระบุของพื้นที่ว่างใน flex container หากสินค้าทั้งหมดในคอนเทนเนอร์เฟล็กซ์ใช้รูปแบบนี้ขนาดจะเป็นสัดส่วนกับแฟกเตอร์เฟล็กซ์ที่ระบุ

จึงflex:1เทียบเท่ากับflex: 1 1 0

flex: 1 หมายถึงสิ่งต่อไปนี้:

flex-grow : 1;    ➜ The div will grow in same proportion as the window-size       
flex-shrink : 1;  ➜ The div will shrink in same proportion as the window-size 
flex-basis : 0;   ➜ The div does not have a starting value as such and will 
                     take up screen as per the screen size available for
                     e.g:- if 3 divs are in the wrapper then each div will take 33%.

ระวัง

ในบางเบราว์เซอร์:

flex:1; ไม่เท่ากันflex:1 1 0;

flex:1;= flex:1 1 0n;(โดยที่nคือหน่วยความยาว)

• flex-grow: ตัวเลขที่ระบุว่าสินค้าจะเติบโตเท่าใดเมื่อเทียบกับส่วนที่เหลือของรายการที่ยืดหยุ่น
• ดิ้น - หด ตัวเลขที่ระบุว่าสินค้าจะหดตัวมากเพียงใดเมื่อเทียบกับส่วนที่เหลือของรายการที่ยืดหยุ่น
• ความยืดหยุ่นตาม ความยาวของรายการ ค่าทางกฎหมาย: "auto" "inherit" หรือตัวเลขตามด้วย "%" "px" "em" หรือหน่วยความยาวอื่น ๆ

ประเด็นสำคัญที่นี่คือฐานดิ้นต้องใช้หน่วยความยาวหน่วยความยาว

ใน Chrome เป็นต้นflex:1และflex:1 1 0ให้ผลลัพธ์ที่แตกต่างกัน ในสถานการณ์ส่วนใหญ่อาจปรากฏว่าflex:1 1 0;ใช้งานได้ แต่ลองตรวจสอบสิ่งที่เกิดขึ้นจริง:

ตัวอย่าง

พื้นฐาน Flex ถูกละเว้นและใช้เฉพาะการเติบโตแบบยืดหยุ่นและการหดตัวเท่านั้น

flex:1 1 0;= flex:1 1;=flex:1;

สิ่งนี้อาจปรากฏขึ้นในแวบแรก แต่ถ้าหน่วยที่ใช้ของคอนเทนเนอร์ซ้อนกัน คาดหวังที่ไม่คาดคิด!

ลองดูตัวอย่างนี้ใน CHROME

.Wrap{
  padding:10px;
  background: #333;
}
.Flex110x, .Flex1, .Flex110, .Wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.Flex110 {
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
}
.Flex1 {
  -webkit-flex: 1;
  flex: 1;
}
.Flex110x{
  -webkit-flex: 1 1 0%;
  flex: 1 1 0%;
}

FLEX 1 1 0
<div class="Wrap">
  <div class="Flex110">
    <input type="submit" name="test1" value="TEST 1">
  </div>
</div>

FLEX 1
<div class="Wrap">
  <div class="Flex1">
    <input type="submit" name="test2" value="TEST 2">
  </div>
</div>

FLEX 1 1 0%
<div class="Wrap">
  <div class="Flex110x">
    <input type="submit" name="test3" value="TEST 3">
  </div>
</div>

ความเข้ากันได้

ควรสังเกตว่าสิ่งนี้ล้มเหลวเนื่องจากเบราว์เซอร์บางตัวไม่สามารถปฏิบัติตามข้อกำหนดข้อกำหนด

เบราว์เซอร์ที่ใช้ข้อกำหนด Flex แบบเต็ม:

• Firefox - ✓
• ขอบ - ✓ (รู้แล้วก็ตกใจเหมือนกัน)
• Chrome - x
• กล้าหาญ - x
• Opera - x
• IE - (ฮ่า ๆ มันใช้งานได้โดยไม่มีหน่วยความยาว แต่ใช้ไม่ได้)

อัปเดต 2019

Chrome เวอร์ชันล่าสุดดูเหมือนจะแก้ไขปัญหานี้ได้ในที่สุด แต่เบราว์เซอร์อื่น ๆ ยังไม่ได้แก้ไข

ทดสอบและทำงานใน Chrome Ver 74