Scribd
Upload
10 views

Lecture 9

Uploaded by

Siddharth Chauhan
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
10 views

Lecture 9

Uploaded by

Siddharth Chauhan
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/ 12

CSS Flexbox

CSS Flexbox Layout Module


Before the Flexbox Layout module, there were four layout
modes:
Block, for sections in a webpage
Inline, for text
Table, for two-dimensional table data
Positioned, for explicit position of an element
The Flexible Box Layout Module, makes it easier to design
flexible responsive layout structure without using float or
positioning.
Flexbox Elements
To start using the Flexbox model, you need to first
define a flex container.

The element above represents a flex container (the blue area) with three flex items.

A flex container with three flex items:

<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
CSS Flex Container
Parent Element (Container)
Like we specified in the previous, this is a
flex container (the blue area) with three flex items:

The flex container becomes flexible by setting the display property to flex:

.flex-container {
display: flex;
}
The flex-direction Property
The flex-direction property defines in which direction
the container wants to stack the flex items.
.flex-container {
display: flex;
flex-direction: column;
}
The column-reverse value stacks the flex items
vertically (but from bottom to top):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
The row value stacks the flex items horizontally
(from left to right):
.flex-container {
display: flex;
flex-direction: row;
}
The row-reverse value stacks the flex items horizontally (but
from right to left):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
flex-wrap Property
The flex-wrap property specifies whether the flex items
should wrap or not.
The examples below have 12 flex items, to better
demonstrate the flex-wrap property.

.flex-container { .flex-container { .flex-container {


display: flex; display: flex; display: flex;
flex-wrap: wrap; flex-wrap: nowrap; flex-wrap: wrap-reverse;
} } }
The justify-content Property
The justify-content property is used to align the flex
items:

The center value aligns the flex items at the center of the container :

.flex-container {
display: flex;
justify-content: center;
}

The flex-start value aligns the flex items at the beginning of the container (this is default):

.flex-container {
display: flex;
justify-content: flex-start;
}
The flex-end value aligns the flex items at the
end of the container:
.flex-container {
display: flex;
justify-content: flex-end;
}

The align-items property is used to align the flex items.


The center value aligns the flex items in the middle of the
container:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
The flex-start value aligns the flex items at the top of the
container:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
The flex-end value aligns the flex items at the bottom of the container :

.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
The stretch value stretches the flex items to fill the container (this is default):

.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
The CSS Flexbox Container Properties
Property Description

align-content Modifies the behavior of the flex-wrap property. It is


similar to align-items, but instead of aligning flex items, it
aligns flex lines
align-items Vertically aligns the flex items when the items do not use
all available space on the cross-axis

display Specifies the type of box used for an HTML element


flex-direction Specifies the direction of the flexible items inside a flex
container
flex-flow A shorthand property for flex-direction and flex-wrap
flex-wrap Specifies whether the flex items should wrap or not, if
there is not enough room for them on one flex line

justify-content Horizontally aligns the flex items when the items do not
use all available space on the main-axis

You might also like