Scribd
Upload
44 views13 pages

Flexbox in CSS 02 - Flex Item Properties Class Notes - Full Stack Web Development 2.0 (SIGMA 2.0) (Hinglish)

The document outlines Flexbox container properties, which define the layout and alignment of flex items within a container. Key properties include flex-direction, justify-content, align-items, flex-wrap, flex-flow, and align-content, each with specific functions and examples provided. The document serves as a guide for understanding and implementing these properties in web design.

Uploaded by

hiralalchauhan1437
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
44 views13 pages

Flexbox in CSS 02 - Flex Item Properties Class Notes - Full Stack Web Development 2.0 (SIGMA 2.0) (Hinglish)

The document outlines Flexbox container properties, which define the layout and alignment of flex items within a container. Key properties include flex-direction, justify-content, align-items, flex-wrap, flex-flow, and align-content, each with specific functions and examples provided. The document serves as a guide for understanding and implementing these properties in web design.

Uploaded by

hiralalchauhan1437
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/ 13

Flex Container

Properties

PW SKILLS
Topics
● What are Flexbox container properties?
● The different types of Flexbox properties with Example

PW SKILLS
What are Flexbox container properties?
Some flexbox properties apply to the container, which sets the general rules for its items.

● flex-direction - specifies the direction of flex


● justify-content - specifies the alignment of flex items
● align-items - specifies the the alignment of flex items too
● flex-wrap - specifies the alignment of flex items to single or multiple lines
● flex-flow - specifies the direction of flex container as it wrapping behavior
● Align-content - specifies the alignment of flex lines

PW SKILLS
Flexbox properties with Examples
Flex-direction (row default value)

HTML CSS Output

<div class="container"> .container {


<div class="item">1</div> display: flex;
<div class="item">2</div> border: 1px solid black;
<* row is the default</
<div class="item">3</div>
flex-direction:row;
<div class="item">4</div> color: white;
</div> }
.item {
width: 50px;
height: 50px;
background-color: blue;
border: 1px solid;
}

.container {
display: flex;
border: 1px solid black;
flex-direction:column;
color: white;
}
.item {
width: 50px;
height: 50px;
background-color: blue;
border: 1px solid;
}

PW SKILLS
justify-content (flex-start default value)
HTML

<head> <p>Justify-content: space-around</p>


<link rel="stylesheet" href="style.css" <> <div class="container around">
</head> <div class="item">1</div>
<body> <div class="item">2</div>
<div> <div class="item">3</div>
<p>Justify-content:flex-start(default)</p> <div class="item">4</div>
<div class="container start"> </div>
<div class="item">1</div>
<div class="item">2</div> <p>Justify-content: space-evenly</p>
<div class="item">3</div> <div class="container evenly">
<div class="item">4</div> <div class="item">1</div>
</div> <div class="item">2</div>
<p>Justify-content: flex-end</p> <div class="item">3</div>
<div class="container end"> <div class="item">4</div>
<div class="item">1</div> </div>
<div class="item">2</div>
<div class="item">3</div> <p>Justify-content: space-center</p>
<div class="item">4</div> <div class="container center">
</div> <div class="item">1</div>
<p>Justify-content: space-between</p> <div class="item">2</div>
<div class="container between"> <div class="item">3</div>
<div class="item">1</div> <div class="item">4</div>
<div class="item">2</div> </div>
<div class="item">3</div> </div>
<div class="item">4</div> </body>
</div> </html>

PW SKILLS
justify-content (flex-start default value)
continue…
CSS Output
.container {
display: flex;
flex-wrap: wrap;
border: 1px solid black;
color: white;
}
.item {
width: 50px;
height: 50px;
background-color: blue;
border: 1px solid;
}
.start {
justify-content: flex-start;
}

.end {
justify-content: flex-end;
}
.between {
justify-content: space-between;
}
.around {
justify-content: space-around;
}

.evenly {
justify-content: space-evenly;
}
.center {
justify-content: center;
}

