Link Search Menu Expand Document

Learn CSS - Flexbox

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

Flexbox is used to identify the best possible layout for elements that have different sizes. This is especially helpful when modifying multiple items of various sizes.

Explain the difference between the main axis and cross axis

The main axis of your flexbox is defined by your flex-direction. The main axis can either be set to row or column. Your cross axis will be the opposite direction of your main axis.

  • If your flex-direction is set to row, your main axis will be row and your cross axis will be column

How can using certain properties of flexbox negatively impact accessibility?

  • row-reverse will reverse the visual order but not the logical order
  • ‘column-reverse` will also reverse the visual order but not the local order

CSS Layout - Flexbox

What are some advantages of using flexbox over float?

Using a flexbox can potentially simplify element alignment by using a single axis versus using a float where you would need to float items left and right.

  • 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.

Geeks for Geeks Flexbox vs Float

How does this topic connect with your long term goals?

I enjoy graphic design and I feel like being able to accurately represent what my vision is or the vision of a client is paramount to completing a project.

Resources to use that present learning CSS basics in fun, interactive ways

Flexbox Froggy

CSS Tic-Tac-Toe

CSS Battle