Flexbox Layout

• Most useful for grouping elements along a single dimension.
• Applying display: flex applies flexbox layout to all the children elements, not the actual element that you apply flexbox to.
• Key Terms for the flexbox algorithm:
  • justify: to position something along the primary axis.
  • align: to position something along the cross axis.
  • content: a group of "stuff" that can be distributed.
  • items: single items that can be positioned individually.
• Flexbox supports z-indexing, you can use them as if it were rendered in position layout.

Directions and Axis

• There are 2 axis to which flexbox operates primary axis and secondary axis.
• The primary axis defaults to the horizontal axis and the secondary axis defaults to the vertical axis.
• flex-direction: column essentially flips these axis around, flex-direction: row is default configuration.
• justify-content spaces the elements along the primary axis.
• align-items spaces the items over the secondary axis.
  • A common issue is making texts of different sizes sit on the same "line".
  • We can address this issue by giving the flexbox container an align-items: baseline.
• align-self: allows us to align single elements rather than the entire group.
• align-content: moves the group around the available space along the cross axis.

Grow and Shrink

• flex-grow: determines how fast the element will grow when there is abundant space.
• flex-shrink: determines how fast the element shrinks when there isn't enough space.
  • Both these properties use Ratios, you pass them numbers like 1 or 10 and they represent a ratio of the available space.
  • For example if you give an element 3, you're saying you want this element to take up 3 times as much space as the other elements on that level.
• 2 important sizes when dealing with flexbox: minimum content size and hypothetical size.
  • minimum content size is the smallest an item can get without its contents overflowing
  • setting width in a flex row (or height in a flex column) sets the hypothetical size.
• flex-basis is the same as width in a flex row (height in a column). They're interchangeable but flex-basis will win in a conflict.
  • Only difference is flex-basis can't be smaller than its min content size, width can.
• flex: is a shorthand for doing flex-grow, flex-shrink and flex-basis which overrides width, which if left blank will be set to 0.
  • flex: 1 1 400px
  • This allows you to eliminate the hypothetical space to 0 and then flex-grow can chew up all that available space. As a handy trick.

Wrapping

• You can wrap elements that are in flex layout with flex-wrap: wrap.
• This can be handy when you have many elements and don't want them to get too small, so you line wrap them.

Content vs Items

• In CSS content refers to the collective as a whole, a group.
  • CSS is applied to the group once as a whole.
• On the other hand items refers to each item individually.
  • You may be doing stuff to every item (the group), but whatever is being applied is applied to each item individually.

Groups and Gaps

• Use margin: auto to greedily eat space to separate items in a flexbox.
• gap adds space between each flexbox child.

Ordering

• Flexbox arranges items based on DOM order by default, however we can tweak this order in flexbox if we want to.
• flex-direction is how we achieve this:
  • row: is default ordering.
  • column: flips the axis around.
  • row-reverse: flips the order around.
  • column-reverse: flips the axis and the order around.
  • NOTE: using reverse has the side effect of aligning the items to the right or at the bottom.
    • To counter this you can just use justify-content: flex-end, then it should behave as expected.
• Changing the order is only visual, people on a keyboard will still tab through items in the DOM order.
• order: is another way to order elements, it takes a number and then renders the elements in the order (similar to z-index)
• flex-wrap: wrap-reverse: will wrap upwards rather than downwards.
• We can remove an item from being able to be tabbed over by adding an attribute to the element: tabindex="-1"

min-width Gotcha

• Some elements such as text boxes have a minimum size due to browser defaults or the longest unbreakable string of characters.
• This can lead to unwanted overflows when the screen gets small.
• To avoid this we set a min-width: 0px.
• This paired with flex-shrink will allow the element to shrink appropriately.
• WARNING use this with caution, it is taking away a guard rail, meaning sometimes worse things can happen when you set this.

Return