Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with...
Transcript of Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with...
![Page 1: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/1.jpg)
Making Friends with Flexbox
Sara Cope@sarassassin
![Page 3: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/3.jpg)
Starting with the basics
![Page 4: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/4.jpg)
What is flexbox?
![Page 5: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/5.jpg)
Why you should care
![Page 6: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/6.jpg)
What flexbox is not
![Page 7: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/7.jpg)
![Page 8: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/8.jpg)
![Page 9: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/9.jpg)
Properties for the container
![Page 10: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/10.jpg)
.container { display: flex; }
![Page 11: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/11.jpg)
.container { flex-direction: row | row-reverse column | column-reverse; }
flex-direction
![Page 12: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/12.jpg)
flex-wrap
.container { flex-wrap: wrap | nowrap | wrap-reverse; }
![Page 13: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/13.jpg)
Getting started
1. Create your flex container with display: flex;
2. Set flex-direction to determine the layout of your items
3. Set flex-wrap to control if and how the items will wrap
![Page 14: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/14.jpg)
![Page 16: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/16.jpg)
![Page 17: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/17.jpg)
justify-content
.container { justify-content: flex-start | flex-end | center | space-between | space-around; }
![Page 18: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/18.jpg)
justify-content
![Page 19: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/19.jpg)
![Page 20: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/20.jpg)
align-items
.container { align-items: flex-start | flex-end | center | stretch | baseline; }
![Page 21: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/21.jpg)
![Page 22: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/22.jpg)
![Page 23: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/23.jpg)
Properties for the children
![Page 24: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/24.jpg)
flex-grow
.item { flex-grow: <number>; }
![Page 25: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/25.jpg)
![Page 26: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/26.jpg)
order
.item { order: <number>; }
![Page 27: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/27.jpg)
order
![Page 28: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/28.jpg)
![Page 29: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/29.jpg)
align-self
.item { align-self: flex-start | flex-end | center | baseline | stretch; }
![Page 30: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/30.jpg)
Flexbox Tips
1. Embrace the flex and try to forget how you used to do it
2. If you’re not sure, start with little components. Use Chrome Inspector
3. Works best on page components not an entire layout
![Page 31: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/31.jpg)
More Examples
Responsive pagination Simple Media Object Media card (tutorial)
![Page 32: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/32.jpg)
Vendor Prefixing
Autoprefixer Sass Mixins
![Page 33: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/33.jpg)
![Page 34: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/34.jpg)
IE 10+
![Page 35: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/35.jpg)
Resources
• What the Flexbox vid tutorial
• CSS-Tricks Flexbox Guide • Solved by Flexbox (tutorial) • Flexbox Cheatsheet
![Page 36: Making Friends with Flexbox - Drupal GovConGetting started 1. Create your flex container with display: flex; 2. Set flex-direction to determine the layout of your items 3. Set flex-wrap](https://reader034.fdocuments.in/reader034/viewer/2022050110/5f47a68d1c951a2c8e4d0589/html5/thumbnails/36.jpg)
• Ex. 1
• CodePen - Animated Flexbox Playground
• Ex. 2
• Ex. 3
• Flex-grow: demo
• Order: demo
• Responsive Flexbox Pagination
• Flexbox Media Object
• How to Build a News Website Layout with Flexbox
Links to Examples