INLS 572 Web Development CSS Flexbox Layout Joan Boone jpboone@email.unc.edu Slide 1
Topics Part 1: Flexbox Layout Overview Part 2: Examples: 2-3 column layouts Part 3: Flexbox for Navigation Part 4: Examples: Centering Content, Media Objects, Sticky Footers and Headers Part 5: Grid or Flexbox: Which layout to use? Slide 2
Flexbox Resources Articles, Tutorials A Complete Guide to Flexbox by Chris Coyier MDN: Flexbox MDN: Typical use cases of Flexbox Smashing: Use Cases for Flexbox by Rachel Andrew Codepen: Flexbox playground Specification: CSS Flexible Box Layout Module Caniuse: Browser support Slide 3
What is Flexbox Really For? The key phrase in the Flexbox specification is “distributing space and aligning content” • Flexbox is all about taking a bunch of things of varying sizes and fitting them into a container which itself has a varying size. • Flexbox is squishy. • Flexbox tries to create the best possible layout for our items, giving bigger items more space and smaller items less space, thus preserving the readability of content . If you find Flexbox hard and weird, it is often because you are trying to use • Flexbox as a grid system. If so, you are fighting against the very thing that makes it Flexbox, i.e., its inherent flexibility. • Patterns that suit flex layout well are those where we are not so interested in having a pixel-perfect size for each. We just want them to display well alongside each other. Slide 4 Source:Smashing: Use Cases for Flexbox by Rachel Andrew
Flexbox Layout: Basic Model CSS Flexbox is a model where you can lay out elements in a row or column. The elements “flex” their sizes, either by growing to fill unused space or shrinking to avoid overflowing the parent container Flex Container is the element on which display:flex is applied • • Flex Items are the children, or direct descendants, of the Flex Container Slide 5 Source: CSS Tricks – A Complete Guide to Flexbox
CSS Flexible Layout Module (Flexbox) Model and Terminology Contents (flex items) of a flex container can • be laid out in a row or column direction • have their display order reversed or rearranged • be laid out linearly along a single axis or wrapped into multiple lines • flex their sizes to respond to available space • be aligned with respect to the container or each other Slide 6 Source: W3C CSS Flexible Box Layout Module
Flex Container Properties flex-direction justify-content flex-wrap Slide 7 Source: CSS Tricks – A Complete Guide to Flexbox
Flex Container Properties align-items align-content Slide 8 Source: CSS Tricks – A Complete Guide to Flexbox
Flex Item Properties order flex-grow align-self Slide 9 Source: CSS Tricks – A Complete Guide to Flexbox
Topics Part 1: Flexbox Layout Overview Part 2: Examples: 2-3 column layouts Part 3: Flexbox for Navigation Part 4: Examples: Centering Content, Media Objects, Sticky Footers and Headers Part 5: Grid or Flexbox: Which layout to use? Slide 10
Basic Flexbox Layout: 2 column Flex Container <div class="content-flex-container"> <aside> <p>Sed ut ...</p> <p>Nemo enim ...</p> Flex Items </aside> (direct descendants of <section> <p>Lorem ipsum ...</p> Flex Container) <p>Duis aute irure ...</p> </section> </div> flex-2column.html Slide 11
Basic Flexbox Layout: 2 column <div class="content-flex-container"> <aside> <p>Sed ut ...</p> <p>Nemo enim ...</p> </aside> <section> <p>Lorem ipsum ...</p> <p>Duis aute irure ...</p> </section> </div> You can use the shorthand flex property to .content-flex-container { specify proportions. display: flex; } aside { flex is shorthand for flex-grow , flex- background-color: lightcoral; shrink , and flex-basis properties (the last flex: 1; } two are optional). section { background-color: turquoise; If you only specify one parameter, it defines the flex: 3; } flex-grow property. flex-grow defines the amount of available space in the container that the item should take up. The default flex-direction for a flex container is row, so the flex items are laid out If all items have flex-grow set to 1, the side by side in this example. remaining space in the container is distributed equally. In this case, section takes up 3 times as Click to view in CodePen much space as the other items. flex-2column.html Slide 12
Flexbox Layout: 3 column Flex Items Flex Container <div class="content-flex-container"> <aside class="aside1"> <p>Lorem ipsum ...</p> .content-flex-container { </aside> display: flex; } <section> .aside1, .aside2 { <p>Lorem ipsum ...</p> background-color: lightcoral; <p>Pellentesque habitant....</p> flex: 1; } </section> section { <aside class="aside2"> background-color: turquoise; <p>Lorem ipsum dolor...</p> flex: 2; } <p>More lorem ipsum dolor ..</p> </aside> </div> flex-3column.html Slide 13
Exercise: Flexbox Layout How can you use the flex and order properties to change the proportions of the flex items, and the order of the <aside> elements as shown below: Slide 14
Topics Part 1: Flexbox Layout Overview Part 2: Examples: 2-3 column layouts Part 3: Flexbox for Navigation Part 4: Examples: Centering Content, Media Objects, Sticky Footers and Headers Part 5: Grid or Flexbox: Which layout to use? Slide 15
Using Flexbox for Navigation Flex container with 4 flex items Slide 16
Using Flexbox for Navigation HTML CSS .nav-flex-container { <nav class="nav-flex-container"> <a href="">Link 1</a> background-color: darkmagenta; <a href="">Link 2</a> display: flex; <a href="">Link 3</a> flex-wrap: wrap; <a href="">Link 4</a> justify-content: center; <a href="">Link 5</a> } <a href="">Link 6</a> </nav> flex-navigation.html Slide 17
Using Flexbox for “Split” Navigation HTML CSS .nav-flex-container { <nav class="nav-flex-container"> background-color: darkmagenta; <a href="#">Work</a> display: flex; <a href="#">Services</a> flex-wrap: wrap; <a href="#">Resources</a> justify-content: center; <a href="#">About</a> } <a class="push" href="#">Contact</a> .push { </nav> margin-left: auto; } flex-split-navigation.html Slide 18 Source: MDN Split Navigation
Topics Part 1: Flexbox Layout Overview Part 2: Examples: 2-3 column layouts Part 3: Flexbox for Navigation Part 4: Examples: Centering Content, Media Objects, Sticky Footers and Headers Part 5: Grid or Flexbox: Which layout to use? Slide 19
Using Flexbox to Center Content Default layout <aside class="aside-flex-container"> <i class="fas fa-sun fa-5x"></i> </aside> How to center the icon? • Put the icon in a flex container • Add these properties: .aside-flex-container{ display: flex; align-items: center; justify-content: center; } flex-centered-icon.html Slide 20
Media Object Pattern using Flexbox The Media Object pattern is found everywhere – it refers to a two-column box with an image on one side and descriptive text on the other. Flex container National Geographic align-items: flex-start; flex: 1; max-width: 35%; Flex items References Solved by Flexbox: Media Object • • CSS-Tricks: The Media Object, A Bunch of Ways • Flexbox Media Object Examples flex-media-object.html Slide 21
Sticky Footer Problem How to force the footer to stick to the bottom of the page when the page has sparse content? Slide 22
Sticky Footer Problem How to force the footer to stick to the bottom of the page when the page has sparse content? Add a wrapper <div> around • the page content (header, aside, section, footer) • Make the wrapper a column- oriented flex container Set its min-height: • 100vh; This corresponds to 100% of the browser viewport height For the .content-flex- • container (aside, section), set flex:1 -- forces main content to use all vertical space. Source: Solved by Flexbox: Sticky Footer Slide 23 sticky-footer-flex-2column.html
Positioning The CSS position property lets you alter the positioning scheme of a particular element. Static: corresponds to the normal flow, and is the default • • Relative: positions an element relative to where it would normally appear in the page flow • Absolute: similar to relative positioning but the offset is relative to the entire browser window • Fixed: similar to absolute but fixed elements don't scroll with the rest of the page Top, left, bottom, and right properties specify the offset MDN: position property Slide 24
Sticky Header + Scrolled Content Header sticks to the top of the window and content scrolls behind it The position of the header is fixed to header { position: fixed; the top edge of its container element, top: 0; and spans its entire width. width: 100% } w3schools: On scroll header sticky-header-flex-2column.html Slide 25
Recommend
More recommend
