Bert Bos & Eva Kasal | CSS3 in Style
Layout for graphical user interfaces (GUI)
row
) or
right-left (row-reverse
)
column
) or up
(column-reverse
)
More flexible than tables and simpler than Grid Templates when structure matches the layout
Demo: pack
From the demo:
p {display: flexbox; width: 100%} #one p {flex-pack: center} #two p {flex-pack: start} #three p {flex-pack: end} #five input {flex: 1}
Demo: table-like
Flexbox could (not yet in current experimental implementations) be used to make a “column-major” table:
table { display: flexbox; flex-direction: row }
tr { display: column; flex-direction: column }
Demo: alignment
Note: 'flex-align' is set on the row/column!
Elements in a row or column can be
flex-align: stretch
flex-align: center
flex-align: start
or
flex-align: end
There is also flex-item-align
to set on the
children (not yet in current
experimental
implementations)