justify-content: space-between คำสั่ง flex ที่จะช่วยให้ระยะห่างแต่ละรูปเท่ากัน


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

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

User avatar
jamepiyawat
PHP VIP Members
PHP VIP Members
Posts: 1501
Joined: 21/05/2019 10:45 am

justify-content: space-between คำสั่ง flex ที่จะช่วยให้ระยะห่างแต่ละรูปเท่ากัน

Post by jamepiyawat » 19/11/2019 6:13 pm

สำหรับใครที่เรียงรูปหน้าเว็บไซต์เป็นแบบแถวยาว ๆ ก็คงจะต้องมีการจัดว่างตำแหน่งเรียงตำแหน่งรูปต่าง ๆ ตามที่เราต้องการกันและบทความนี้ก็จะข้อเสนอวิธีการที่จะทำให้รูปที่อยู่แถวเดียวกันมีระยะห่างเท่ากันด้วยคำสั่ง css ที่ต้องใช้ใน display: flex กันโดยคำสั่งนี้มีชื่อว่า justify-content: space-between วิธีการใช้จะเป็นอย่างไรลองไปดูกันเลย

ตอนแรกเราแสดงรูปเป็นแบบนี้
justify-content: space-between คำสั่ง flex ที่จะช่วยให้ระยะห่างแต่ละรูปเท่ากัน Selection_999(1758).png
Selection_999(1758).png (99.06 KiB) Viewed 28 times
แต่ถ้าเราใช้คำสั่งตามโค้ดตัวอย่างนี้

Code: Select all

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      .test_beew{
        display: flex;
        justify-content: space-between;
      }
    </style>
  </head>
  <body>
    <p>การใช้ space-between</p>
    <div class="test_beew">
      <img src="1.jpg" alt="" width="30%">
      <img src="2.jpg" alt="" width="30%">
      <img src="3.jpg" alt="" width="30%">
    </div>
  </body>
</html>
ผลลัพธ์ที่ได้รูปภาพจะแสดงผลออกมามีระยะห่างกันแบบนี้เป็นแบบนี้
justify-content: space-between คำสั่ง flex ที่จะช่วยให้ระยะห่างแต่ละรูปเท่ากัน Selection_999(1759).png
Selection_999(1759).png (97.66 KiB) Viewed 28 times
จาก css เราจะเห็นได้ว่าต้องใช้คำสั่ง display: flex ก่อนแล้วค่อยใช่ justify-content: space-between ที่จะทำให้รูปในแต่ละรูปนั้นใน class นั้นมีระยะห่างเท่า ๆ กัน

เป็นอย่างไรสำหรับคำสั่ง justify-content: space-between ที่จะทำให้รูปภาพในแถวนั้นมีระยะห่างเท่า ๆ กันไม่ใช่แค่รูปแต่แท็ก img อย่างเดียวแต่แท็กอื่น ๆ ก็สามารถทำให้มีระยะห่างเท่า ๆ กันได้ก็หวังว่าบทความนี้จะเป็นประโยชน์ให้กัทุกท่านที่เข้ามาอ่านกันนะ ครับ

ศึกษาเพิ่มเติม
บทเรียน HTML5
บทเรียน css
บทความแชร์ความรู้ CSS และ HTML

ท่านใดที่มีข้อสงสัยหรือติดปัญหาเกี่ยวกับ CSS และ HTML สามารถเขียนกระทู้ตั้งคำถามไว้ได้ที่
ถามตอบ HTML CSS

Return to “CSS Knowledge”

Users browsing this forum: No registered users and 2 guests