FLEXB X

COMP 126: Practical Web Design & Development for Everyone

basic units: flex-container, flex-items

& items can also be containers with items of their own!

1. turn a container into a Flex container with the display property

.container {
  display: flex; 
}

2. Main axis/flex direction?

3. ADD content

<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"

PROPERTIES for the 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;

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 the CROSS AXIS

ALIGN-Content: aligns multiple lines of items on the cross axis

flex-wrap: whether flex items wrap upon resizing

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

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

Flex item sizing

flex: [grow] [shrink] [basis];
if flex-basis is set to auto, the item looks for the width of the item itself
flex: 1; equals flex: 1 1 0;
flex: auto; equals flex: 1 1 auto;

demo: Flex item sizing values

flex-grow: how much flex items expand when there's room

Flex-shrink: how much flex items shrink if constrained

Flex-basis: the size of the flex items before all the available space in the row or column is distributed

Flex: shorthand for grow, shrink, & basis