DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Code_Regina
Code_Regina

Posted on • Updated on

Week 14: CSS Animations: Keyframes and Advanced CSS: Layout with Flex-box

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
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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; 
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Flex Items

    -order
    -flex
   -flex-grow
   -flex-shrink
   -align-self
Enter fullscreen mode Exit fullscreen mode

The Magic of Display: Flex

Alt Text

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

.container {
Display: flex; 
}
Enter fullscreen mode Exit fullscreen mode

Alt Text
This is with flex-box

Important Flexbox Terminology

Alt Text
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; 
Enter fullscreen mode Exit fullscreen mode

Flex-direction row-reverse
To change main axis direction use reverse.

Flex-direction: row-reverse; 
Enter fullscreen mode Exit fullscreen mode

Alt Text

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

flex-direction: column;
Enter fullscreen mode Exit fullscreen mode

Alt Text

-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; 
}
Enter fullscreen mode Exit fullscreen mode

Focus triggers when an element receives focus. Usually inputs will receive a focus.

<input type=”text” /> 
Enter fullscreen mode Exit fullscreen mode

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

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

Alt Text

.container {
justify-content: space-around;

Alt Text

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

Flex-end will move the items to the bottom

Alt Text

Alt Text

Flex-stretch will take up the entire container.

Alt Text

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

Order

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

Alt Text

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.
 

Top comments (0)

CLI tools you won't be able to live without πŸ”§

CLI tools