CSS Tips: การใช้ margin กับ flexbox

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

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

abdkode
PHP Super Member
PHP Super Member
โพสต์: 338
ลงทะเบียนเมื่อ: 07/01/2019 9:56 am

CSS Tips: การใช้ margin กับ flexbox

โพสต์โดย abdkode » 03/04/2019 2:53 pm

Flexbox เป็นหนึ่งสิ่งหนึ่งที่สนใจและน่าใช้ใน CSS การใช้ Auto Margins เมื่อเราระบุ margin เป็น auto ในทิศทางใด จะเห็นว่ามันจะเริ่มปรากฎด้วยการครอบครองพื้นที่ว่างในทิศทางนั้น ๆ เช่นเราระบุ margin-left: auto จะทำให้เกิดการจองพื้นที่ด้านซ้ายไว้

เราต้องการสร้าง navbar ให้เมนูส่วนอื่นอยู่ชิดซ้ายเว้นปุ่มลอคอินที่ให้อยู่ชิดขวา เราสามารถใช้ auto margins แก้ปัญหานี้ได้ ดังนี้

โค้ด: เลือกทั้งหมด

<html>

<head>
   <style>
      #container {
        display: flex;
        background: #e8eaed;
        height: 200px;
      }

      .box {
        width: 50px;
        height: 50px;
        padding: 0 10px;
        line-height: 50px;
        background: #434A54;
        color: #F5F7FA;
        border: 1px solid #CCD1D9;
        text-align: center;
      }

      #box3 {
        margin-left: auto;
      }
   </style>
</head>

<body>
   <div id="container">
      <div class="box" id="box1">Articles</div>
      <div class="box" id="box2">Courses</div>
      <div class="box" id="box3">Login</div>
   </div>
</body>

</html>

ผลลัพธ์ที่ได้ดังนี้
flexbox-1.jpg
flexbox-1.jpg (6.19 KiB) เปิดดู 66 ครั้ง

จากผลลัพธ์ เรากำหนดให้ box3 เป็น margin-left: auto; จะทำให้ชิดขวานั้นเอง

และจากบทความก่อนหน้านี้ viewtopic.php?f=73&t=55792 ซึ่งเป็นการทำให้กล่องทั้งหมดจะอยู่ตรงกลาง
รูปภาพ
หากเราต้องการให้อีลีเมนต์ต่าง ๆ อยู่กลางจอด้วยและกระจายตามแนวนอนด้วย เราไม่ต้องมานั่งใส่ justify-content และ align-items ให้วุ่นวายอีกต่อไป เพียงใช้ margin: auto ก็ได้ดังนี้

โค้ด: เลือกทั้งหมด

<html>

<head>
   <style>
      #container {
        display: flex;
        background: #37BC9B;
        height: 200px;
      }

      .box {
        width: 50px;
        height: 50px;
        line-height: 50px;
        background: #434A54;
        color: #F5F7FA;
        border: 1px solid #CCD1D9;
        text-align: center;
        margin: auto;
      }
   </style>
</head>

<body>
   <div id="container">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
   </div>
</body>

</html>

flexbox-auto mg.jpg
flexbox-auto mg.jpg (4.33 KiB) เปิดดู 66 ครั้ง

จากผลลัพธ์จะเห็นได้ว่า กล่องทั้งหมดจะอยู่ตรงกลางของ อีลีเมนต์นั้นและระยะห่างกันระหว่างซ้ายและขวาเท่ากัน เราสามารถนำไปประยุกต์ใช้กันได้น่ะครับ อาจจะนำ javascriptหรือ JQuery เป็นการสร้างให้เคลื่อนไหว้ได้เป็นต้น

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

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 5 และ บุคคลทั่วไป 0 ท่าน