reading-notes

Readings: CSS Layout

Learn CSS - Flexbox

  1. Flexbox is designed for one-dimensional content. Explain what this means.
    • it takes a bunch of items of different sizes and returns the best layout for those items.
  2. Explain the difference between the main axis and cross axis.
    • the main axis is set by your flex-direction property
      • if that is row your main axis is along the row
        • the cross axis runs in the opposite direction to the main axis
        • if flex-direction is row the cross axis runs along the column
        • you can move items individually as a group so they align against each other and the flex container
      • if that is column your main axis is along the column
        • flex items move as a group on the main axis.
        • there are a bunch of items and flexbox is trying to get the best layout for them as a group
  3. How can using certain properties of flexbox negatively impact accessibility?
    • reordering the visual display away from how things are ordered in the HTML document can negatively impact accessibility
    • row-reverse and column-reverse values are a good example of this
      • the reordering only happens visually, not logically

CSS Layout - Flexbox (Read to “Flex-Flow Shorthand”)

  1. What are some advantages of using flexbox over float?
    • flexbox allows the vertical centering of a block of content inside its parent
    • make all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available
    • make all columns in a multiple column layout adopt the same height if they contain a different amount of content.
  2. How does this topic connect with your long term goals?
    • UI styling is something I find I really enjoy. I like making my websites look good and flow well. I have been running into a lot of issues trying to get the layouts to work and haven’t explored flex prior to this. I look forward to getting some practice and tinkering more.