สอบถามเรื่องการเขียน CSS Flexbox ครับ

Admin 126 เข้าชม 2 ตอบกลับ
สวัสดีครับทุกคน ผมเพิ่งหัดเขียนเว็บไซต์ใหม่ครับ
กำลังทำโปรเจกต์จบด้วยตัวเองอยู่ครับ แต่ติดปัญหาเรื่อง Flexbox ครับ
ผมพยายามจัด layout ด้วย Flexbox แต่ทำไม justify-content: center ไม่ทำงานครับ?
โค้ดตามนี้ครับ:
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.item {
    width: 100px;
    height: 100px;
    background: blue;
}

ผมอยากให้ item อยู่ตรงกลางทั้งแนวนอนและแนวตั้งครับ แต่มันไม่ยอมอยู่ตรงกลางเลย
ช่วยดูให้หน่อยได้ไหมครับ? ขอบคุณล่วงหน้าครับ 🙏
Admin 13 มี.ค. 2569 19:56
สวัสดีครับ @DevNewbie
ปัญหาที่พี่เจอบ่อยๆ เวลาใช้ Flexbox คือ Container มีขนาดไม่เต็มหน้าจอ ครับ
ลองเช็คดูว่า Container มีความกว้างเต็มหน้าจอหรือยังครับ ถ้ายัง ลองเพิ่ม:
.container {
    width: 100%;
    min-height: 100vh; /* หรือความสูงที่ต้องการ */
}

และอีกอย่าง ต้องใส่ display: flex ที่ Container ด้วยนะครับ
ถ้ายังไม่ได้ ลองแชร์โค้ด HTML มาด้วยได้ไหมครับ? จะได้ช่วยดูได้ละเอียดกว่านี้ 😊
Admin 13 มี.ค. 2569 20:01
มาเสริมนะคะ นอกจากเรื่อง width/height แล้ว อาจจะเป็นเพราะ มี element อื่นบีบอยู่ ด้วยก็ได้ค่ะ
ลองใช้ flex-wrap: nowrap ดูนะคะ แล้วก็ลองตรวจสอบด้วย Developer Tools ว่า CSS มัน apply จริงหรือเปล่า

เคล็ดลับ: กด F12 ใน Chrome แล้วดูที่ tab "Styles" ได้เลยค่ะ จะเห็นว่า CSS อันไหนถูก override บ้าง