Flexbox

Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.

📗 文章

• 📗 A Complete Guide to Flexbox (CSS-Tricks) ⭐

• 📗 flexbugs

🛠 工具

• Flexbox Froggy ❤️❤️

📘 手冊

• flex property

• MDN ⟩ Basic concepts of flexbox

👥 相關

• 👉 display: inline-flex

• Layout ⟩ VStack

topics

• center with "flex" (compare: center with "transform")

• flex-direction - define main axis

• flex-wrap

• justify-content - alignment along main axis

• align-items - alignment along cross axis

• align-content - the spacing between lines (along cross axis)

key points

• Applying display: flex to an element turns it into a flex container, and its direct children turn into flex items.

• By default, using a flexbox produces elements of equal height.

• You can set widths and margins on the items; even though this would add up to more than a 100%, the flexbox sorts it out.

• use margin: auto to fill available space between the flex items.