Using Flexbox to design a responsive layout.

1. Responsive Design
with Flexbox
By: Mario Hernandez
2015 Drupal Camp Los Angeles August 29, 2015

2. Mario Hernandez
Sr. Front-End Developer
@imariohernandez

3. 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

4. ● What Are the Problems?
● What is Flexbox?
● Browser Support
● Getting to Know Flexbox
● Practical Use Cases
● Fallbacks
@Mediacurrent
AGENDA

5. 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

6. display: block
@Mediacurrent

7. display: inline
@Mediacurrent

8. display: inline-block
@Mediacurrent

9. What is Flexbox?
Flexbox is The New Black
@Mediacurrent

10. The Concept
Parents, watch your children
@Mediacurrent

11. 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.

12. 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.

13. @Mediacurrent
source: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

14. @Mediacurrent
source: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
flex-container

15. @Mediacurrent
source: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
flex-container

16. @Mediacurrent
source: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
flex-container
flex-item flex-item flex-item

17. @Mediacurrent
source: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
flex-container
main axis
flex-item flex-item flex-item

18. @Mediacurrent
source: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
flex-container
main axis
crossaxis
flex-item flex-item flex-item

19. @Mediacurrent
flex-item flex-item flex-item
flex-container
main axis
crossaxis
main size
source: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

20. @Mediacurrent
flex-item flex-item flex-item
flex-container
main axis
crossaxis
main size
crosssize
source: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

21. @Mediacurrent
flex-item flex-item flex-item
flex-container
main axis
crossaxis
main size
crosssize
source: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
main start main end

22. @Mediacurrent
flex-item flex-item flex-item
flex-container
main axis
crossaxis
main size
crosssize
cross start
cross end
source: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
main start main end

23. @Mediacurrent
flex-item flex-item flex-item
flex-container
main axis
crossaxis
main size
crosssize
cross start
cross end
source: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
main start main end

24. Learning the Flexbox
Properties
@Mediacurrent

25. Flexbox Properties
@Mediacurrent
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
order
align-self
flex-grow
flex-shrink
flex-basis
flex
flex container flex item

26. Usage
@Mediacurrent
.flex-container {
display: flex;
}
To use flexbox layout just set the display property on the
parent HTML element:

27. Browser Support
@Mediacurrent

28. Fallbacks
@Mediacurrent

29. 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/

30. Thank You!
Questions?
@Mediacurrent Mediacurrent.com
slideshare.net/mediacurrent