Flexbox

● ● ● ● ●

Layout for graphical user interfaces (GUI)

• Align sibling elements in rows or columns
• Lay out rows left-right (row) or right-left (row-reverse)
• Lay out columns down (column) or up (column-reverse)
• Distribute space inside or between (not yet in cur­rent ex­per­i­men­tal im­ple­men­ta­tions) sibling elements
• Change order inside a row or column

More flexible than tables and simpler than Grid Templates when structure matches the layout

Flexbox

● ● ● ● ●

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}

Flexbox

● ● ● ● ●

Flexbox could (not yet in cur­rent ex­per­i­men­tal im­ple­men­ta­tions) be used to make a “column-major” table:

• TABLE's children horizontally:
  table { display: flexbox; flex-direction: row }
• TR's children vertically:
  tr { display: column; flex-direction: column }

Flexbox – alignment

● ● ● ● ●

Elements in a row or column can be

• Stretched (default)
  flex-align: stretch
• Centered
  flex-align: center
• Aligned to a side
  flex-align: start or flex-align: end

There is also flex-item-align to set on the children (not yet in cur­rent ex­per­i­men­tal im­ple­men­ta­tions)

Flexbox – status

● ● ● ● ●

Experimental implementations in various browsers.

(With syntax based on early drafts)