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 torow
, 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.