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 7 Illustration assumes flex-direction: row (default) ## Slide 8 Illustration assumes flex-direction: row (default) ## Slide 9 Illustration assumes flex-direction: row (default) ## Slide 10 Illustration assumes flex-direction: column ## Slide 11 Illustration assumes flex-direction: column ## Slide 12 Illustration assumes flex-direction: column ## Slide 17 https://developer.mozilla.org/en-US/docs/Web/CSS/display ## Slide 18 https://codepen.io/websanity/pen/GYYMOa?editors=1100 ## Slide 19 https://developer.mozilla.org/en-US/docs/Web/CSS/display ## Slide 20 https://codepen.io/websanity/pen/dyGmwOy?editors=1100 ## Slide 21 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 24 → ← ↓ ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction ## Slide 25 → ← ↓ ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction ## 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 30 In other words, based on the direction of the text ## Slide 31 https://codepen.io/websanity/pen/ZEQxVLj?editors=1100 ## Slide 32 In other words, based on the direction of the text ## Slide 33 https://codepen.io/websanity/pen/ZEQxVLj?editors=1100 ## Slide 35 https://codepen.io/websanity/live/ZEQogLr ## Slide 36 https://codepen.io/websanity/live/ZEQogLr ## Slide 38 Bootstrap sm, md, lg http://codepen.io/websanity/pen/LpKxNX?editors=110 ## Slide 39 Bootstrap sm, md, lg http://codepen.io/websanity/pen/LpKxNX?editors=110 ## Slide 40 Bootstrap xs http://codepen.io/websanity/pen/LpKxNX?editors=110 ## Slide 41 Bootstrap xs http://codepen.io/websanity/pen/LpKxNX?editors=110 ## Slide 42 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap ## Slide 43 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap ## Slide 45 https://codepen.io/websanity/pen/qBbozmY?editors=1100 ## Slide 46 https://codepen.io/websanity/pen/qBbozmY?editors=1100 ## Slide 48 https://codepen.io/websanity/pen/qBbozmY?editors=1100 ## Slide 49 https://codepen.io/websanity/pen/qBbozmY?editors=1100 ## Slide 51 https://codepen.io/websanity/pen/qBbozmY?editors=1100 ## Slide 52 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow ## Slide 53 https://developer.mozilla.org/en-US/docs/Web/CSS/order ## Slide 54 https://codepen.io/websanity/pen/PoZRXEp?editors=1100 ## Slide 55 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 59 https://www.w3.org/TR/css-align-3/#overview ## Slide 62 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content ## Slide 63 start & end are discussed in Aligning via Writing Mode, coming up https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content ## Slide 64 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 65 https://codepen.io/websanity/pen/NWxYeYX?editors=1100 FIXME add flex-direction: column ## 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 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content ## Slide 69 https://codepen.io/websanity/pen/NWxYeYX?editors=1100 ## Slide 70 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content ## Slide 71 https://codepen.io/websanity/pen/NWxYeYX?editors=1100 ## Slide 72 http://codepen.io/websanity/pen/dovGdY?editors=110 ## Slide 73 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content ## Slide 74 https://codepen.io/websanity/pen/NWxYeYX?editors=1100 ## Slide 75 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content ## Slide 76 https://codepen.io/websanity/pen/NWxYeYX?editors=1100 ## Slide 77 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 79 https://developer.mozilla.org/en-US/docs/Web/CSS/align-items ## Slide 80 start & end are discussed in Aligning via Writing Mode, coming up https://developer.mozilla.org/en-US/docs/Web/CSS/align-items ## 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://developer.mozilla.org/en-US/docs/Web/CSS/align-items ## Slide 86 https://codepen.io/websanity/pen/PoZRXdj?editors=1100 ## Slide 87 https://developer.mozilla.org/en-US/docs/Web/CSS/align-items ## Slide 88 https://codepen.io/websanity/pen/PoZRXdj?editors=1100 ## Slide 89 https://codepen.io/websanity/pen/PoZRXdj?editors=1100 ## Slide 90 https://developer.mozilla.org/en-US/docs/Web/CSS/align-items ## Slide 91 https://codepen.io/websanity/pen/PoZRXdj?editors=1100 ## Slide 92 https://codepen.io/websanity/pen/PoZRXdj?editors=1100 ## Slide 93 https://caniuse.com/#feat=mdn-css_properties_align-items_flex_context ## Slide 94 https://developer.mozilla.org/en-US/docs/Web/CSS/align-self ## Slide 95 https://developer.mozilla.org/en-US/docs/Web/CSS/align-self start & end are discussed in Aligning via Writing Mode, coming up ## 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://developer.mozilla.org/en-US/docs/Web/CSS/align-self ## Slide 105 https://codepen.io/websanity/pen/GRoxPeE?editors=1100 ## Slide 106 https://developer.mozilla.org/en-US/docs/Web/CSS/align-self ## Slide 107 https://codepen.io/websanity/pen/GRoxPeE?editors=1100 ## Slide 108 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 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 start & end are discussed in Aligning via Writing Mode, coming up https://developer.mozilla.org/en-US/docs/Web/CSS/align-content ## 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 https://developer.mozilla.org/en-US/docs/Web/CSS/align-content ## Slide 126 https://codepen.io/websanity/pen/MWKVMLE?editors=1100 ## Slide 127 https://developer.mozilla.org/en-US/docs/Web/CSS/align-content ## Slide 128 https://codepen.io/websanity/pen/MWKVMLE?editors=1100 ## Slide 129 left & right aren't supported & don’t have clear use cases. ## Slide 131 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 133 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 134 Photo by Nana B Agyei. 2017-01-08. . Licensed CC BY 2.0 (https://creativecommons.org/licenses/by/2.0/). Accessed July 11, 2020. ## Slide 135 Note: safe also applies to grid as well, & will eventually apply to block layout also ## Slide 136 https://codepen.io/websanity/pen/JjGZyoB?editors=1100 ## Slide 138 https://codepen.io/websanity/pen/JjGZyoB?editors=1100 ## Slide 139 https://codepen.io/websanity/pen/JjGZyoB?editors=1100 ## Slide 142 https://codepen.io/websanity/pen/JjGZyoB?editors=1100 ## Slide 143 https://codepen.io/websanity/pen/JjGZyoB?editors=1100 ## Slide 144 Deveria, Alexis [@Fyrd]. “CSS property: align-items: Supported in Flex Layout: safe and unsafe”. Can I use…, 22 Oct 2023, https://caniuse.com/mdn-css_properties_align-items_flex_context_safe_unsafe, align-items. Web. 23 Oct 2023. MDN contributors. “align-items”. MDN Web Docs, 18 Oct 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/align-items. Web. 23 Oct 2023. Deveria, Alexis [@Fyrd]. “CSS property: justify-content: Supported in Flex Layout: safe and unsafe”. Can I use…, 22 Oct 2023, https://caniuse.com/mdn-css_properties_justify-content_flex_context_safe_unsafe. Web. 23 Oct 2023. MDN contributors. “justify-content”. MDN Web Docs, 17 July 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content. Web. 23 Oct 2023. ## Slide 145 Marathon Man (1976). . ## Slide 147 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 149 Diagrams created by Jans Carton & Scott Granneman ## Slide 150 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 152 https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap ## Slide 153 https://developer.mozilla.org/en-US/docs/Web/CSS/gap ## Slide 154 WebSanity. “CSS: flexbox - column-gap, row-gap, gap”. CodePen, 28 Apr 2023, https://codepen.io/websanity/pen/xxyLxdE?editors=1100. Web. 28 Apr 2023. ## Slide 155 WebSanity. “CSS: flexbox - column-gap, row-gap, gap”. CodePen, 28 Apr 2023, https://codepen.io/websanity/pen/xxyLxdE?editors=1100. Web. 28 Apr 2023. ## Slide 156 WebSanity. “CSS: flexbox - column-gap, row-gap, gap”. CodePen, 28 Apr 2023, https://codepen.io/websanity/pen/xxyLxdE?editors=1100. Web. 28 Apr 2023. ## Slide 157 WebSanity. “CSS: flexbox - column-gap, row-gap, gap”. CodePen, 28 Apr 2023, https://codepen.io/websanity/pen/xxyLxdE?editors=1100. Web. 28 Apr 2023. ## Slide 158 https://caniuse.com/#feat=mdn-css_properties_column-gap_flex_context & https://www.chromestatus.com/feature/6031643502444544 https://caniuse.com/#feat=mdn-css_properties_row-gap_flex_context & https://www.chromestatus.com/feature/6031643502444544 https://caniuse.com/#feat=flexbox-gap & https://www.chromestatus.com/feature/6031643502444544 ## Slide 161 https://developer.mozilla.org/en-US/docs/Web/CSS/margin ## Slide 162 https://codepen.io/websanity/pen/XWXqMpP?editors=1100 ## Slide 163 https://codepen.io/websanity/pen/xxZjqLe?editors=1100 ## Slide 164 https://codepen.io/websanity/pen/eWvZBW?editors=1100 ## Slide 165 FIXME add example for centering on all 4 sides using margin: auto (maybe the close button from the ws-modal?) ## Slide 167 FIXME colors ## Slide 170 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow ## Slide 171 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow ## Slide 172 https://codepen.io/websanity/pen/pogVGeG?editors=1100 ## Slide 173 https://codepen.io/websanity/pen/pogVGeG?editors=1100 ## Slide 174 https://codepen.io/websanity/pen/pogVGeG?editors=1100 ## Slide 175 Original size based upon content or overrides done with flex-basis https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink ## Slide 176 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink ## Slide 177 https://codepen.io/websanity/pen/qBbYvwM?editors=1100 ## Slide 178 https://codepen.io/websanity/pen/qBbYvwM?editors=1100 ## Slide 179 https://codepen.io/websanity/pen/qBbYvwM?editors=1100 ## Slide 182 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis ## Slide 183 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis ## Slide 184 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis ## Slide 185 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis ## Slide 186 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis ## Slide 187 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis https://www.w3.org/TR/css-flexbox-1/#flex-basis-property ## Slide 189 https://codepen.io/websanity/pen/ZEQoNJd?editors=1100 https://codepen.io/websanity/live/ZEQoNJd ## Slide 191 https://developer.mozilla.org/en-US/docs/Web/CSS/flex ## Slide 192 must never be negative, or it is ignored https://developer.mozilla.org/en-US/docs/Web/CSS/flex ## Slide 193 https://developer.mozilla.org/en-US/docs/Web/CSS/flex ## Slide 194 https://developer.mozilla.org/en-US/docs/Web/CSS/flex ## Slide 195 This really applies to 2-value syntax https://developer.mozilla.org/en-US/docs/Web/CSS/flex ## Slide 196 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 197 https://developer.mozilla.org/en-US/docs/Web/CSS/flex ## Slide 198 https://developer.mozilla.org/en-US/docs/Web/CSS/flex ## Slide 199 https://developer.mozilla.org/en-US/docs/Web/CSS/flex ## Slide 200 https://codepen.io/websanity/pen/QWpVyxq?editors=1100 ## Slide 201 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 202 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 204 https://github.com/philipwalton/flexbugs ## Slide 205 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ## Slide 206 http://philipwalton.github.io/solved-by-flexbox/ ## Slide 207 http://philipwalton.github.io/solved-by-flexbox/ ## Slide 208 https://scotch.io/demos/visual-guide-to-css3-flexbox-flexbox-playground ## Slide 209 Vanninen, Ville [sakamies]. “Flexbox cheatsheet”. Workflower Apps, http://apps.workflower.fi/css-cheats/?name=flexbox. Web. 14 Oct 2022. ## Slide 210 Vanninen, Ville [sakamies]. “Flexbox cheatsheet”. Workflower Apps, http://apps.workflower.fi/css-cheats/?name=flexbox. Web. 14 Oct 2022. ## Slide 211 Vanninen, Ville [sakamies]. “Flexbox cheatsheet”. Workflower Apps, http://apps.workflower.fi/css-cheats/?name=flexbox. Web. 14 Oct 2022. ## Slide 212 Vanninen, Ville [sakamies]. “Flexbox cheatsheet”. Workflower Apps, http://apps.workflower.fi/css-cheats/?name=flexbox. Web. 14 Oct 2022. ## Slide 213 Vanninen, Ville [sakamies]. “Flexbox cheatsheet”. Workflower Apps, http://apps.workflower.fi/css-cheats/?name=flexbox. Web. 14 Oct 2022. ## Slide 214 As if 2015-05-17 http://caniuse.com/#search=display%3A%20flex ## Slide 215 As if 2015-05-17 http://caniuse.com/#search=display%3A%20flex ## Slide 219 https://codepen.io/websanity/pen/aQpjZa?editors=1100 ## Slide 220 https://codepen.io/websanity/pen/aQpjZa?editors=1100 ## Slide 221 https://codepen.io/websanity/pen/aQpjZa?editors=1100 ## Slide 222 https://codepen.io/websanity/pen/aQpjZa?editors=1100 ## Slide 223 https://codepen.io/websanity/pen/aQpjZa?editors=1100 ## Slide 226 https://codepen.io/websanity/pen/zYNyQaN?editors=1100 ## Slide 227 https://codepen.io/websanity/pen/zYNyQaN?editors=1100 ## Slide 228 https://codepen.io/websanity/pen/zYNyQaN?editors=1100 ## Slide 230 https://codepen.io/websanity/pen/LYGqpJw?editors=1100 ## Slide 231 https://codepen.io/websanity/pen/LYGqpJw?editors=1100 ## Slide 232 https://codepen.io/websanity/pen/LYGqpJw?editors=1100 ## Slide 233 https://codepen.io/websanity/pen/LYGqpJw?editors=1100 ## Slide 237 https://codepen.io/websanity/live/ZEQogLr