Flexible Box Layout (Flexbox)

Conceitos

Referência:

• CSS Flexible Box Layout Module Level 1 | W3C
• Flexbox Playground

Termos:

• Flex container
• Flex item
• Main axis (main-start, main-end)
• Cross axis (cross-start, cross-end)

Mapa Mental:

Display

MDN

Name: display

Value: flex | inline-flex

Initial: inline

display:

Flex Container

Orientation - Direction

MDN

Name: flex-direction

Value: row | row-reverse | column | column-reverse

Initial: row

directions:

Orientation - Wrap

MDN

Name: flex-Wrap

Value: nowrap | wrap | wrap-reverseWrap

Initial: nowrap

wraps:

Orientation - Direction & Wrap

MDN

Name: flex-flow
Value: <flex-direction> || <flex-wrap>
Initial: individual properties

directions-wraps:

Justify Content

MDN

Name: justify-content

Value: flex-start | flex-end | center | space-between | space-around

Initial: flex-start

justify-contents:

Alignment Items

MDN

Name: align-items

Value: flex-start | flex-end | center | baseline | stretch

Initial: stretch

alignment-items:

Alignment Content

MDN

Name: align-content

Value: flex-start | flex-end | center | space-between | space-around | stretch

Initial: stretch

alignment-content:

Flex Item

Alignment Self

MDN

Name: align-self

Value: auto | flex-start | flex-end | center | baseline | stretch

Initial: auto

alignment-self:

Ordering

MDN

Name: order
Value: <integer>
Initial: 0

ordering:

Flexibility Grow

MDN

Name: flex-grow
Value: <integer>
Initial: 0

flexibility-grow:

Flexibility Shrink

MDN

Name: flex-shrink
Value: <integer>
Initial: 1

flexibility-shrink:

Flexibility Basis

MDN

Name: flex-basis
Value: content | <width>
Initial: auto

flexibility-basis:

Flexibility Shorthand

MDN

Name: flex
Value: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]
Initial: 0 1 auto

flexibility:

Demo

• Menu (css-tricks)
• Cards (Article, Source)
• Holy Grail Layout (css-tricks)

Referências

• CSS Flexible Box Layout Module Level 1 | W3C
• CSS Box Alignment Module Level 3 | W3C
• CSS Flexible Box Layout | MDN
• Basic concepts of flexbox | MDN
• A Complete Guide to Flexbox | css-tricks
• CSS Flexible Box Layout Module | Can I Use
• Build a Minimalist HTML Card in just 53 lines of code (with Flexbox)
• How Flexbox works — explained with big, colorful, animated gifs
• Flexbox - The Ultimate CSS Flex Cheatsheet (with animated diagrams!)
• Learn CSS Flexbox in 5 Minutes
• Flexbox Cheat Sheet
• Flexbox - A friendly tutorial for modern CSS layouts
• Flexbox - Use Flexbox para levar a criação de layouts CSS ao próximo nível
• Guia Flexbox
• Flexbox in CSS | cssreference
• Flexbox - Align last itemin grid to the left
• Animated Flexbox (1, 2)
• The Complete Illustrated Flexbox Tutorial 👍
• Flexbox — The Animated Tutorial
• CSS Flex—An Interactive Tutorial
• Flex Guide
• Meet the first visual flexbox builder
• Flexbox — The Animated Tutorial

Editar esta página