FLEXB X
COMP 126: Practical Web Design & Development for Everyone
INTRODUCTION TO
basic units: flex-container, flex-item
1. turn a container into a Flex container with the display property
.container {
display: flex; 2. Main axis/flex direction?
3. ADD FLEX ITEMS
<div class="container">
<div class="item1">item one</div>
<div class="item1">item two</div>
<div class="item1">item three</div>
</div>Now The child elements are flex-items and ready for flexbox!
with/out flexbox
display: inline-flex
PROPERTIES for flex-container
-
display (flex or inline-flex)
-
flex-direction (sets main axis)
-
flex-wrap (do items wrap from line to line inside container or just shrink/expand?)
-
flex-flow (shorthand for flex-direction and flex-wrap)
-
justify-content (aligns items along main axis)
-
align-items (aligns items along cross axis)
-
align-content (aligns multiple lines of items along cross axis)
-
gap, row-gap, column-gap (adds gaps between flex items)
These properties can only be applied to a container element to which you've applied display: flex; or display: inline-flex;
Justify-content: aligns flex-items along the main axis
Used primarily when the flex-items' sizes are fixed or at their max-height/max-width
ALIGN-ITEMS: ALIGNS ITEMS on CROSS AXIS
ALIGN-Content: aligns lines of items in cross axis
flex-wrap: whether flex-items wrap from line to line in a flex-container
Flex-item properties
- order: affects the order in which single items appear in a flex container
- align-self: overrides the default or assigned (with align-items) alignment for an individual item in a flex container
- flex-grow: how much should a flex item grow/what proportion of the available space should it take up, if space is available?
- flex-shrink: how much/by what proportion can a flex item shrink if necessary?
- flex-basis: default size of a flex item before any growing or shrinking or redistribution of available space in a flex container
NOTE: these properties can only be applied to individual items within a flex-container
ALIGN-SELF: OVERRIDES DEFAULT OR ALIGN-ITEMS ALIGNMENT FOR INDIVIDUAL FLEX-ITEMS
Order: alters items' order & flex-grow: how much flex items expand when there's room
Flex-shrink: how much flex items shrink if constrained
Flex-basis: default size of flex-items before space is distributed
Flex: shorthand for grow, shrink, basis
https://codepen.io/tkjn/pen/yLwWQav?editors=1100
stuff you can do with flexbox
center items in a container
distribute items equally
responsive navigation
responsive layout
flexbox LAYOUT demo
using flex:
126-Flexbox
By tkjn
