CSS Tips: flex-wrap การบีบ item ให้เหมาะสมกับตำแหน่ง

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

abdkode
PHP Super Member
PHP Super Member
Posts: 362
Joined: 07/01/2019 9:56 am

CSS Tips: flex-wrap การบีบ item ให้เหมาะสมกับตำแหน่ง

Postby abdkode » 29/03/2019 6:07 pm

ใน CSS ยังมีลูกเล่นมากมายให้ได้ลองกัน บทความนี้จะพูดถึง flex-wrap ว่าเป็นอย่างไร
flex-wrap ถูกใช้เพื่อระบุว่าไอเท็ม flex (flex items)ถูกบังคับให้อยู่ในบรรทัดเดียวหรือหลายบรรทัด การกำหนด property flex-wrap ช่วยให้สามารถควบคุมทิศทางในการวางแนวของวัตถุได้ มันถูกใช้เพื่อกำหนดรูปแบบบรรทัดเดียวหรือหลายบรรทัดเพื่อสร้างรูปการจัดวางภายใน flex container ได้อย่างยืดหยุ่น

รูปแบบ syntax

Code: Select all

flex-wrap: nowrap | wrap | wrap-reverse | initial;


Values of flex-wrap property ค่าที่ใช้กำหนด property ของ flex-wrap ดังนี้:
1. wrap: คุณสมบัตินี้ใช้เพื่อแบ่งไอเท็มเฟล็กออกเป็นหลายบรรทัด มันทำให้ไอเท็มจะอยู่ได้หลายบรรทัดตามความกว้างของ element ที่กำหนด

ตัวอย่างโค้ด การใช้ flex-wrap: wrap;

Code: Select all

<!DOCTYPE html>
<head>
   <title>flex-wrap property</title>
   <style>
      #main {
         width: 400px;
         height: 300px;
         border: 5px solid black;
         display: flex;
         flex-wrap: wrap;
      }
      
      #main div {
         width: 100px;
         height: 50px;
      }
      h1 {
         color:navy;
         font-size:42px;
         margin-left:50px;
      }
      h3 {
         margin-top:-20px;
         margin-left:50px;
      }
   </style>
</head>
<body>
   <h1>Mindphp</h1>
   <h3>The flex-wrap:wrap property</h3>
   <div id="main">
      <div style="background-color:#009900;">1</div>
      <div style="background-color:#00cc99;">2</div>
      <div style="background-color:#0066ff;">3</div>
      <div style="background-color:#66ffff;">4</div>
      <div style="background-color:#660066;">5</div>
      <div style="background-color:#663300;">6</div>
   </div>
</body>
</html>               

ผลลัพธ์ที่ได้
Image

2. nowrap:ค่าเริ่มต้นของ wrap-flex คือ nowrap มันถูกใช้เพื่อระบุว่าตัวไอเท็มจะไม่มีการตัดไปบรรทัดใหม่ มันทำให้อยู่ในบรรทัดเดียวทั้งหมด

ตัวอย่างโค้ด การใช้ flex-wrap: nowrap;

Code: Select all

<!DOCTYPE html>
<head>
   <title>flex-wrap property</title>
   <style>
      #main {
         width: 400px;
         height: 300px;
         border: 5px solid black;
         display: flex;
         flex-wrap: nowrap;
      }
      
      #main div {
         width: 100px;
         height: 50px;
      }
      h1 {
         color:navy;
         font-size:42px;
         margin-left:50px;
      }
      h3 {
         margin-top:-20px;
         margin-left:50px;
      }
   </style>
</head>
<body>
   <h1>Mindphp</h1>
   <h3>The flex-wrap:nowrap property</h3>
   <div id="main">
      <div style="background-color:#009900;">1</div>
      <div style="background-color:#00cc99;">2</div>
      <div style="background-color:#0066ff;">3</div>
      <div style="background-color:#66ffff;">4</div>
      <div style="background-color:#660066;">5</div>
      <div style="background-color:#663300;">6</div>
   </div>
</body>
</html>               

ผลลัพธ์
Image
ผลลัพธ์ที่ได้จะอยู่ในบรรทัดเดียวทั้งแม้ว่าจะกำหนดความยาวแล้วก็ตาม ดังนั้นการใช้ flex-wrap property จะแตกต่ากันขึ้นอยู่กับค่าของ property ที่เรากำหนดจะเป็น wrap หรือ nowrap แล้วแต่จุดประสงค์ที่ต้องาร

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP

  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 10 guests