PW SKILLS
align-items
<p>align-items: flex-start</p>
<div class="container start">
<div class="item">1</div>
HTML <div class="item">2</div>
<div class="item">3</div>
<!DOCTYPE html> <div class="item">4</div>
<html lang="en"> </div>
<head> <p>align-items: end</p>
<meta charset="UTF-8" <> <div class="container end">
<meta name="viewport" <div class="item">1</div>
content="width=device-width, initial-scale=1.0" <div class="item">2</div>
<> <div class="item">3</div>
<meta http-equiv="X-UA-Compatible" <div class="item">4</div>
content="ie=edge" <> </div>
<title>Document</title> <p>align-items: center</p>
<link rel="stylesheet" href="style.css" <> <div class="container center">
</head> <div class="item">1</div>
<div class="item">2</div>
<body> <div class="item">3</div>
<div> <div class="item">4</div>
<<<-flex-stretch is the default value of </div>
align-items <<> <p>align-items:baseline</p>
<div class="container baseline">
<p>align-items:stretch(default)</p> <div class="item">1</div>
<div class="item">2</div>
<div class="container stretch"> <div class="item">3</div>
<div class="item">1</div> <div class="item">4</div>
<div class="item">2</div> </div>
<div class="item">3</div> </div>
<div class="item">4</div> </body>
</div> </html>

PW SKILLS
align-items
continue…
CSS Output
.container {
display: flex;
flex-wrap: wrap;
border: 1px solid black;
color: white;
height: 10vh;
}
.item {
width: 50px;

background-color: blue;
border: 1px solid;
}

.stretch {
align-items: stretch;
}

.start {
align-items: flex-start;
}
.end {
align-items: flex-end;
}
.center {
align-items: center;
}

.baseline {
align-items: baseline;
}

PW SKILLS
flex-wrap
Output
.container {
display: flex;
flex-direction: row; ➡ ➡
border: 1px solid black;
color: white;
height: 210px;
width: 100px;
</ wrap the items and stack it
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.item {
width: 50px;
height: 50px;
background-color: blue;
border: 1px solid;
}

PW SKILLS
flex-flow
Output
.container {
display: flex;
flex-direction: row;
border: 1px solid black;
color: white;
height: 210px;
width: 200px;
flex-flow: row wrap;
justify-content: center;
}
.item {
width: 50px;
height: 50px;
background-color: blue;
border: 1px solid;
}

PW SKILLS
Align-content
<p>align-content: space-between</p> <p>align-content:flex-end</p>
HTML <div class="container between"> <div class="container end">
<div class="item">1</div> <div class="item">1</div>
<div class="item">2</div> <div class="item">2</div>
<body> <div class="item">3</div> <div class="item">3</div>
<div> <div class="item">4</div> <div class="item">4</div>
<<<- strectch is the default value of <div class="item">5</div> <div class="item">5</div>
align-content <<> <div class="item">6</div> <div class="item">6</div>
<p>align-content:stretch(default)</p> <div class="item">7</div> <div class="item">7</div>
<div class="container stretch"> <div class="item">8</div> <div class="item">8</div>
<div class="item">1</div> </div> </div>
<div class="item">2</div> <p>align-content: center</p> <p>align-content:space-evenly</p>
<div class="item">3</div> <div class="container center"> <div class="container evenly">
<div class="item">4</div> <div class="item">1</div> <div class="item">1</div>
<div class="item">5</div> <div class="item">2</div> <div class="item">2</div>
<div class="item">6</div> <div class="item">3</div> <div class="item">3</div>
<div class="item">7</div> <div class="item">4</div> <div class="item">4</div>
<div class="item">8</div> <div class="item">5</div> <div class="item">5</div>
</div> <div class="item">6</div> <div class="item">6</div>
<p>align-content: space-around</p> <div class="item">7</div> <div class="item">7</div>
<div class="container around"> <div class="item">8</div> <div class="item">8</div>
<div class="item">1</div> </div> </div>
<div class="item">2</div> <p>align-content:flex-start</p> </div>
<div class="item">3</div> <div class="container start"> </body>
<div class="item">4</div> <div class="item">1</div>
<div class="item">5</div> <div class="item">2</div>
<div class="item">6</div> <div class="item">3</div>
<div class="item">7</div> <div class="item">4</div>
<div class="item">8</div> <div class="item">5</div>
</div> <div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>

PW SKILLS
Align-content
CSS CSS

.container {
display: flex;
flex-wrap: wrap;
border: 1px solid black;
color: white;
height: 15vh;
}
.item {
width: 100px;
background-color: blue;
border: 1px solid;
}
.stretch {
align-content: stretch;
}
.around {
align-content: space-around;
}
.between {
align-content: space-between;
}
.center {
align-content: center;
}
.start {
align-content: flex-start;
}
.end {
align-content: flex-end;
}
.evenly {
align-content: space-evenly;
}

PW SKILLS
THANK YOU

PW SKILLS

You might also like