Fis forFlexbox

Challenges

  • Positioning HTML elements
  • Changing visual order of elements
  • Vertical alignment of texts and images
  • Layout

Positioning

  • float: right;
  • clear: right;
  • position: relative;
  • position: absolute;
  • right: 0;
    bottom: 0;
  • display: inline-block;
    margin: 0 auto;

Visual order

  • display: none;
  • @media only screen and (max-width: 767px){
    display: block;
    }

Vertical alignment

  • height: 25px;
    line-height: 25px;
  • What if multiple lines of copy?
  • What if the dynamic content drives the height of the container?
  • display: flex;

Flexbox 101

axis image
axis image

Layout?

  • Relied on bootstrap
  • Building tiles that are of equal height
  • Content authors

Evolution of the Internet

Websites are now:

  • Better designed
  • More functional
  • Mobile responsive
  • Content heavy

Challenges with layout

  • Needs to be responsive
  • Needs to be accessible
  • Needs to be robust & flexible
1
2
3
1
2
3
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Problems solved by flexbox

  • Robust and cleaner grids
  • Sticky footer
  • Vertical centering of elements

But what about CSS grid?

CSS grid is:

  • Unlike flexbox CSS grid is 2 dimensional
  • Can define column and row at the same time

Any questions?