0% found this document useful (0 votes)
28 views20 pages

Flex Box

Uploaded by

ITs Me Prash
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
28 views20 pages

Flex Box

Uploaded by

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

FLEXBOX LAYOUT:

 CSS Flexbox is the short name for the Flexible Box Layout.
 It is a CSS 3 web layout model.
 It was designed as a one-dimensional layout model and is used to lay things out in one
dimension; either as a row or as a column at a time.
 The flex layout allows responsive elements within a container to be automatically arranged
depending upon screen size (or device).
•Two key terminologies in Flexbox are the main axis and the cross axis.
A flex container's main axis(horizontal) is the primary axis along which these flex items
are laid out, and the cross-axis(vertical) is perpendicular to it.
•Flex Container:
To use flexbox, apply display: flex or display: inline-flex
to the parent element (container) of the elements you want to layout; all its direct
children then become flex items.
Example:
.flex-container {
display: flex;
}
•The flex container properties are:
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
The flex-direction Property:

• The flex-direction Property:


• Defines in which direction the container
wants to stack the flex items.
• Syntax:
• flex-direction: row | row-reverse |
column | column-reverse;
• row (default): stacks the flex items
horizontally from left to right.
• row-reverse: stacks the flex items
horizontally but from right to left.
• column - stacks the flex items
vertically from top to bottom.
• column-reverse - stacks the flex
items vertically but from bottom to
top.


The flex-wrap Property:
The flex-wrap Property:
Specifies whether flex items are forced
onto one line or can wrap onto multiple
lines.

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

•nowrap (default): flex items are laid out in


a single line which may cause the flex
container to overflow.
•wrap : flex items break into multiple lines.
•wrap-reverse: flex items are wrapped in
reverse order
The flex-flow Property: This property is a shorthand for the following CSS properties:
 flex-direction
 flex-wrap
Example:
.flex-container {
display: flex;
flex-flow: row wrap;
}
The justify-content Property:
It is used to align the flex items horizontally.
Syntax:
justify-content: flex-start | flex-end | center | space-between | space-around | space-
evenly
flex-start (default) - Items are positioned at the beginning of the container.
flex-end - Items are positioned at the end of the container.
center - Items are positioned in the center of the container.
space-between - Items will have space between them.
 space-around - Items will have
space before, between, and after
them.
 space-evenly - Items will have
equal space around them.
 The align-items Property:
 It is used to align the flex items
vertically
 Syntax:
 align-items: stretch | center | flex-start
| flex-end | baseline;
 stretch (Default) - Items are
stretched to fit the container
 center - Items are positioned at
the center of the container
 flex-start - Items are positioned
at the beginning of the container
 flex-end - Items are positioned at
the end of the container
 baseline - Items are positioned at
the baseline of the container
 The align-content Property:
 This property modifies the behavior of the flex-wrap property.
 It is similar to align-items, but instead of aligning flex items, it aligns flex lines.
 Syntax:
 align-content: stretch |center | flex-start | flex-end |space- between | space-
around;
 stretch (Default): Lines stretch to take up the remaining space
 center: Lines are packed toward the center of the flex container
 flex-start: Lines are packed toward the start of the flex container
 flex-end: Lines are packed toward the end of the flex container
 space-between: Lines are evenly distributed in the flex container
 space-around: Lines are evenly distributed in the flex container, with half-size
spaces on either end
 space-evenly: Lines are evenly distributed in the flex container, with equal space
around them
 The flex item properties are:
 order

 flex-grow

 flex-shrink

 flex-basis

 flex

 align-self
Property Description

Specifies the order of the flex items inside the same container. The value must be an integer,
order
default value is 0.

Specifies how much a flex item will grow relative to the rest of the flex items inside the same
flex-grow
container. The value must be a number, default value is 0.

Specifies how much a flex item will shrink relative to the rest of the flex items inside the same
flex-shrink
container. The value must be a number, default value is 1.

Specifies the initial length of a flex item


flex-basis

A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties
flex

Specifies the alignment for the selected item inside the flexible container. It overrides the default
alignment set by the container's align-items property.
align-self Values: flex-start, flex-end, center, baseline, stretch, auto
Parent/flex container properties
 display: flex;
 flex-direction:row|row-reverse|column|column-reverse
 flex-wrap:nowrap|wrap|wrap-reverse
 flex-flow:<‘flex-direction’>||<‘flex-wrap’>
 Justify-content:flex-start|flex-end|center|space-between|space-around
 Align-items:flex-start|flex-end|center|baseline|stretch;
 Align-content:flex-start|flex-end|center|space-between|space-around|stretch;
Child/flex Properties
 order: integer;
 flex-grow: number;
 flex-shrink: number;
 flex-basis:length|auto;
 flex:’flex-grow’,’flex-shrink’,’flex-basis’;
 align-self:auto|flex-start|flex-end|center|baseline|stretch;
Examples:
<html>
<head>
<style>
.container {
display: flex;
}
.container div {
margin: 30px;
background-color: powderblue;
padding: 20px;
border: 2px solid blue;
}
</style>
</head>
<body>
<div class="container">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
</body>
</html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
background-color: orange;
}
.container div
{
margin: 10px;
background: cyan;
padding: 10px;
border: 3px solid blue;
width: 100px;
text-align: center;
}
</style>
<body>
<div class="container">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div> Four </div>
<div> Five </div>
<div> Six </div>
<div> Seven </div>
<div> Eight </div>
<div> Nine </div>
<div> Ten </div>
</div>
</body>

You might also like