reading-notes

Class 201.08

Notes

• Flexbox: To be clear, let’s reiterate what is happening here. The element we’ve given a display value of flex to is acting like a block-level element in terms of how it interacts with the rest of the page, but its children are laid out as flex items.
• whiteboard notes

Readings

• Learn CSS - Flexbox
• CSS Layout - Flexbox, Read up to “Flex-Flow Shorthand”
• Learn CSS - Layout

Q&A’s

CSS is fundamental to any coding, even backend, because everything touches a webpage eventually!

Learn CSS

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

   allows you to easily organize elements in a row or a column, but not both simultaneously It simplifies the process of creating flexible and responsive layouts, particularly when dealing with items in a linear sequence, without having to resort to complex float or positioning properties.

2. Explain the difference between the main axis and cross axis.

   main-axis is the flow we’re interested in, and cross-axis is the one perpedicular to that

   main-axis is determined by flex-direction (e.g. row and column)

3. How can using certain properties of flexbox negatively impact accessibility?

   not all languages has the same main-axis

CSS Layout - Flexbox

1. What are some advantages of using flexbox over float?

   can adapt to any size rendering easier and more intuitive

2. How does this topic connect with your long term goals?

   I need to have rudmentary understanding of front-end technologies; everything is connected to the web!

3. Bookmark and Review

References

• Google Bard and ChatGPT

This site is open source. Improve this page.