Skip to the content.

Reading Assignment 08

Why This Matters

Flexbox really eliminates some of the shortcomings with using a function like float where there is more control across the axis the developer wants to align items. This makes for a sharper site and improves usability for impaired users when correctly applied.

Questions To Answer

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

Flexible is a layout model designed for one-dimensional content which means the model is about having objects of different sizes and giving a layout either in a vertical or horizontal direction the best layout for those items.

Explain the difference between the main axis and cross axis

The main axis is horizontal while the cross axis is vertical.

How can using certain properties of flexbox negatively impact accessibility?

Accessibility can be impaired or even broken when using certain functions of flexbox. An example of reduced functionality is when a column-reverse function is used. When someone is visually impaired and attempting to tab between links, the links will not follow the visual display but follow the DOM and can confuse the user. When items require a meaningful sequence of order such as building something, or something more simple like making a meal. The screen reader may get disjointed and read items out of order or worse jump to a completed different section of text before returning back to the recipe.

What are some advantages of using flexbox over float?

Flexbox can do the following over float:

How does this topic connect with your long term goals?

Although I started this program not seeing myself as a strictly front-end developer, with what I have found there is some development of UI pieces in a lot of what developers do. With more practice I can see me getting the use of flexbox as a design element in my CSS efforts.

Things I Want To Know More About

I need to keep working with flexbox. I attempted to try it in last week’s lab but it is obviously going to take practice. Also I need to look at the Flexbox Cheatsheet I received today and try practicing with it to get some more understanding.

Sources Utilized

Flexbox

Flexbox from MDN

Layout

Flexbox Cheatsheet