flex-wrap ถูกใช้เพื่อระบุว่าไอเท็ม flex (flex items)ถูกบังคับให้อยู่ในบรรทัดเดียวหรือหลายบรรทัด การกำหนด property flex-wrap ช่วยให้สามารถควบคุมทิศทางในการวางแนวของวัตถุได้ มันถูกใช้เพื่อกำหนดรูปแบบบรรทัดเดียวหรือหลายบรรทัดเพื่อสร้างรูปการจัดวางภายใน flex container ได้อย่างยืดหยุ่น
รูปแบบ syntax
โค้ด: เลือกทั้งหมด
flex-wrap: nowrap | wrap | wrap-reverse | initial;1. wrap: คุณสมบัตินี้ใช้เพื่อแบ่งไอเท็มเฟล็กออกเป็นหลายบรรทัด มันทำให้ไอเท็มจะอยู่ได้หลายบรรทัดตามความกว้างของ element ที่กำหนด
ตัวอย่างโค้ด การใช้ flex-wrap: wrap;
โค้ด: เลือกทั้งหมด
<!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>
2. nowrap:ค่าเริ่มต้นของ wrap-flex คือ nowrap มันถูกใช้เพื่อระบุว่าตัวไอเท็มจะไม่มีการตัดไปบรรทัดใหม่ มันทำให้อยู่ในบรรทัดเดียวทั้งหมด
ตัวอย่างโค้ด การใช้ flex-wrap: nowrap;
โค้ด: เลือกทั้งหมด
<!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>
ผลลัพธ์ที่ได้จะอยู่ในบรรทัดเดียวทั้งแม้ว่าจะกำหนดความยาวแล้วก็ตาม ดังนั้นการใช้ flex-wrap property จะแตกต่ากันขึ้นอยู่กับค่าของ property ที่เรากำหนดจะเป็น wrap หรือ nowrap แล้วแต่จุดประสงค์ที่ต้องาร
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP