CSS Flexbox

[rogerxu]

Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)

A Complete Guide to Flexbox | CSS-Tricks

Flexbox - Learn web development | MDN

[rogerxu]

Flexbox

Container

Define a parent element as a Flex Container

.flex-container {
  display: flex;
}

• flex-direction
• flex-wrap
• flex-flow - flex-direction + flex-wrap
• justify-content
• align-items
• align-content - align multiple axes

flex-direction

Based on flex-direction: row (default) or column.

• main axis
• cross axis

flex-direction

• row
• column
• row-reverse
• column-reverse

flex-wrap

flex-wrap

• wrap
• wrap-reverse

Main axis alignment

justify-content

• flex-start (default)
• flex-end
• center
• space-between
• space-around

Cross axis alignment

align-items on flex-container

• flex-start
• flex-end
• center
• stretch (default)
• baseline

Item

All child elements become Flex Items

.flex-item {
  flex: 2 0 250px;
}

• order: <integer>
• flex-grow: <number>
• flex-shrink: <number>
• flex-basis - initial width
• flex: flex-grow flex-shrink flex-basis
• align-self - override align-items

Element Display Order

order: 0 based index value

flex-basis

• 0 - both content and available space
• 100px - initial width
• auto - only available space