When should I use Flexbox vs Grid?

Flexbox is for one-dimensional layouts — a row OR a column. Grid is for two-dimensional layouts — rows AND columns simultaneously. Use Flexbox for navbars, centering, button groups, list items. Use Grid for page layouts, image galleries, dashboard widgets. They compose well — Grid for the page skeleton, Flexbox inside each grid cell.

Why doesn't justify-content work the way I expect?

justify-content acts on the MAIN axis (defined by flex-direction). With flex-direction: row, justify-content: center horizontally centers; align-items: center vertically centers. With flex-direction: column, the axes swap — justify-content: center now vertically centers, align-items: center horizontally centers. Always check your flex-direction first.

How do I make items equal width with Flexbox?

Set flex: 1 on each item. That expands to flex: 1 1 0, meaning grow factor 1, shrink factor 1, basis 0 — all items get equal share of available space. If you want minimum content width, use flex: 1 1 auto. For three columns of equal width: parent display: flex, each child flex: 1.

Why are my flex items not wrapping?

Default flex-wrap is nowrap — items shrink to fit instead of wrapping. Add flex-wrap: wrap on the parent. Combined with min-width on children, this gives you responsive grids: parent is { display: flex; flex-wrap: wrap; gap: 16px; }, children are { flex: 1 1 250px } — wraps when items can't be 250px wide.

What's the difference between gap, margin, and padding in Flexbox?

gap (or row-gap / column-gap) adds spacing BETWEEN items only — no margin around the outer edges. margin on items also creates spacing but doubles up at the boundaries. padding on the parent adds inner space without affecting between-item spacing. gap is cleaner and easier to reason about than margins; use it whenever the browser supports it (Safari 14.1+, Chrome 84+ — basically everywhere).

CSS Flexbox Cheat Sheet

Complete Flexbox reference: container properties, item properties, common patterns, and gotchas.

Container properties

Property	Values	Effect
`display`	`flex` / `inline-flex`	Activate flexbox
`flex-direction`	`row` \| `row-reverse` \| `column` \| `column-reverse`	Main axis direction (default: row)
`flex-wrap`	`nowrap` \| `wrap` \| `wrap-reverse`	Allow items to wrap onto multiple lines
`justify-content`	`flex-start` \| `center` \| `flex-end` \| `space-between` \| `space-around` \| `space-evenly`	Distribute along main axis
`align-items`	`stretch` \| `flex-start` \| `center` \| `flex-end` \| `baseline`	Align on cross axis (single line)
`align-content`	Same as `justify-content` values	Distribute multi-line content on cross axis
`gap`	`1rem`, `16px 24px`	Space between items (replaces margins)

Item properties

Property	Values	Effect
`flex-grow`	Number (default 0)	Share of remaining space (1 = take available)
`flex-shrink`	Number (default 1)	How much to shrink if overflow (0 = never)
`flex-basis`	`auto`, `0`, `250px`, `30%`	Initial size before grow/shrink
`flex`	Shorthand: `flex: 1` = `1 1 0`	Combines grow/shrink/basis
`order`	Number (default 0)	Reorder visually without changing DOM
`align-self`	Override `align-items` for one item	Per-item cross-axis alignment

Common patterns

Goal	CSS
Center horizontally + vertically	`display: flex; justify-content: center; align-items: center;`
Sticky footer	Body: `display: flex; flex-direction: column; min-height: 100vh;` Main: `flex: 1`
Equal columns	Parent: `display: flex`; Children: `flex: 1`
Navbar (logo left, links right)	`display: flex; justify-content: space-between; align-items: center;`
Wrap on small screens	`display: flex; flex-wrap: wrap; gap: 1rem;` + child `flex: 1 1 250px`
Push one item to end	That item gets `margin-left: auto`
Reverse visual order	`flex-direction: row-reverse` or `order: -1` on specific item

Browser support & gotchas

• Flexbox itself: 99%+ support (IE11 had a buggy implementation; if you still need IE, use Autoprefixer).
• gap in flexbox: 95%+ (Safari 14.1+ from April 2021). Older Safari needs margin fallback.
• Default min-width of flex items is auto, not 0 — items can overflow if content is wider than the container. Add min-width: 0 on items if text is overflowing.
• Flexbox children must be direct DOM children. Wrapping with extra divs breaks flex behavior.
• Percentage flex-basis doesn't include gap — use flex: 1 1 calc(50% - 0.5rem) for two columns with 1rem gap.

Build flexbox layouts visually with our CSS Flexbox Playground.

CSS Flexbox Cheat Sheet — คู่มืออ้างอิงครบถ้วนสำหรับ Container และ Item Properties

CSS Flexbox เป็นเครื่องมือจัดเลย์เอาต์ที่ใช้งานได้จริงมากที่สุดในการพัฒนาเว็บสำหรับการจัดเรียงแบบมิติเดียว ไม่ว่าจะเป็น navigation bars กลุ่มปุ่ม แถวของการ์ด การจัดกึ่งกลางองค์ประกอบหนึ่งชิ้นไว้กลางหน้าจอ หรือการทำให้ sidebar เต็มความสูงของหน้า แม้จะรองรับดีตั้งแต่ปี 2015 นักพัฒนายังคงค้นหา syntax ที่แน่นอนสำหรับ align-content เทียบกับ align-items ค่า flex shorthand ที่ถูกต้อง หรือวิธี margin trick สำหรับการผลักรายการหนึ่งไปปลายแถว cheat sheet นี้รวบรวมทุกอย่างไว้ในที่เดียว

