Flexbox - ปรับเนื้อหาให้เหมาะสม

บ่อยครั้งที่คุณสามารถสังเกตเห็นช่องว่างเพิ่มเติมที่เหลืออยู่ในภาชนะหลังจากจัดเรียงรายการดิ้นดังที่แสดงด้านล่าง

การใช้ทรัพย์สิน justify-contentคุณสามารถจัดแนวเนื้อหาตามแกนหลักโดยการกระจายพื้นที่เพิ่มเติมตามที่ต้องการ คุณยังสามารถปรับการจัดตำแหน่งของเฟล็กซิเทมได้ในกรณีที่มันล้นเส้น

usage -

justify-content: flex-start | flex-end | center | space-between | space-around| space-evenly;

คุณสมบัตินี้รับค่าต่อไปนี้ -

flex-start - รายการดิ้นจะถูกวางไว้ที่จุดเริ่มต้นของคอนเทนเนอร์
flex-end - รายการดิ้นจะอยู่ที่ส่วนท้ายของภาชนะ
center - รายการดิ้นจะถูกวางไว้ที่กึ่งกลางของภาชนะบรรจุซึ่งจะมีการกระจายพื้นที่เพิ่มเติมอย่างเท่าเทียมกันในตอนเริ่มต้นและตอนท้ายของรายการแบบยืดหยุ่น
space-between - พื้นที่พิเศษจะกระจายเท่า ๆ กันระหว่างรายการดิ้น
space-around - ช่องว่างพิเศษจะกระจายเท่า ๆ กันระหว่างสิ่งของที่ยืดหยุ่นได้เพื่อให้ช่องว่างระหว่างขอบของคอนเทนเนอร์และเนื้อหาเป็นครึ่งหนึ่งของช่องว่างระหว่างรายการที่ยืดหยุ่น

ตอนนี้เราจะดูวิธีใช้คุณสมบัติ justify-content พร้อมตัวอย่าง

ดิ้นเริ่มต้น

ในการส่งผ่านค่านี้ไปยังคุณสมบัติ justify-contentรายการแบบยืดหยุ่นจะถูกวางไว้ที่จุดเริ่มต้นของคอนเทนเนอร์

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงผลลัพธ์ของการส่งผ่านค่า flex-start ไปที่ justify-content ทรัพย์สิน.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ปลายงอ

ในการส่งผ่านค่านี้ไปยังคุณสมบัติ justify-contentรายการที่ยืดหยุ่นจะถูกวางไว้ที่ส่วนท้ายของภาชนะ

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงผลลัพธ์ของการส่งผ่านค่า flex-end ไปที่ justify-content ทรัพย์สิน.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:flex-end;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ศูนย์

ในการส่งผ่านค่านี้ไปยังคุณสมบัติ justify-contentรายการเฟล็กซ์จะถูกวางไว้ที่กึ่งกลางของคอนเทนเนอร์ซึ่งจะมีการกระจายพื้นที่เพิ่มเติมอย่างเท่าเทียมกันในตอนเริ่มต้นและตอนท้ายของรายการเฟล็กซ์

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงผลลัพธ์ของการส่งผ่านค่า center ไปที่ justify-content ทรัพย์สิน.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:center;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ช่องว่างระหว่าง

ในการส่งผ่านค่านี้ไปยังคุณสมบัติ justify-contentช่องว่างพิเศษจะกระจายเท่า ๆ กันระหว่างรายการดิ้นเพื่อให้ช่องว่างระหว่างสองรายการดิ้นเท่ากันและจุดเริ่มต้นและจุดสิ้นสุดของรายการดิ้นสัมผัสกับขอบของภาชนะ

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงผลลัพธ์ของการส่งผ่านค่า space-between ไปที่ justify-content ทรัพย์สิน.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:space-between;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

อวกาศรอบ ๆ

ในการส่งผ่านค่านี้ไปยังคุณสมบัติ justify-contentช่องว่างพิเศษจะกระจายเท่า ๆ กันระหว่างรายการดิ้นเพื่อให้ช่องว่างระหว่างสองรายการดิ้นเท่ากัน อย่างไรก็ตามช่องว่างระหว่างขอบของคอนเทนเนอร์และเนื้อหา (จุดเริ่มต้นและจุดสิ้นสุดของรายการดิ้น) จะเป็นครึ่งหนึ่งของช่องว่างระหว่างรายการดิ้น

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงผลลัพธ์ของการส่งผ่านค่า space-around ไปที่ justify-content ทรัพย์สิน.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:space-around;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

เว้นวรรคเท่า ๆ กัน

ในการส่งผ่านค่านี้ไปยังคุณสมบัติ justify-contentช่องว่างพิเศษจะกระจายเท่า ๆ กันระหว่างรายการดิ้นเพื่อให้ช่องว่างระหว่างสองรายการดิ้นเท่ากัน (รวมถึงช่องว่างถึงขอบ)

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงผลลัพธ์ของการส่งผ่านค่า space-evenly ไปที่ justify-content ทรัพย์สิน.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:space-evenly;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -