reading-notes

CSS Layout

Learn CSS - Flexbox

1. Flexbox is designed for one-dimensional content. Explain what this means.

It means that flexbox content flows across a single axis or direction.

1. Explain the difference between the main axis and cross axis.

Main axis can run in one direction, on either the x or y axis, and the cross axis runs perpendicular to that specified main axis.

1. How can using certain properties of flexbox negatively impact accessibility?

Reordering items can be problematic for those who use screen readers. Screen readers present information from top down, as the are presented in the DOM. Reordering DOM elements may make visual, intuitive sense on the rendered page, but the visually impaired may not reap the same benefits.

CSS Layout - Flexbox

Read up to “Flex-Flow Shorthand”

1. What are some advantages of using flexbox over float?

Flexbox can more easily:

• vertically center content inside a parent element
• make all children of a container take up the same vertical and horizontal space, regardless of how much space is a available
• make content in columns adopt the same height, regardless of content

1. How does this topic connect with your long term goals?

It’s another tool in the toolbox for me. It feel like CSS is a lot of memorization. I like to think I can offload a lot of the memorization by having exposure to the techniques, like flexbox, and creating an abstract idea of them in my head. This way, even if I don’t remember the syntax or exactly 100% of the properties of the technique, I can do some google-fu to get me back up to par when it’s just the tool I need.

Bookmark and Review

Learn CSS - Layout

Things I want to know more about

• How would we do our old labs different if we knew about flexbox?

Previous Reading

Next Reading

This site is open source. Improve this page.