ใน
CSS ยังมีลูกเล่นมากมายให้ได้ลองกัน บทความนี้จะพูดถึง flex-wrap ว่าเป็นอย่างไร
flex-wrap ถูกใช้เพื่อระบุว่าไอเท็ม flex (flex items)ถูกบังคับให้อยู่ในบรรทัดเดียวหรือหลายบรรทัด การกำหนด
property flex-wrap ช่วยให้สามารถควบคุมทิศทางในการวางแนวของวัตถุได้ มันถูกใช้เพื่อกำหนดรูปแบบบรรทัดเดียวหรือหลายบรรทัดเพื่อสร้างรูปการจัดวางภายใน flex container ได้อย่างยืดหยุ่น
รูปแบบ syntax
โค้ด: เลือกทั้งหมด
flex-wrap: nowrap | wrap | wrap-reverse | initial;
Values of flex-wrap property ค่าที่ใช้กำหนด property ของ flex-wrap ดังนี้:
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
ใน [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css.html]CSS[/url] ยังมีลูกเล่นมากมายให้ได้ลองกัน บทความนี้จะพูดถึง flex-wrap ว่าเป็นอย่างไร
flex-wrap ถูกใช้เพื่อระบุว่าไอเท็ม flex (flex items)ถูกบังคับให้อยู่ในบรรทัดเดียวหรือหลายบรรทัด การกำหนด [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1/194-e-commerce/%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%98%E0%B8%B8%E0%B8%A3%E0%B8%81%E0%B8%B4%E0%B8%88/3615-property-%E0%B8%9E%E0%B8%A3%E0%B8%AD%E0%B8%9E%E0%B9%80%E0%B8%9E%E0%B8%AD%E0%B8%97%E0%B8%B5-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]property[/url] flex-wrap ช่วยให้สามารถควบคุมทิศทางในการวางแนวของวัตถุได้ มันถูกใช้เพื่อกำหนดรูปแบบบรรทัดเดียวหรือหลายบรรทัดเพื่อสร้างรูปการจัดวางภายใน flex container ได้อย่างยืดหยุ่น
รูปแบบ syntax
[code]flex-wrap: nowrap | wrap | wrap-reverse | initial;[/code]
[b]Values of flex-wrap property ค่าที่ใช้กำหนด property ของ flex-wrap ดังนี้:[/b]
1. [b]wrap[/b]: คุณสมบัตินี้ใช้เพื่อแบ่งไอเท็มเฟล็กออกเป็นหลายบรรทัด มันทำให้ไอเท็มจะอยู่ได้หลายบรรทัดตามความกว้างของ [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-html/2452-%E0%B8%9A%E0%B8%97%E0%B8%97%E0%B8%B5-9-html-element.html]element[/url] ที่กำหนด
ตัวอย่างโค้ด การใช้ flex-wrap: wrap;
[code]<!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>
[/code]
ผลลัพธ์ที่ได้
[img]http://snap.mindphp.com/index.php?view=2019Mar29_5c9df6c37c18e[/img]
2. [b]nowrap[/b]:ค่าเริ่มต้นของ wrap-flex คือ nowrap มันถูกใช้เพื่อระบุว่าตัวไอเท็มจะไม่มีการตัดไปบรรทัดใหม่ มันทำให้อยู่ในบรรทัดเดียวทั้งหมด
ตัวอย่างโค้ด การใช้ flex-wrap: nowrap;
[code]<!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>
[/code]
ผลลัพธ์
[img]http://snap.mindphp.com/index.php?view=2019Mar29_5c9df610f01e1[/img]
ผลลัพธ์ที่ได้จะอยู่ในบรรทัดเดียวทั้งแม้ว่าจะกำหนดความยาวแล้วก็ตาม ดังนั้นการใช้ flex-wrap property จะแตกต่ากันขึ้นอยู่กับค่าของ property ที่เรากำหนดจะเป็น wrap หรือ nowrap แล้วแต่จุดประสงค์ที่ต้องาร
[b]ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS[/b]
-[url=https://www.mindphp.com/forums/viewforum.php?f=73]สอนการใช้งาน HTML & CSS[/url]
-[url=https://www.mindphp.com/forums/viewforum.php?f=20]ถามตอบ HTML CSS[/url]
-[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css.html]บทเรียน CSS[/url]
-[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-html5.html]บทเรียน HTML5[/url]
-[url=https://www.mindphp.com/forums/viewforum.php?f=6]แลกเปลี่ยนความรู้ PHP[/url]