Flexing Your WordPress Themes

FLEXING YOUR WORDPRESS THEMES

Web Developer @Endo Creative

Developing in WordPress since 2014

Twitter: @tim_blodgett

WEB LAYOUT HISTORY

No Layout

No Layout

Table Layout

Table Layout

Float-Based Layout

Flexible Layout

Grid Layout

WHY NOW?

WHY NOW?

FLEXBOX COMPONENTS

Flex Container

Flex Items

<div class=“flex-container”>

<div class=“flex-item”>lorem</div>

<div class=“flex-item”>ipsum</div>

<div class=“flex-item”>foobar</div>

</div>

FLEX CONTAINERPROPERTIES

flex-direction

rowrow-reverse

columncolumn-reverse

flex-wrap

nowrapwrap

wrap-reverse

flex-flow

flex-directionflex-wrap

flex-flow: row-reverse wrap;

justify-content

flex-startflex-endcenter

space-betweenspace-around

align-items

flex-startflex-endcenterstretch

baseline

align-content

flex-startflex-endcenter

space-betweenspace-around

stretch

FLEX ITEMPROPERTIES

flex

flex-growflex-shrinkflex-basis

flex: 0 1 auto;

flex-grow

a number that dictates what amount of the available space inside the container the item

should take up (negative numbers are invalid)

flex-shrink

a number that defines the ability for a flex item to shrink if

necessary (negative numbers are invalid)

flex-basis

a size value that defines the default size of an element

before the remaining space is distributed

order

a number that dictates the order in which the flex item is

displayed (works similar to z-index)

align-self

flex-startflex-endcenterstretch

baseline

PERFECTLY CENTERED CONTENT

<p class=“flex-trick”>Center Me</p>

.flex-trick { display: flex; align-items: center; justify-content: center; width: 100%; height: 20em;}

SET FOOTER TO BOTTOM OF PAGE

<div class=“site”>

<header class=“site-header”>...</header>

<div class=“site-content”>...</div>

<footer class=“site-footer”>...</footer>

</div>

html, body { height: 100%}

.site { display: flex; flex-direction: column; justify-content: space-between;}

.site-footer { margin-top: auto;}

CSS Flexible Box Layout Module Level 1https://www.w3.org/TR/css-flexbox-1/

A Complete Guide to Flexboxhttps://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbugshttps://github.com/philipwalton/flexbugs

Flexbox Froggy – A game for learning CSS flexboxhttp://flexboxfroggy.com/

THANK YOU!!

Twitter: @tim_blodgett

QUESTIONS?