Hannah Smith
- multi-skilled tech freelancer in Bristol
(web development, change management, analytics)
@hanopcan
wpbristol.co.uk
(This is my dog Lili and she is the boss!)
What is flexbox
What flexbox allows you to do
Some examples in WordPress
Intro to the CSS code
Please ask questions as we go – I like the audience participations and it’s more interesting for everyone.
wpbristol.co.uk
" The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. "
wpbristol.co.uk
wpbristol.co.uk
wpbristol.co.uk
It's a bunch of CSS commands that allow you to place items in a container and jiggle their arrangement about horizontally or vertically.
Want to see some pictures to illustrate?
(Yeah I needed some too the first time I heard about this)
wpbristol.co.uk
1
2
3
The container
The items
wpbristol.co.uk
We can control these items:
Horizontally
Vertically
wpbristol.co.uk
Flexbox has been told to lay these items out in a column (vertically) when the screen size gets narrower
(Flexbox was told to do this using CSS media queries)
1
2
3
wpbristol.co.uk
Now, flexbox has been told to change the order of these items when it's even narrower
(Again, flexbox had help from media queries to know when to do things)
1
2
3
wpbristol.co.uk
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
You can put flexboxes within flexboxes, making it really powerful - now we can make some complex layouts
Becomes an item AND a container
wpbristol.co.uk
wpbristol.co.uk
NB Flexbox isn't the only way to achieve complex layouts in websites.
There are lots of other frameworks out there that allow you to do layouts, often based on grids:
http://beebom.com/best-front-end-frameworks-for-bootstrap-alternative/
Text
So let's get into looking at some flexbox CSS code
wpbristol.co.uk
Text
wpbristol.co.uk
Our HTML
Our CSS
horizontally aligns
vertically aligns
wpbristol.co.uk
wpbristol.co.uk
Our CSS
wpbristol.co.uk
wpbristol.co.uk
Our CSS
wpbristol.co.uk
wpbristol.co.uk
Our HTML
Our CSS
wpbristol.co.uk
wpbristol.co.uk
wpbristol.co.uk
wpbristol.co.uk
wpbristol.co.uk
Containers
Items
Items
wpbristol.co.uk
wpbristol.co.uk