Hello, I assumed that if we want to apply flex properties to an element first we declare it is flex like;
display: flex;
But in this example, tutorial asked us to use justify-content property to change layout of the flex items. Should we tell that these items are flex first?
And I was suspicious why no one left such question but me! I haven’t noticed the flex declaretion in the .container. I looked twice but obviously not careful enough.
Let’s say we have a flex container with a width of 600px. Then, in this flex container, we have three flex items with widths of 100px. If we set the flex container’s justify-content property to space-around, equal amount of space will be added before and after each element. In this example, the space before and after each flex item will be 50px. This is because if we have a parent container with a width of 600px, and 3 flex items with widths of 100px, the flex items will only take up 300px of their parent container’s width in total. So, we can add 50px of space before and after each flex item which will reach 600px in total
Note that because equal space (50px) will be added before and after each flex item, double the amount of space will be added between each element
That’s not how I understood it…I thought that if we set an element’s display property to flex (or inline-flex) their child elements will be considered flex items. However, that does not mean that the flex items themselves have a display property of flex (or inline-flex)
Right click any child element of a flex container and examine (inspect) the inherited properties in the CSS. I certainly cannot argue with you, apart from the assumption that children of a flex container are themselves flex containers. Let us know what you find out in your reading about flex inheritance.
@mtf I am wondering one thing…in the justify-content lesson, it states that the justify-content property is used to position flex items from left to right. Then, for the align-items property, it states that align-items is used to align flex items vertically. However, I was wondering, couldn’t the purposes of each of these properties be switched if we changed the flex-direction to column?
If we set the flex-direction to column, wouldn’t the justify-content property align items vertically, and the align-items property align items horizontally?
I guess in this day and age we should not be surprised when someone jumps out of the box. Regardless, be sure to apprise yourself of convention before drawing any conclusions. The goal is to have a stable UX that others can relate to. We may be breaking new ground but cannot throw the baby out with the bath water. Bottom line, learn, explore, experiment, but come back down to earth to check in, periodically. Don’t draw conclusions until you can back it up with best practice that is familiar to others on your collaboration team.
I found it extremely helpful to look at the MDN information on flexible box layout before diving into the Codecademy lessons. Codecademy has chosen to introduce aspects of flexbox in a different order than what you can find on the MDN. Getting an overview of the basic concepts of flexbox before diving into Codecademy’s lessons helped make the content much more understandable.