Day 1 of #100daysofcode: yay flexbox!

First day of 100 on TOP curriculum.

Points of this article:

• what i'm doing today.
• my first flex real challenge
• Q-A
• answers to QA
• conclusion

if you're confused by what this is, i recommend you read my previous article:100 days of code after 1 year of uncertainty, to have a better understanding of what is this about.

what i'm doing today:

As you know, today is my first day in doing the 100daysofcode challenge, as i had previously worked on some of top's foundation sections i was really stuck on flexbox section, now don't get me wrong, spoiler alert i did solve it in the end after spending almost an hour on it.

my first flex real challenge

when considering the one hour i spent working on it, it's not as bad as i estimated ill stay on it, but that's not the whole truth i was stuck on it since last saturday and was jumping back and fort between school assignments and this modal(pop-up) that should be implemented using only flexbox, below is an image of the expected outcome:

and here's my results after 1 hour of digging and trying different approaches with flexbox:

as you can see it's not 100% accurate, but i thought my results were acceptable and decided not to beat myself much over it, after finishing and reviewing the solution suggested by TOP, i felt like i was running around in circles when the solution consisted of only a few lines of css and containing or grouping html elements to play with them using flexbox.

i'm still skeptic and have mixed feelings when i'm working through some code but i noticed things went a little smoother everytime i stayed consistent and trying different approaches
you can find these challenges on top's curriculum or just by forking their CSS exercises repository.

Q-A

in this section, i will list a couple of questions from top to test out my flexbox knowledge later on or if you wanna have some fun and see how much flex properties you really know

• What’s the difference between a flex container and a flex item?
• How do you create a flex item?
• What are the 3 values defined in the shorthand flex property?
• How do you make flex items arrange themselves vertically instead of horizontally?
• In a column flex-container, what does flex-basis refer to?
• In a row flex-container, what does flex-basis refer to?

answers to these are at the end of the article.

Conclusion

So that was that for the first day of the challenge, i tried to squeeze some time without counting the time spent reading articles or watching introduction videos, according to the challenge you should only count time that you spent coding or trying to solve different challenges using code, i may not keep posting daily but i will most certainly try, as i'm trying to balance back and forth between blogging, squeezing time for the challenge and keeping up with the school(bootcamp) curriculum we are currently working on a nodejs app but i'm certainly taking my time going over the basics with top, for a quick refresher check the article or day 0 of my challenge.

Answers to Q&A:

• What’s the difference between a flex container and a flex item?

answer: a flex container is any html element that has the display property set to flex, a flex item is a direct child of a parent that is a flex container:

element {
display: flex;
}

• How do you create a flex item?

answer: following up after the first question a flex item is created when you set it's parent element display's property to flex.

• What are the 3 values defined in the shorthand flex property?

answer: the flex property is a shorthand for 3 properties flex-grow: defines how much the item set to can grow off the flex-basis , flex-shrink, defines how much an item can shrink if the parent container can no longer fit its original width,
and lastly flex basis which is set to 0 by default

so by that we conclude that flex:1 0 auto;
is equivalent to

flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;

• How do you make flex items arrange themselves vertically instead of horizontally?

answer: You can set the flex-direction property in the flex container to column to arrange the flex items(it's children) by default it's set to rows, you can also use row-reverse or column-reverse

• In a column flex-container, what does flex-basis refer to?

answer: the flex basis refers to the main axis in the case of a flex container having flex direction columns will switch the main axis to top to bottom instead of left to right

• In a row flex-container, what does flex-basis refer to?

answer: the opposite of the previous answer, the main axis is now set to left to right and the cross axis is top to bottom this is the default behavior and it changes when you change your flex direction to column so make sure you spend enough time to absorb this.

thank you for reading this article, and as always please reach out to me here for any questions or discussion.