reading-notes

CSS Layout

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

Flexbox is a one-dimensional layout model that was designed to provide greater control over alignment and space distribution between items within a container. Being one-dimensional, it only deals with layout in a single direction - columns or rows - at a time. This works well for smaller layouts, such as components https://www.wearediagram.com/blog/css-grid-vs.-flexbox-definitions-and-differences#:~:text=Flexbox%20is%20a%20one%2Ddimensional,smaller%20layouts%2C%20such%20as%20components.

Explain the difference between the main axis and cross axis.

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. If your main axis is column or column-reverse then the cross axis runs along the rows https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox#:~:text=The%20cross%20axis%20runs%20perpendicular%20to%20the%20main%20axis%2C%20therefore,axis%20runs%20along%20the%20rows.

How can using certain properties of flexbox negatively impact accessibility?

more complex flexbox layouts can get complicated real quick. Complicated layouts are also quite messy to debug. https://www.scaler.com/topics/css/css-grid-vs-flexbox/#:~:text=Disadvantages%20of%20Grid%20and%20Flexbox,to%20the%20traditional%20box%20model.&text=Flexbox%20may%20be%20simple%2C%20but,also%20quite%20messy%20to%20debug.

What are some advantages of using flexbox over float?

Easier to vertically center elements: Flexbox provides an easy and efficient way to vertically center elements within a container, which can be difficult to achieve with floats.

Better control over layout: With Flexbox, you can control the layout of your elements in both the horizontal and vertical directions. Floats can only be used to control layout in one direction, typically horizontally.

No need to clear floats: Floats can cause issues with clearing, which can lead to unexpected behavior and require additional CSS to fix. Flexbox doesn’t require clearing, making it a more efficient option. https://www.scaler.com/topics/css/css-grid-vs-flexbox/#:~:text=Disadvantages%20of%20Grid%20and%20Flexbox,to%20the%20traditional%20box%20model.&text=Flexbox%20may%20be%20simple%2C%20but,also%20quite%20messy%20to%20debug.

How does this topic connect with your long term goals?

It will help me better understand CSS coding to become a better web developer.