Cristal
Posted on July 20, 2020
Hi friends! I'm back! It's been a little busy with my internship but I'm happy to report that I AM still working on my Front End Developer Blueprint from Skillcrush.
I covered a little bit of Flexbox today and got some good labs in. I learned a few technical things, of course, but also realized that while rote memorization is impractical, rote practice is totally helpful. Both of today's labs involved doing the same thing- the first time totally guided and the second unguided. I feel like I'll be more likely to remember how to do what I learned just because I did it twice in a row.
Anyway, you may just be here to learn with me, so let's get to business.
What is Flexbox?
Flexbox is a collection of CSS properties that is designed around the idea of having two planes- one vertical and the other horizontal. Think x and y axes!
(I know you're having an "Oh, this is when I'd use geometry in real life" moment.)
What does Flexbox allow us to do?
Flexbox allows us position not only the content within a tag, but tags themselves. It allows us to arrange our elements as we'd like!
How do I turn it on?
Give your HTML the following property:
display: flex;
and BAM! It's ready for use.
What properties do I need to use Flexbox?
Well...
flex-direction: column;
/*this property will create a vertical axis*/
flex-direction: row;
/* creates a horizontal axis */
justify-content;
/* tells the content where it should be aligned on *main* axis */
/* possible values:*/
flex-start;/* aligns things on the left if horizontally aligned or at the top if vertically aligned.*/
center; /* centers, of course */
flex-end; /*aligns an element on the right of the page if horizontally aligned, or the bottom of the page if vertically aligned*/
space-between; /*items aligned across the container with an even amount of space in between each one*/
space-around; /*elements have an event amount of space before, between, and after each element*/
initial; /*uses whatever the default value is*/
inherit; /*takes on the position of the parent element*/
Then there are the ones you'll use for the cross-axis!
align-items: /*same as justify-content except on a different axis*/
/*Possible values: */
flex-start;
flex-end;
center;
initial;
inherit;
/* ...and add */
baseline; /* positions items at the container's baseline*/
stretch: /* stretched an element vertically to fit the container */
align-content /* has the same effect as justify-content, but only if that content is wrapped. Will have no effect otherwise! */
flex-wrap /* dictates if elements should wrap or not */
/* Possible values: */
wrap; /* tells items to wrap */
nowrap; /* the opposite of the above */
wrap-reverse; /* wraps items in a reverse order */
inherit; & initial /* same as before! */
&& that's all for today on the TL;DR version of what I'm learning. If you care to see it in action, you can take a look at my last two labs here & here. I've been committing every step as I walk through these labs, so you can actually see what happened when and what effect it had.
Happy Coding!
Posted on July 20, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