คู่มืออ้างอิงนี้แบ่งออกเป็นสี่ส่วน ได้แก่ Container properties (CSS ที่ใส่บน parent element ด้วย display: flex), Item properties (CSS ที่ใส่บน child elements แต่ละตัว), รูปแบบเลย์เอาต์ทั่วไป (code CSS สำเร็จรูปสำหรับโซลูชัน Flexbox ที่ต้องการบ่อยที่สุด) และข้อผิดพลาดในการรองรับ Browser (กรณีพิเศษที่ทำให้เกิดบัคเลย์เอาต์ใน production) แต่ละรายการแสดงชื่อ property ค่าที่รับได้ และสิ่งที่ค่าแต่ละค่าทำ ส่วน Common Patterns มีประโยชน์ที่สุดในทางปฏิบัติ มี CSS สำเร็จรูปสำหรับการจัดกึ่งกลาง sticky footer คอลัมน์เท่ากัน navbar และเลย์เอาต์ responsive wrapping

align-content เป็น Flexbox property ที่เข้าใจผิดมากที่สุด มันใช้ได้เฉพาะเมื่อตั้ง flex-wrap: wrap และมีเนื้อหาหลายบรรทัด บน container บรรทัดเดียวจะไม่มีผล ซึ่งทำให้สับสนเมื่อดูเหมือนไม่ทำอะไร flex shorthand (flex: 1) เทียบเท่ากับ flex: 1 1 0 คือ grow factor 1, shrink factor 1, basis 0 และเป็นวิธีที่ถูกต้องในการให้ children ทั้งหมดแบ่งพื้นที่ที่มีอยู่เท่าๆ กัน ข้อผิดพลาด min-width: 0: flex items มี min-width เริ่มต้นเป็น auto หมายความว่าเนื้อหาที่กว้างกว่าพื้นที่ที่มีอยู่ทำให้เกิด overflow แทนที่จะ wrap ให้เพิ่ม min-width: 0 ให้กับ flex items ที่มีข้อความยาว code block หรือรูปภาพกว้างที่ต้องการย่อให้เล็กกว่าขนาดธรรมชาติ

นักพัฒนา front-end ใช้มันเป็น bookmark เพื่อค้นหาชุดค่า property ที่แน่นอนที่ต้องการโดยไม่ต้องเปิด MDN หรือ Stack Overflow นักเรียน bootcamp ที่เรียนรู้ CSS layout ใช้มันเป็นแหล่งอ้างอิงขณะทำโปรเจกต์ เนื่องจากส่วน patterns ให้โซลูชันสำเร็จรูปสำหรับเลย์เอาต์ที่มักถูกกำหนดในหลักสูตรมากที่สุด วิศวกร UI ในบริษัทที่กำหนดมาตรฐาน design systems ใช้มันเมื่อจัดทำเอกสาร Flexbox-based layout utilities สำหรับ component library นักพัฒนาที่เขียน backend เป็นหลักแต่บางครั้งแตะ frontend ใช้มันเมื่อเกิดปัญหาเลย์เอาต์และต้องการแหล่งอ้างอิงเร็วโดยไม่หลงในเอกสาร

นี่คือหน้าอ้างอิงแบบ static ไม่มี input แบบโต้ตอบที่เก็บข้อมูล และไม่มีการส่งข้อมูลใดไปยังเซิร์ฟเวอร์ ใช้ Flexbox Playground ที่ลิงก์ไว้เพื่อสร้างและทดสอบเลย์เอาต์แบบ visual

คำถามที่พบบ่อย

When should I use Flexbox vs Grid?: Flexbox is for one-dimensional layouts — a row OR a column. Grid is for two-dimensional layouts — rows AND columns simultaneously. Use Flexbox for navbars, centering, button groups, list items. Use Grid for page layouts, image galleries, dashboard widgets. They compose well — Grid for the page skeleton, Flexbox inside each grid cell.
Why doesn't justify-content work the way I expect?: justify-content acts on the MAIN axis (defined by flex-direction). With flex-direction: row, justify-content: center horizontally centers; align-items: center vertically centers. With flex-direction: column, the axes swap — justify-content: center now vertically centers, align-items: center horizontally centers. Always check your flex-direction first.
How do I make items equal width with Flexbox?: Set flex: 1 on each item. That expands to flex: 1 1 0, meaning grow factor 1, shrink factor 1, basis 0 — all items get equal share of available space. If you want minimum content width, use flex: 1 1 auto. For three columns of equal width: parent display: flex, each child flex: 1.
Why are my flex items not wrapping?: Default flex-wrap is nowrap — items shrink to fit instead of wrapping. Add flex-wrap: wrap on the parent. Combined with min-width on children, this gives you responsive grids: parent is { display: flex; flex-wrap: wrap; gap: 16px; }, children are { flex: 1 1 250px } — wraps when items can't be 250px wide.
What's the difference between gap, margin, and padding in Flexbox?: gap (or row-gap / column-gap) adds spacing BETWEEN items only — no margin around the outer edges. margin on items also creates spacing but doubles up at the boundaries. padding on the parent adds inner space without affecting between-item spacing. gap is cleaner and easier to reason about than margins; use it whenever the browser supports it (Safari 14.1+, Chrome 84+ — basically everywhere).