reading-notes

201 Reading Notes: Class 08

Summary: This class reading assignment is about CSS Layout

Flexbox is a layout mechanism designed for laying out groups of items in one dimension

Flex layouts have the following features, which you will be able to explore in this guide.

-They can display as a row, or a column. -They respect the writing mode of the document. -They are single line by default, but can be asked to wrap onto multiple lines. -Items in the layout can be visually reordered, away from their order in the DOM. -Space can be distributed inside the items, so they become bigger and smaller according to the space available in their parent. -Space can be distributed around the items and flex lines in a wrapped layout, using the Box Alignment properties. -The items themselves can be aligned on the cross axis.

“The main axis and the 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.” Main Axis is horizontal and Cross axis is vertical

How can using certain properties of flexbox negatively impact accessibility?

CSS Layout - Flexbox

Shorthand exists for flex-direction and flex-wrap: flex-flow.

[Source]https://web.dev/learn/css/flexbox/

What are some advantages of using flexbox over float? How does this topic connect with your long term goals?

Understanding legacy of web development and what is possible and not possible

[Source]https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats

Things I want to know more about

Floats