Presented by Eric Meyer.
The Web prioritizes ubiquity over consistency.
History
- Using tables for layout was a hack to work around the limitations of the existing markup of the time.
- CSS 1 was not a layout system. It was meant to be used to change the appearance of content.
- Floats were never intended to be used for layout. Meant to replace the
align
attribute ofimg
elements. - Positioning was originally intended to be a layout system, but the implementation was less-than-perfect. Positioned elements couldn’t clear other elements. Floats could, which is how we ended up using floats for layout instead of positioning.
It is critical for us to see beyond the assumptions rooted in technical limitations that we’ve been making for years.
Layout
Flexbox
justify-content: space-between;
(alsospace-around
)flex-wrap
display: flex;
should be applied to the containing element. Child elements have aflex
property with values such asauto
andnone
.last-child
and other pseudo-elements care about markup order, not display order.- Alignment options:
stretch
,flex-start
,flex-end
,center
, andbaseline
Related Tweets
- Flexbox ‘justify-content’
- Flexbox ‘flex-wrap’
- Defining flexbox containers
- Altering the layout order of flexible boxes
- Flexbox ‘align-items’
- Flexbox ‘align-self’
- How to determine the direction of flexbox flow