COMP 126: Practical Web Design & Development for Everyone

FLEXBOX

JOin our codehs class at codehs.com/go/E799E

basic units: flex-container, flex-items

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

.container {
  display: flex; 
}

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

2. Choose your 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)

  • justify-content (aligns items along main axis)

  • align-items (aligns items along cross 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)

  • 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;

basic flex & flex-direction

EXERCISE 1.1.1: MAKE THE ITEMS BEHAVE!

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

EXERCISE 1.1.2: MOVE THE ITEMS AROUND 1!

ALIGN-ITEMS: ALIGNS ITEMS on the CROSS AXIS

EXERCISE 1.1.3: MOVE THE ITEMS AROUND 2!

EXERCISE 1.1.4: PUT ME IN THE MIDDLE!

EXERCISE 1.1.5: PREDICT & RUN!

EXERCISE 1.1.7: Flexbox froggy!

levels 1-13

flex-wrap & gap

EXERCISE 1.1.7: MAKE THE CARDS FIT!

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

EXERCISE 1.1.8: ARRANGE THE ROWS!

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

margin: auto in flexbox

EXERCISE 1.1.9: A flex navbar!

Order: takes individual items out of their order in the html

Note: default order value of all items is 0!

Negative values are permitted.

ALIGN-SELF: OVERRIDES DEFAULT OR ALIGN-ITEMS ALIGNMENT FOR INDIVIDUAL FLEX ITEMS

EXERCISE 1.1.10: The rebel item

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

EXERCISE 1.1.11: what's The starting size?

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

EXERCISE 1.1.12: WHO GETS THE EXTRA SPACE?

Flex-shrink: how much flex items shrink when constrained

EXERCISE 1.1.13: something has to give

Flex: shorthand for grow, shrink, & basis

stuff you can do with flexbox

distribute items equally

Responsive content areas

image cards with background-images

cards of equal height

responsive layout with media query

full LAYOUT

126-Flexbox

By tkjn

Source: sasiporn

126-Flexbox

  • 9,697

More from tkjn