responsive design with flexbox
TRANSCRIPT
Responsive Design with Flexbox
By: Mario Hernandez
2015 Drupal Camp Los Angeles August 29, 2015
Mario HernandezSr. Front-End Developer
@imariohernandez
Design/Theming● Usability Testing
● Responsive Design
● Drupal Theming
● Annotated Wireframes
@Mediacurrent
Development● Drupal Support
● Custom Module Development
● Large Scale Systems Integration
● Security & Performance Expertise
We help organizations build highly impactful, elegantly designed Drupal websites that achieve the strategic results you need.
Digital Strategy● Content Strategy
● Content Generation
● Result Metrics
● Marketing Automation Integration
● What Are the Problems?
● What is Flexbox?
● Browser Support
● Getting to Know Flexbox
● Practical Use Cases
● Fallbacks
@Mediacurrent
AGENDA
What are the problems with float layouts?● Relies heavily in floats
(floats have their own problems)
● Difficulty with containment
● Difficulty with equal-height columns
● No float:center
● No vertical center
@Mediacurrent
display: inline-block
@Mediacurrent
What is Flexbox?Flexbox is The New Black
@Mediacurrent
The ConceptParents, watch your children
@Mediacurrent
The Concept
@Mediacurrent
The defining aspect of the flexbox is the ability to alter its items' width and/or height to best fill the available space on any display device.
The Concept
@Mediacurrent
The defining aspect of the flexbox is the ability to alter its items' width and/or height to best fill the available space on any display device.
A flex container expands items to fill available free space, or shrinks them to prevent overflow.
@Mediacurrentsource: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
@Mediacurrentsource: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
flex-container
@Mediacurrentsource: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
flex-container
@Mediacurrentsource: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
flex-container
flex-item flex-item flex-item
@Mediacurrentsource: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
flex-container
main axis
flex-item flex-item flex-item
@Mediacurrentsource: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
flex-container
main axis
cros
s axis
flex-item flex-item flex-item
@Mediacurrent
flex-item flex-item flex-item
flex-container
main axis
cros
s axis
main size
source: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
@Mediacurrent
flex-item flex-item flex-item
flex-container
main axis
cros
s axis
main size
cros
s size
source: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
@Mediacurrent
flex-item flex-item flex-item
flex-container
main axis
cros
s axis
main size
cros
s size
source: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
main start main end
@Mediacurrent
flex-item flex-item flex-item
flex-container
main axis
cros
s axis
main size
cros
s size
cross start
cross end
source: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
main start main end
@Mediacurrent
flex-item flex-item flex-item
flex-container
main axis
cros
s axis
main size
cros
s size
cross start
cross end
source: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
main start main end
Learning the Flexbox Properties
@Mediacurrent
Flexbox Properties
@Mediacurrent
flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content
orderalign-selfflex-growflex-shrinkflex-basisflex
flex container flex item
Usage
@Mediacurrent
.flex-container { display: flex;}
To use flexbox layout just set the display property on the parent HTML element:
Resources
@Mediacurrent
● http://flexbox.io
● https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
● https://css-tricks.com/snippets/css/a-guide-to-flexbox/
● http://flexboxin5.com/
Thank You!Questions?
@Mediacurrent Mediacurrent.com
slideshare.net/mediacurrent