Notes for CSS - Layout - Flexbox By Scott Granneman & Jans Carton Find the presentation at http://www.granneman.com/presentations/ ## Slide 2 http://www.w3.org/TR/css-flexbox/ ## Slide 3 Diagram by Scott Granneman & Jans Carton ## Slide 6 Illustration assumes flex-direction: row (default) ## Slide 7 Illustration assumes flex-direction: row (default) ## Slide 8 Illustration assumes flex-direction: row (default) ## Slide 13 https://developer.mozilla.org/en-US/docs/Web/CSS/display ## Slide 14 https://codepen.io/websanity/pen/GYYMOa?editors=1100 ## Slide 15 https://developer.mozilla.org/en-US/docs/Web/CSS/display ## Slide 16 https://codepen.io/websanity/pen/dyGmwOy?editors=1100 ## Slide 17 https://caniuse.com/#feat=mdn-css_properties_display_flex https://caniuse.com/#feat=mdn-css_properties_display_inline-flex https://caniuse.com/#feat=flexbox ## Slide 20 → ← ↓ ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction ## Slide 21 → ← ↓ ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction ## Slide 22 In other words, based on the direction of the text ## Slide 23 https://codepen.io/websanity/pen/ZEQxVLj?editors=1100 ## Slide 24 In other words, based on the direction of the text ## Slide 25 https://codepen.io/websanity/pen/ZEQxVLj?editors=1100 ## Slide 26 In other words, based on the direction of the text ## Slide 27 https://codepen.io/websanity/pen/ZEQxVLj?editors=1100 ## Slide 28 In other words, based on the direction of the text ## Slide 29 https://codepen.io/websanity/pen/ZEQxVLj?editors=1100 ## Slide 31 https://codepen.io/websanity/live/ZEQogLr ## Slide 32 https://codepen.io/websanity/live/ZEQogLr ## Slide 34 Bootstrap sm, md, lg http://codepen.io/websanity/pen/LpKxNX?editors=110 ## Slide 35 Bootstrap sm, md, lg http://codepen.io/websanity/pen/LpKxNX?editors=110 ## Slide 36 Bootstrap xs http://codepen.io/websanity/pen/LpKxNX?editors=110 ## Slide 37 Bootstrap xs http://codepen.io/websanity/pen/LpKxNX?editors=110 ## Slide 38 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap ## Slide 39 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap ## Slide 41 https://codepen.io/websanity/pen/qBbozmY?editors=1100 ## Slide 42 https://codepen.io/websanity/pen/qBbozmY?editors=1100 ## Slide 44 https://codepen.io/websanity/pen/qBbozmY?editors=1100 ## Slide 45 https://codepen.io/websanity/pen/qBbozmY?editors=1100 ## Slide 47 https://codepen.io/websanity/pen/qBbozmY?editors=1100 ## Slide 48 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow ## Slide 49 https://developer.mozilla.org/en-US/docs/Web/CSS/order ## Slide 50 https://codepen.io/websanity/pen/PoZRXEp?editors=1100 ## Slide 51 https://caniuse.com/#feat=mdn-css_properties_flex-direction https://caniuse.com/#feat=mdn-css_properties_flex-wrap & https://github.com/philipwalton/flexbugs https://caniuse.com/#feat=mdn-css_properties_flex-flow https://caniuse.com/#feat=mdn-css_properties_order ## Slide 55 Note that justify-self & justify-items do not exist in Flexbox ## Slide 58 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content ## Slide 59 start & end are discussed in Aligning via Writing Mode, coming up https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content ## Slide 60 Might be rtl, top to bottom, or bottom to top depending on flex-direction https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content ## Slide 61 https://codepen.io/websanity/pen/NWxYeYX?editors=1100 ## Slide 62 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content ## Slide 63 https://codepen.io/websanity/pen/NWxYeYX?editors=1100 ## Slide 64 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content ## Slide 65 https://codepen.io/websanity/pen/NWxYeYX?editors=1100 ## Slide 66 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content ## Slide 67 https://codepen.io/websanity/pen/NWxYeYX?editors=1100 ## Slide 68 http://codepen.io/websanity/pen/dovGdY?editors=110 ## Slide 69 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content ## Slide 70 https://codepen.io/websanity/pen/NWxYeYX?editors=1100 ## Slide 71 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content ## Slide 72 https://codepen.io/websanity/pen/NWxYeYX?editors=1100 ## Slide 73 https://caniuse.com/#feat=mdn-css_properties_justify-content_flex_context https://caniuse.com/#feat=mdn-css_properties_justify-content_flex_context_space-evenly ## Slide 75 https://developer.mozilla.org/en-US/docs/Web/CSS/align-items ## Slide 76 start & end are discussed in Aligning via Writing Mode, coming up https://developer.mozilla.org/en-US/docs/Web/CSS/align-items ## Slide 77 https://developer.mozilla.org/en-US/docs/Web/CSS/align-items ## Slide 78 https://codepen.io/websanity/pen/PoZRXdj?editors=1100 ## Slide 79 https://developer.mozilla.org/en-US/docs/Web/CSS/align-items ## Slide 80 https://codepen.io/websanity/pen/PoZRXdj?editors=1100 ## Slide 81 https://developer.mozilla.org/en-US/docs/Web/CSS/align-items ## Slide 82 https://codepen.io/websanity/pen/PoZRXdj?editors=1100 ## Slide 83 https://developer.mozilla.org/en-US/docs/Web/CSS/align-items ## Slide 84 https://codepen.io/websanity/pen/PoZRXdj?editors=1100 ## Slide 85 https://codepen.io/websanity/pen/PoZRXdj?editors=1100 ## Slide 86 https://developer.mozilla.org/en-US/docs/Web/CSS/align-items ## Slide 87 https://codepen.io/websanity/pen/PoZRXdj?editors=1100 ## Slide 88 https://codepen.io/websanity/pen/PoZRXdj?editors=1100 ## Slide 89 https://caniuse.com/#feat=mdn-css_properties_align-items_flex_context ## Slide 90 https://developer.mozilla.org/en-US/docs/Web/CSS/align-self ## Slide 91 https://developer.mozilla.org/en-US/docs/Web/CSS/align-self start & end are discussed in Aligning via Writing Mode, coming up ## Slide 92 https://developer.mozilla.org/en-US/docs/Web/CSS/align-self ## Slide 93 https://codepen.io/websanity/pen/GRoxPeE?editors=1100 ## Slide 94 https://developer.mozilla.org/en-US/docs/Web/CSS/align-self ## Slide 95 https://codepen.io/websanity/pen/GRoxPeE?editors=1100 ## Slide 96 https://developer.mozilla.org/en-US/docs/Web/CSS/align-self ## Slide 97 https://codepen.io/websanity/pen/GRoxPeE?editors=1100 ## Slide 98 https://developer.mozilla.org/en-US/docs/Web/CSS/align-self ## Slide 99 https://codepen.io/websanity/pen/GRoxPeE?editors=1100 ## Slide 100 https://developer.mozilla.org/en-US/docs/Web/CSS/align-self ## Slide 101 https://codepen.io/websanity/pen/GRoxPeE?editors=1100 ## Slide 102 https://developer.mozilla.org/en-US/docs/Web/CSS/align-self ## Slide 103 https://codepen.io/websanity/pen/GRoxPeE?editors=1100 ## Slide 104 https://caniuse.com/#feat=mdn-css_properties_align-self_flex_context https://caniuse.com/#feat=mdn-css_properties_align-self_flex_context_baseline https://caniuse.com/#feat=mdn-css_properties_align-self_flex_context_stretch ## Slide 107 https://developer.mozilla.org/en-US/docs/Web/CSS/align-content ## Slide 108 https://codepen.io/websanity/pen/MWKVMLE?editors=1100 ## Slide 109 start & end are discussed in Aligning via Writing Mode, coming up https://developer.mozilla.org/en-US/docs/Web/CSS/align-content ## Slide 110 https://developer.mozilla.org/en-US/docs/Web/CSS/align-content ## Slide 111 https://developer.mozilla.org/en-US/docs/Web/CSS/align-content ## Slide 112 https://codepen.io/websanity/pen/MWKVMLE?editors=1100 ## Slide 113 https://developer.mozilla.org/en-US/docs/Web/CSS/align-content ## Slide 114 https://codepen.io/websanity/pen/MWKVMLE?editors=1100 ## Slide 115 https://developer.mozilla.org/en-US/docs/Web/CSS/align-content ## Slide 116 https://codepen.io/websanity/pen/MWKVMLE?editors=1100 ## Slide 117 https://developer.mozilla.org/en-US/docs/Web/CSS/align-content ## Slide 118 https://codepen.io/websanity/pen/MWKVMLE?editors=1100 ## Slide 119 https://developer.mozilla.org/en-US/docs/Web/CSS/align-content ## Slide 120 https://codepen.io/websanity/pen/MWKVMLE?editors=1100 ## Slide 121 https://developer.mozilla.org/en-US/docs/Web/CSS/align-content ## Slide 122 https://codepen.io/websanity/pen/MWKVMLE?editors=1100 ## Slide 123 https://developer.mozilla.org/en-US/docs/Web/CSS/align-content ## Slide 124 https://codepen.io/websanity/pen/MWKVMLE?editors=1100 ## Slide 125 left & right aren't supported & don’t have clear use cases. ## Slide 127 This is getting complicated, so we don’t really recommend you use it — just use align-content & justify-content https://developer.mozilla.org/en-US/docs/Web/CSS/place-content ## Slide 128 https://caniuse.com/#feat=mdn-css_properties_align-content_flex_context https://caniuse.com/#feat=mdn-css_properties_align-content_flex_context_stretch https://caniuse.com/#feat=mdn-css_properties_align-content_flex_context_space-evenly https://caniuse.com/#feat=mdn-css_properties_place-content_flex_context ## Slide 129 Photo by Nana B Agyei. 2017-01-08. . Licensed CC BY 2.0. Accessed July 11, 2020. ## Slide 130 Note: safe also applies to grid as well, & will eventually apply to block layout also ## Slide 131 https://codepen.io/websanity/pen/JjGZyoB?editors=1100 ## Slide 133 https://codepen.io/websanity/pen/JjGZyoB?editors=1100 ## Slide 134 https://codepen.io/websanity/pen/JjGZyoB?editors=1100 ## Slide 137 https://codepen.io/websanity/pen/JjGZyoB?editors=1100 ## Slide 138 https://codepen.io/websanity/pen/JjGZyoB?editors=1100 ## Slide 139 https://caniuse.com/#feat=mdn-css_properties_align-content_flex_context_safe_unsafe https://caniuse.com/#feat=mdn-css_properties_justify-content_flex_context_safe_unsafe ## Slide 140 Marathon Man (1976). . ## Slide 142 Note: start & end also apply to grid as well, & will eventually apply to block layout also For more on direction & writing mode, see the Direction & Writing Mode section in CSS Layout ## Slide 144 Diagrams created by Jans Carton & Scott Granneman ## Slide 145 https://caniuse.com/#feat=mdn-css_properties_justify-content_flex_context_start_end https://caniuse.com/#feat=mdn-css_properties_align-items_flex_context_start_end https://caniuse.com/#feat=mdn-css_properties_align-self_flex_context_start_end https://caniuse.com/#feat=mdn-css_properties_align-content_flex_context_start_end https://caniuse.com/#feat=mdn-css_properties_place-content_flex_context ## Slide 147 https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap ## Slide 148 https://developer.mozilla.org/en-US/docs/Web/CSS/gap ## Slide 149 https://caniuse.com/#feat=mdn-css_properties_column-gap_flex_context https://caniuse.com/#feat=mdn-css_properties_row-gap_flex_context https://caniuse.com/#feat=flexbox-gap ## Slide 152 https://developer.mozilla.org/en-US/docs/Web/CSS/margin ## Slide 153 https://codepen.io/websanity/pen/XWXqMpP?editors=1100 ## Slide 154 https://codepen.io/websanity/pen/xxZjqLe?editors=1100 ## Slide 155 https://codepen.io/websanity/pen/eWvZBW?editors=1100 ## Slide 160 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow ## Slide 161 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow ## Slide 162 https://codepen.io/websanity/pen/pogVGeG?editors=1100 ## Slide 163 https://codepen.io/websanity/pen/pogVGeG?editors=1100 ## Slide 164 https://codepen.io/websanity/pen/pogVGeG?editors=1100 ## Slide 165 Original size based upon content or overrides done with flex-basis https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink ## Slide 166 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink ## Slide 167 https://codepen.io/websanity/pen/qBbYvwM?editors=1100 ## Slide 168 https://codepen.io/websanity/pen/qBbYvwM?editors=1100 ## Slide 169 https://codepen.io/websanity/pen/qBbYvwM?editors=1100 ## Slide 172 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis ## Slide 173 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis ## Slide 174 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis ## Slide 175 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis ## Slide 176 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis ## Slide 177 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis https://www.w3.org/TR/css-flexbox-1/#flex-basis-property ## Slide 178 https://codepen.io/websanity/pen/ZEQoNJd?editors=1100 https://codepen.io/websanity/live/ZEQoNJd ## Slide 180 https://developer.mozilla.org/en-US/docs/Web/CSS/flex ## Slide 181 must never be negative, or it is ignored https://developer.mozilla.org/en-US/docs/Web/CSS/flex ## Slide 182 https://developer.mozilla.org/en-US/docs/Web/CSS/flex ## Slide 183 https://developer.mozilla.org/en-US/docs/Web/CSS/flex ## Slide 184 This really applies to 2-value syntax https://developer.mozilla.org/en-US/docs/Web/CSS/flex ## Slide 185 We are assuming you are not using width & height like we said not to do https://developer.mozilla.org/en-US/docs/Web/CSS/flex ## Slide 186 https://developer.mozilla.org/en-US/docs/Web/CSS/flex ## Slide 187 https://developer.mozilla.org/en-US/docs/Web/CSS/flex ## Slide 188 https://developer.mozilla.org/en-US/docs/Web/CSS/flex ## Slide 189 https://caniuse.com/#feat=mdn-css_properties_flex-grow https://caniuse.com/#feat=mdn-css_properties_flex-shrink https://caniuse.com/#search=flex-basis & https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis https://caniuse.com/#search=flex-basis ## Slide 190 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis https://caniuse.com/#search=flex-basis https://caniuse.com/#feat=mdn-css_properties_flex-basis https://caniuse.com/#feat=mdn-css_properties_flex-basis_auto https://caniuse.com/#feat=mdn-css_properties_flex-basis_content https://caniuse.com/#feat=mdn-css_properties_flex-basis_max-content https://caniuse.com/#feat=mdn-css_properties_flex-basis_min-content ## Slide 192 https://github.com/philipwalton/flexbugs ## Slide 193 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ## Slide 194 As if 2015-05-17 http://caniuse.com/#search=display%3A%20flex ## Slide 195 As if 2015-05-17 http://caniuse.com/#search=display%3A%20flex ## Slide 198 http://philipwalton.github.io/solved-by-flexbox/ ## Slide 199 http://philipwalton.github.io/solved-by-flexbox/ ## Slide 200 https://scotch.io/demos/visual-guide-to-css3-flexbox-flexbox-playground ## Slide 202 https://codepen.io/websanity/live/ZEQogLr