Transcript
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?
top related