Scribd
Upload
7 views2 pages

Flexbox

Uploaded by

reloca1570
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views2 pages

Flexbox

Uploaded by

reloca1570
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Topic: FLEXBOX

1. Flexbox is one dimensional layout method for layout out items in rows or columns.
2. CSS Flexbox is a better way to align items into a container.
3. Flexbox = Flexible + Box

Flex Properties:
display: flex

Flex Properties for Flex Container:


Flex-direction:
Flex-direction: row; → By default value
Flex-direction: column;
Flex-direction: row-reverse;
Flex-direction: column-reverse;
Flex-wrap:
Flex-wrap: wrap;
Flex-wrap: wrap-reverse;
Flex-wrap: No-wrap; → By default
Short Hand:
Flex-flow: row-reverse wrap;
(Two properties discuss in one line.)

Justify-content:
Justify-content : center;
Justify-content : space-between;
Justify-content : space-evenly;
Justify-content : space-around;
(This Properties use for Justify-content will justify the content in horizontal direction)

Vertically Center:
align-items : center;
align-items : flex-end;
align-items : flex-start;
align-items : stretch;

Flex Properties for Flex-item:


• order : 2;
• flex-grow : 3;
Negative numbers are invalid.
• flex-shrink : 3;
• flex-basis : 200px;
1. When flex-direction is set to row flex-basis will control width.
2. When flex-direction is set to column flex-basis will control height.

Short-hand Properties:
Flex : 2 2 300px;
align-self : flex-end;
align-self : flex-start;
align-self : center;

You might also like