CSS FLEX BOX :

Flex box is a one-dimensional layout method for laying out items

in rows or columns.

THE FLEX MODEL :

Display : Flex
It is used to apply flex on child elements. This property must be
used in parent element.

FLEX-DIRECTION :

Ø The flex-direction property specifies the direction of the flex-

items.

Ø We have to write in parent container.

flex-direction: row|row-reverse|column|column-reverse

1) row-> Default value. The flexible items are displayed

horizontally, as a row

2) row-reverse: -> Same as row, but in reverse order

3) column : ->The flexible items are displayed vertically, as a

column
 4) column-reverse:-> Same as column, but in reverse
order

Justify content :
The CSS justify-content property defines how the browser
distributes space between and around content items along the
main-axis of a flex container,

Justify-content: center | space-between | space-around

|space-evenly | flex-start | flex-end

flex-start (default): items are packed toward the start line

flex-end: items are packed toward to end line

center: items are centered along the line

space-between: items are evenly distributed in the line; first item

is on the start line, last item on the end line

space-around: items are evenly distributed in the line with equal

space around them

space-evenly: items are distributed so that the spacing between

any two adjacent alignment subjects, before the first alignment
subject, and after the last alignment subject is the same
EX:
● The red list is set to flex-start
● The yellow is set to flex-end
● The blue is set to center.
● The green is set to space-between
● The pink is set to space-around
● The light green is set to space-evenly.
ALIGN-ITEMS :
The align-items property defines the default behavior for
how items are laid out along the cross axis (perpendicular
to the main axis).
The align-items property accepts following values:
flex-start: cross-start margin edge of the items is placed
on the cross-start line
flex-end: cross-end margin edge of the items is placed on
the cross-end line
center: items are centered in the cross-axis
stretch (default): stretch to fill the container (still respect
min-width/max-width)

short hand property :

Ø flex-flow : <flex-direction> <flex-wrap>

This is a shorthand for the flex-direction and flex-wrap properties, which together
define the flex container’s main and cross axes. The default value is row nowrap.

FLEX WRAP :
By default, flex items will all try to fit onto one line. You can
change that and allow the items to wrap as needed with this
property.

flex-wrap: nowrap | wrap | wrap-reverse;

nowrap (default): all flex items will be on one line

wrap: flex items will wrap onto multiple lines, from top to
bottom.

wrap-reverse: flex items will wrap onto multiple lines from

bottom to top.

Order Property :
> The order CSS property sets the order to lay out an item in
a flex.

>we have to give order property inside the flex-item to order

them.

Syntax : order: 5;

ALIGN-SELF :
It makes possible to override the align-items value for specific flex
items(child).

NOTE: The align-self property accepts the same values as the

align-items

FLEX-GROW :
This property specifies how much of the remaining space in the
flex container should be assigned to the item (the flex grow
factor).

Ø It accepts a unitless value.

FLEX-SHRINK:
It specifies the “flex shrink factor”, which determines how much
the flex item will shrink relative to the rest of the flex items in the
flex container when there isn’t enough space on the row.

---------------------------------------------------------------------------------------
------
MediaQueries :

Media queries are useful when you want to modify your site or
app depending on a device's general type (such as print vs.
screen) or specific characteristics and parameters (such as
screen resolution or browser viewport width).

CSS ANIMATIONS :
>CSS animations make it possible to animate transitions from one CSS style
configuration to another.

WHAT IS EXACTLY ANIMATIONS :

Animation is a method in which figures are manipulated to appear as moving images.

ADVANTAGE OF CSS ANIMATIONS

1. EASY TO USE SIMPLE ANIMATION

2. IT PERFORM SMOOTH ON UNDER MODERATE SYSTEM LOAD

animation-name

Specifies the name of the @keyframes at-rule describing the animation’s

keyframes.

animation-duration

Configures the length of time that an animation should take to complete one
cycle.

animation-timing-function
 Configures the timing of the animation; that is, how the animation transitions
through keyframes, by establishing acceleration curves.

animation-delay

Configures the delay between the time the element is loaded and the beginning
of the animation sequence.

animation-iteration-count

Configures the number of times the animation should repeat; you can specify
infinite to repeat the animation indefinitely.

animation-direction

Configures whether or not the animation should alternate direction on each run
through the sequence or reset to the start point and repeat itself.

animation-fill-mode

Configures what values are applied by the animation before and after it is
executing.
Pseudo class is a selectors [in pseudo class there only one :] is a
keyword added to a selector

that specifies a special state of the selected elements.

Syntax: selectors:pseudo class

{ Property:value;}

Anchor pseudo class

Represents the state of links as unvisited,visited or currently

selected.

Anchoe also enables you to activate the html elements or apply a

speacified style to an

element when the mouse pointer is kept over.

The anchor pseudo class include the following :

:link[applies styles to non visitied links]

:visited[applies styles to visited links]

:hover[ to an element over which the mouse-pointer moves]

:active[applies styles to an active element]

{visited=purple, unvisited=blue, active=red}

TRANSFORMATION

- AN OBJECT CAN CHANGE THE ORIGINAL FORM TO DESIRE FORM THIS IS CALLED AS

TRANSFORMATION.

The transform property applies a transformation to an element. This property

allows you to rotate, scale, skew, etc., elements.

BASICALLY THERE ARE THREE TYPE OF TRANSFORMATION IS THERE.

1.rotate – x-axis,y-axis and z-axis syntax: transform:rotate(value)

2.skew - x-axis,y-axis and z-axis syntax: transform:skew(value)

3.scale - x-axis,y-axis syntax: transform:scale(value)

<!DOCTYPE html>

<html>

<head>

<style>

div.a {

width: 150px;

height: 80px;

background-color: yellow;

transform: rotate(20deg);

div.b {

width: 150px;

height: 80px;
 background-color: yellow;

transform: skewY(20deg);

div.c {

width: 150px;

height: 80px;

background-color: yellow;

transform: scaleY(1.5);

</style>

</head>

<body>

<h1>The transform Property</h1>

<h2>transform: rotate(20deg):</h2>

<div class="a">Hello World!</div>

<br>

<h2>transform: skewY(20deg):</h2>

<div class="b">Hello World!</div>

<br>
<h2>transform: scaleY(1.5):</h2>

<div class="c">Hello World!</div>

</body>

</html>

TRANSFORM-ORIGIN

The transform-origin property allows you to change the position of transformed

elements.

2D transformations can change the x- and y-axis of an element. 3D

transformations can also change the z-axis of an element.

Note: This property must be used together with the transform property.

Syntax: transform-origin:value;

1.center

2.bottom right

3.bottom left

4.top left

5.top right
 TRANSITION

A transition occurs when a CSS property changes from one value to another value over
a period of time.

transition-property Specifies the name of the CSS property the transition effect is for

transition-duration Specifies how many seconds or milliseconds the transition effect takes to
complete

transition-timing- Specifies the speed curve of the transition effect

function

transition-delay Defines when the transition effect will start

TRANSLATE

The translate property allows you to change the position of elements.

The translate property defines x- and y-coordinates of an element in 2D. You

can also define the z-coordinate to change position in 3D.

Coordinates can be given as only x-coordinates, x- and y-coordinates, or x-, y-

and z-coordinates.

Tip: You need to define a value for CSS perspective property for the z-property
to take effect.

Note: An alternative technique to translate an element is to use

CSS transform property with CSS translate() function. The
CSS translate property, as explained on this webpage, is arguably a simpler and
more direct way to translate an element.