reading-notes

CSS - The Flexbox

Reading Learn CSS - Flexbox

Flexbox is designed for one-dimensional content. Explain what this means. Explain the difference between the main axis and cross axis. How can using certain properties of flexbox negatively impact accessibility? CSS Layout - Flexbox

Read up to “Flex-Flow Shorthand”

What are some advantages of using flexbox over float? How does this topic connect with your long term goals? Bookmark and Review Learn CSS - Layout

One dimensional content

The flexbox is good at taking multiple items, that would normally go side by side, and according to the viewport, adjust those items so that nothing is too compact. This may mean putting an item below another item in mobile view.

Main and Cross Axis

The key to understanding flexbox is to understand the concept of a main axis and a cross axis. The main axis is the one set by your flex-direction property. If that is row your main axis is along the row, if it is column your main axis is along the column. Flex items move as a group on the main axis.

Ordering

You should continue to be mindful of the ordering of items, for accessibility. Using properties that reorder the visual display can confuse someone trying to understand the ordering of the HTML document.

Flexbox over Float

Float is hard to achieve for things like:

• Vertically centering a block of content inside its parent.
• Making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available.
• Making all columns in a multiple-column layout adopt the same height even if they contain a different amount of content.

(Mozilla)[https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox]

This is where flexbox shines.

My Learning

I’ve used flexbox in wordpress websites and understand the value of it. I can’t wait to expand on this!

Things I want to learn more about

I’m excited to use frameworks like bootsprap and tailwind.