Responsive design with flexbox
0 likes806 views
The document discusses responsive design using Flexbox. It begins with an agenda that includes problems with float layouts, what Flexbox is, browser support, and practical use cases. It then defines Flexbox as allowing alteration of item widths and heights to fill available space. Key Flexbox properties are explained like flex-direction, flex-wrap, and justify-content. Browser support and fallbacks are also covered. Resources for learning more about Flexbox are provided.
Responsive design with flexbox
- 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
- 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.
- 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
- 26. Usage @Mediacurrent .flex-container { display: flex; } To use flexbox layout just set the display property on the parent HTML element:
- 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/