ReadingNotes

CSS Layout

Flexbox

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

Flexbox excels at taking a lot of items that have different sizes and returning the best layout for those items.

What can you do with a flex layout?

Flex layouts have the following features: They can display as a row, or a column, 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, The items themselves can be aligned on the cross axis, Space can be distributed around the items and flex lines in a wrapped layout, using the Box Alignment properties.

THe main axis and the cross axis

The main thing to understanding flexbox is to understand the concpt of a main axis and a cross axis.

The main axis is the one set by your flex direction property. Flex items move as a group on the main axis.

## QUESTIONS

1. The Flexible Box Layout Model (flexbox) is a layout model designed for one-dimensional content.
2. The cross axis runs perpendicular to the main axis, therefore if your flex-direction (main axis) is set to row or row-reverse the cross axis runs down the columns.
3. You should be cautious when using any properties that reorder the visual display away from how things are ordered in the HTML documen
4. Positioning child elements becomes easier with flexbox. Flexbox is responsive and mobile-friendly. Flex container’s margins do not collapse with the margins of its content. We can easily change the order of elements on our webpage without even making changes in HTML.