Readings: CSS Layout
Learn CSS - Flexbox
- Flexbox is designed for one-dimensional content. Explain what this means.
- it takes a bunch of items of different sizes and returns the best layout for those items.
- Explain the difference between the main axis and cross axis.
- the main axis is set by your
flex-direction
property
- if that is
row
your main axis is along the row
- the cross axis runs in the opposite direction to the main axis
- if
flex-direction
is row
the cross axis runs along the column
- you can move items individually as a group so they align against each other and the flex container
- if that is
column
your main axis is along the column
- flex items move as a group on the main axis.
- there are a bunch of items and flexbox is trying to get the best layout for them as a group
- How can using certain properties of flexbox negatively impact accessibility?
- reordering the visual display away from how things are ordered in the HTML document can negatively impact accessibility
row-reverse
and column-reverse
values are a good example of this
- the reordering only happens visually, not logically
CSS Layout - Flexbox (Read to “Flex-Flow Shorthand”)
- What are some advantages of using flexbox over float?
- flexbox allows the vertical centering of a block of content inside its parent
- make all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available
- make all columns in a multiple column layout adopt the same height if they contain a different amount of content.
- How does this topic connect with your long term goals?
- UI styling is something I find I really enjoy. I like making my websites look good and flow well. I have been running into a lot of issues trying to get the layouts to work and haven’t explored flex prior to this. I look forward to getting some practice and tinkering more.