Week 14: CSS Animations: Keyframes and Advanced CSS: Layout with Flex-box
Tags: javascript, webdev, codenewbie, beginners
Published: 2020-09-03 22:25:57

---
title: Week 14: CSS Animations: Keyframes and Advanced CSS: Layout with Flex-box 
published: true
description: 
tags: javascript, webdev, codenewbie, beginners
---


####This week focus was on CSS Animations: Keyframes and Advanced CSS: Layout with Flexbox from Colt Steele The Advanced Web Developer Bootcamp.


     -Introduction to Keyframes   
     -Other CSS Animation Properties 
     -CSS Animation Shorthand
     -Introduction to Flex-box
     -The Magic of Display: Flex 
     -Flex-Direction
     -Flex-Wrap
     -Justify-Content
     -Align-Items
     -Align-Content
     -Align-Self
     -Order
     -Flex-Grow
     -Flex-Shrink



###Introduction to Keyframes 
Keyframes are another tool within CSS animations, unlike transitions they allow us to build much more complex multicomponent multi-state animations. They also allow us a lot more control over the details of how the animation works. Things like 
Timing – when it start, how many times it should repeat, how long it should last. 
Keyframes compared to transitions 
Transitions allow us to animate a single state change 
From A to B which is a start and an end. 
Keyframes allow for much more complex multi-state animations
From A to B to C to D to E to F and so forth as many as we may need. 
Keyframes include a lot of in between information. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c0n3dvjwbyezu57gnc56.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ygvi4u01rxhyix2sqtqb.png)

https://codepen.io/Colt/pen/NvKjEx?editors=1100

###Other CSS Animation Properties 
Other CSS Animation Properties 
Most common animation properties 
Animation-name 
Animation-duration
Animation-timing-function
Less common animation properties 
Animation-iteration-count is how many times should it repeat 
Animation-fill-mode is how an animation should apply styles before and after the animation 
Animation-direction is the way an animation moves across a specific area
Animation-play-state is whether an animation is running or paused 


###CSS Animation Shorthand 
CSS shorthand combines all CSS animations to be written in a single line of code. 

```
animation: 3s ease-in 1s 2 reverse both paused slide-in; 
```



###Introduction to Flex-box
Flex-box is a way to layout content on a web page. 
There are two types of properties Container and Flex Items
A container is what contains the items inside. It is the outside layer. 
A flex item is what controls the spacing of the items inside the container. 


####Container Properties 
 

        -flex-direction
        -justify-content
        -flex-wrap
        -align-items
        -align-content
####Flex Items
        -order
        -flex
       -flex-grow
       -flex-shrink
       -align-self
###The Magic of Display: Flex 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fm8vh1hmp8v9mdc05kkk.png)

This is without flex-box
To being using flex-box it is important to set the display to flex

```
.container {
Display: flex; 
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/24sawd9ewx60d4vp7dev.png)
This is with flex-box 

###Important Flexbox Terminology 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tmrue8ycmpv5lb8ypo8l.png)
Flex-item is inside 
Container is outside 
Main goes left to right 
Cross is top to bottom  


###Flex-direction
Flex-direction specifies how items are placed in the flex container, defining the main axis and its direction. 
The default setting is 

```
flex-direction: row; 
```
Flex-direction row-reverse
To change main axis direction use reverse. 

```
Flex-direction: row-reverse; 
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vqbybx4pdnpsn33e3kjt.png)

Flex-direction column 
Changes the main axis to start from the top and then go downwards

```
flex-direction: column;
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j10fqp8s03xctqnab4h2.png)

-Flex-Wrap
-Justify-Content
-Align-Items 
-Align-Content 
-Align-Self 
-Order
-Flex-basis
-Flex-grow
-Flex-shrink


###The Magic of Display: Flex 

Pseudo-Classes focus 

```
input:focus {
color: red; 
}
```
Focus triggers when an element receives focus. Usually inputs will receive a focus. 

```
<input type=”text” /> 
```

###Important Flex-box Terminology 
Active triggers when an element is being activated by user



###Flex-direction

https://codepen.io/Colt/pen/EXWGam

###Flex-Wrap
Flex-wrap specifies whether items are forced into a single line or can be wrapped into multiple lines. 
Can be used to make boxes larger.  




There is a cross axis and there is a main axis understanding how each work will help understand how to lay content out on a web page. 

###Justify-Content
Defines how space is distributed between items in flex container along the main axis 


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eyu09pffef41960z4rsm.png)

The order of the items in not changed, so it is not the same as flex-direction. The white space is now on the left side instead of the right side. 



![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kzgcrijj6uq68lxujfee.png)




![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2nv2pr4s4vjphmabt7a2.png)




.container {
justify-content: space-around; 


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6wt8qg0o3ya6aybqazec.png)


###Align-Items 
align-items defines how space is distributed between items in flex container 
Along the cross axis 

Flex-start will move the items at the top of the page.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kxfyaxnuua1lbuetam07.png)

Flex-end will move the items to the bottom 


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/am68aeh4eg19eq43xh7s.png)




![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2q24yv0ufltngjghnul1.png)

Flex-stretch will take up the entire container.



![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r25p789wlnnojlld6ya9.png)

Flex-center will center them vertically 







###Align-Content
Align-content defines how space is distributes between rows in 
flex container along the cross axis 



###Align-Self 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o77navgsrowqhurkyebd.png)



###Order
Order specifies the order used to lay out items in their flex container 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nesipzwrtm6k6gskulj7.png)

By default all items have an order of 0 

###Flex-basis

Flex defines how a flex item will grow or shrink to fit the available space in a container. 

flex is shorthand for 
flex-grow, flex-shrink, and flex-basis 

flex-basis is sort of like width, but not. 
specifies the ideal size of a flex item before it's placed into a flex container. 

flex-basis is the starting condition. 


###Flex-grow
flex-grow dictates how the unused space should be spread amongst flex items. Its all about ratios! 


###Flex-shrink
flex-shrink dictates how items should shrink when there isn't enough space in container.