Responsive Web Design
Tags: html, css
Published: 2020-07-20 05:07:43

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 <em>practice</em>  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, <em>this</em> 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: 

```css
  display: flex;
``` 

and BAM! It's ready for use. 

## What properties do I need to use Flexbox?

Well...

```css
  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!

```css
  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 <a href="https://github.com/cristalcodes/flexbox-starter">here</a> & <a href="https://github.com/cristalcodes/customized-flexbox-starter">here</a>. 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!