Learning Log

I finished playing flexbox froggy and I’m just going to use this learning log to keep track of my notes on flexboxes because layout finally makes sense to me and I recoded my website with the correct divs and layout.

needs to be used with display: flex

justify-content (start, end, center, space-between, space-around, space-evenly)

• for formatting things horizontally or with the flow of the information

align-items (start, end, center, baseline, stretch)

• aligning things up and down

flex direction (row is default, column, row-reverse, column-reverse)

• sets the direction of the content, if column is used, it flips the axis (justify content is used on up down and align-items is used for horizontal)

order

• each item has a default order of 0, you can set order to 1 or -1, -2 etc to change the order of items

flex-wrap (no wrap, wrap, wrap-reverse)

• for wrapping when there are a lot of flexboxes

for the last level, i did

flex-direction: column-reverse; flex-wrap: wrap-reverse; align-content: space-between; justify-content: center;

craigslist redesign