Scribd
Upload
9 views23 pages

Flexbox CSS

CSS Flexbox is a one-dimensional layout model that allows for the automatic arrangement of HTML elements in rows or columns based on screen size. It includes various properties for both the container and its child elements, enabling complex layouts and responsive designs. Key properties include flex-direction, flex-wrap, justify-content, and align-items, which control the alignment and distribution of items within the flex container.

Uploaded by

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

Flexbox CSS

CSS Flexbox is a one-dimensional layout model that allows for the automatic arrangement of HTML elements in rows or columns based on screen size. It includes various properties for both the container and its child elements, enabling complex layouts and responsive designs. Key properties include flex-direction, flex-wrap, justify-content, and align-items, which control the alignment and distribution of items within the flex container.

Uploaded by

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

CSS Flexbox Tutorial

Flexbox is a 1-dimensional layout model in CSS. It is a module that comes with


lots of CSS properties and can be used to create complex layouts.

What is CSS flexbox?


CSS flexbox is a one-dimensional web layout method that is used to arrange
HTML containers in a row or column.
Flexbox or CSS flexbox allows the HTML elements to get automatically arranged
depending on screen sizes.
It is a module that comes with lots of CSS properties and can be used to create
complex layouts.

The main idea behind CSS flexbox is to give the container ability to change its
item's size automatically to best fit in available space.

Here are 3 images that show how HTML containers arranged using flexbox
automatically fits themselves according to device width.

Understanding CSS flexbox


CSS flexbox is not a property its a module ( a W3C recommendation as of
Oct 2017 ). It involves a whole set of CSS properties, some of its property is for
the container itself on which flexbox is applied and some are for its child
elements.
To understand flexbox you have to think in terms of 2 axes -

 the main axis: The horizontal axis


 the cross axis: The verticle axis
The items of the container will either lie along the main axis or the cross
axis and these items can be placed at a various place along this 2 axis.

How to use flexbox?


To start with flexbox we first need to define flexbox in our parent element so that
other properties of flexbox could be used by the parent as well as a child
element.
To make the container a flexible box define display: flex or display:
inline-flex to the container:

 display: flex makes the container itself behave like a block


element
 display: inline-flex makes container behave like inline element
All CSS Flexbox Properties
The flexbox properties can be divided into 2 parts:

 CSS that is applied on the container itself (Parent) - Flexbox properties


which is applied on the container itself are as follows:
 flex-direction
 flex-wrap
 flex-flow
 justify-content
 align-items
 align-content

 CSS that is applied on items of the container (Child) - Flexbox


properties which is applied on the items of the container are as follows:
 order
 flex-grow
 flex-shrink
 flex-basis
 flex
 align-self

Flexbox CSS that is applied to container


itself (Parent)
Let's look at all the flexbox property applied to the flexbox container.

1. CSS flex-direction
Flexbox module provides a property called flex-direction which specify what
direction the children are laid out in.
flex-direction has 4 different values:

I. row: It aligns flexbox items from left to right. It is the default value
of flex-direction.
II. row-reverse: It aligns flexbox items from the right end of the
container to the left end.
III. column: It aligns flexbox items from top to bottom in the flexbox
container.
IV. column-reverse: It aligns flexbox items from bottom to top in the
flexbox or container.

.container {
display: flex;
flex-direction: row; /* or row-reverse | columns | column-reverse */
}
2. CSS flex-wrap
flex-wrap property is used to define whether the flex items are aligned in a single
row or the items can flow to multiple rows.
flex-wrap property set values of wrapping items. There are three values that
could be set for flex-wrap property nowrap, wrap and wrap-reverse.

I. nowrap: It forces flex items to be in the same row. It is the default


value for flex-wrap.
II. wrap: It let flex items to flow to the next row if there is no space to
fit in the same row.
III. wrap-reverse: It specifies that flex items can flow to multiple rows
but items will start from the bottom of the flexbox and after fill that
it will flow to the upper row.
3. flex-flow CSS
The flex-flow property is shorthand for flex-direction and flex-wrap.
Combining both flex-direction and flex-wrap property the flex-
flow property defines the cross-axis flow of the container.
The default value of flex-flow is row nowrap.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS - flex flow</title>
<style>
.flow1 {
flex-flow: column wrap-reverse;
height: 400px;
}

.flow2 {
flex-flow: row wrap;
}

.container {
display: flex;
width: 250px;
background: #7E89B4;
border: 2px solid #4B5681;
}

.container div {
margin: 6px;
color: white;
font-size: 18px;
font-family: sans-serif;
padding: 10px 15px;
background: #353C5A;
}
</style>
</head>
<body>
<h2>Container items no wraping <code>flex-warp:nowrap</code>
property.</h2>
<p>The "flow1" defines item to flow in column and to reverse wrap.</p>
<div class="container flow1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
<p>The "flow2" defines item to flow in row and to wrap items.</p>
<div class="container flow2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</body>
</html>

4. justify-content CSS
The justify-content property aligns flex items along the X-axis (horizontally) also
known as the main axis in the flexbox. All flex line's items align horizontally
according to justify-content value.
The justify-content property has 6 different values flex-start, flex-
end, center, space-around, space-evenly and space-between.

I. flex-start: Aligns items horizontally to the start of the


container (default value).
II. flex-end: Aligns items horizontally to the end of the container.
III. center: Aligns items horizontally to the center of the container.
IV. space-around: Aligns items horizontally equally distributed.
V. space-evenly: Items are so aligned that the space between
container and item is the same as the space between items.
VI. space-between: Aligns items horizontally between the start and end
of the container. The first row starts from the left and the last row
touches the right.
5. align-items CSS
The align-items property aligns the container items along Y-axis (Vertically),
also known as a cross-axis in flexbox.
Note: The align-items is a single-line property if your container item wraps to
the new line then it won't work for the new line. To align items as a whole use
the align-content property.
The align-items property has 5 different values flex-start, flex-
end, center, baseline and stretch.

I. stretch - It stretches the flex items along the container to fill the
container but min-width and max-width are applied to items if
mentioned. It is the default value of the align-item property.
II. flex-start - It aligns flex items to the top of the container.
III. flex-end - It aligns flex items to the bottom of the container.
IV. center - It aligns flex items in the center of the container.
V. baseline - It aligns flex items in such a way that their baseline
aligns.
6. align content CSS
The align-content property works the same as the align-content property along Y-
axis but the only difference in both is that instead of aligning flex items align-
content aligns the flex container's line as a whole
The align-content is multiline property. Its effect is not visible when there is
only one row in the flexbox.
The align-content property has 6 different values flex-start, flex-
end, center, space-around, space-between and stretch.

I. flex-start: Aligns items to the start of the container packed together.


II. flex-end: Aligns items to the end of the container packed together.
III. center: Aligns items to the center of the container packed together.
IV. space-around: Aligns items equally distributed along each row
packed together.
V. space-between: Aligns items packed together between the start and
end of the container. The first row starts from the top and the last
row touches the bottom.
VI. stretch: Aligns items packed together and stretched along the cross
axis of the container.
Flexbox CSS that is applied on container's
items (Child)
There are 6 different flexbox properties that are applied to the specific item of the
flexbox container.

1. Flexbox order
The order CSS property of flexbox defines the order of an item in flexbox. Items
of the container are sorted according to their order value in ascending order and
then by their source code order.

The default value of the order is 0.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS - flexbox order</title>
<style>
.container {
display: flex;
border: 2px solid #bd1e60;
margin: 20px 0;
}

#target1 {
order: 0;
background-color: #bd1e60;
}

#target2 {
order: 1;
background-color: #bd1e60;
}

#target3 {
order: -1;
background-color: #bd1e60;
}

#target4 {
order: 5;
background-color: #bd1e60;
}

.container div {
margin: 6px;
color: white;
font-size: 18px;
font-family: sans-serif;
padding: 10px 15px;
border-radius: 5px;
background-color: rgb(39, 170, 164);
}
</style>
</head>
<body>
<h2>order: Integer_value</h2>
<p>order property orders the container's item according to their order
value in ascending order.</p>
<div class="container">
<div>1 <sub>order:0</sub></div>
<div>2 <sub>order:0</sub></div>
<div id="target1">3 <sup>(Target
element)</sup><sub>order:0</sub></div>
<div>4 <sub>order:0</sub></div>
<div>5 <sub>order:0</sub></div>
</div>
<div class="container">
<div>1 <sub>order:0</sub></div>
<div>2 <sub>order:0</sub></div>
<div id="target2">3 <sup>(Target
element)</sup><sub>order:1</sub></div>
<div>4 <sub>order:0</sub></div>
<div>5 <sub>order:0</sub></div>
</div>
<div class="container">
<div>1 <sub>order:0</sub></div>
<div>2 <sub>order:0</sub></div>
<div id="target3">3 <sup>(Target element)</sup><sub>order:-
1</sub></div>
<div>4 <sub>order:0</sub></div>
<div>5 <sub>order:0</sub></div>
</div>
<div class="container">
<div style="order:15;background:#4bc505">1 <sub>order:15</sub></div>
<div style="order:3;background:#ad6903">2 <sub>order:3</sub></div>
<div id="target4">3 <sup>(Target
element)</sup><sub>order:5</sub></div>
<div style="order:4;background:#cccf1d">4 <sub>order:4</sub></div>
<div>5 <sub>order:0</sub></div>
</div>
</body>
</html>

2. flex-grow CSS
The flex-grow CSS property defines a flex grow factor of any specific
item's main size, where the main size is either height or width of the
container depending on the flex-direction property.
The flex-grow property defines how the remaining space in the
container will be assigned to the item, where the remaining space is the
size of the container which remains after all items fit in.
The flex-grow value is always positive or 0, the negative value is not
supported.
flex grow example

Suppose you have 5 items of equal width 50px in a flex container with a
width of 400px, and for simplicity suppose there is no margin between
the items.

Remaining size: (400 - 50*5) = 150px


Now, if we set flex-grow: 1 to 3rd item then this 150px will be given to
it. And its total width will become 50px + 150px = 200px.
If we set flex-grow: 0.5 to 3rd item then this 75px will be given to it
(50%).
If we set flex-grow: 2 to 3rd item and flex-grow: 1 to 4rt item then
2/3 of remaining (100px) will be given to 3rd element and 1/3 of
remaining size will be given to 4th element(50px).

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS - flex grow</title>
<style>
.container {
display: flex;
border: 2px solid #bd1e60;
width: 400px;
margin: 20px 0;
}

#target1 {
flex-grow: 2;
background: #bd1e60;
}

#target2 {
flex-grow: 1;
background: #bd1e60;
}

#target3 {
flex-grow: 0.5;
background: #bd1e60;
}

.container div {
margin: 1px;
color: white;
font-size: 18px;
font-family: sans-serif;
padding: 10px 15px;
background-color: rgb(39, 170, 164);
}
</style>
</head>
<body>
<h2>flex-grow: number</h2>
<p>flex-grow set a flex grow factor to the item to set remaing size of
container to the item.</p>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div id="target1">3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div id="target3">3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div id="target1">3</div>
<div id="target2">4</div>
<div>5</div>
</div>
</body>
</html>

3. flex-basis
The flex-basis CSS property is used to set the size of the flex item.
In case both flex-basis and width (or height) are defined for an
element then flex-basis has priority.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS - flex basis</title>
<style>
.container {
display: flex;
border: 2px solid #bd1e60;
}

#target1 {
flex-basis: 150px;
background: #bd1e60;
}

.container div {
margin: 1px;
padding: 10px 15px;
color: white;
font-family: sans-serif;
background-color: #27aaa4;
}
</style>
</head>
<body>
<h2>flex-basis: size</h2>
<p>flex-basis set the initial size of a flex item.</p>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div id="target1">4</div>
<div>5</div>
</div>
</body>
</html>

4. flex-shrink
The flex-shrink CSS property is used to set the flex-shrink factor for a
flex item.

It determines how much a flex item will shrink relative to the rest of the
items in the container when the container is full.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS - flex shrink</title>
<style>
.container {
display: flex;
width: 280px;
border: 2px solid #bd1e60;
}

#target1 {
flex-shrink: 5;
background: #bd1e60;
}

.container div {
margin: 1px;
flex-basis: 40px;
padding: 10px 0;
color: white;
font-family: sans-serif;
background-color: #27aaa4;
}
</style>
</head>
<body>
<h2>flex-shrink: number</h2>
<p>flex-shrink set shrink factor for a flex item.</p>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div id="target1">4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>

5. flex
This is a shorthand property for flex-grow, flex-basis and flex-
shrink.
/* 1 value, unitless number: flex-grow */
flex: 1;
/* 1 value, width/height: flex-basis */
flex: 15px;
flex: 10%;

/* 2 values: flex-grow | flex-basis */


flex: 1 30px;

/* 2 values: flex-grow | flex-shrink */


flex: 2 2;

/* 3 values: flex-grow | flex-shrink | flex-basis */


flex: 2 2 10%;

6. align-self
The align-self property overwrites the align-items value for individual
items. It aligns the item within the container on the Y-axis.

.container1 {
display: flex;
align-items: center;
}

#target1 {
align-self: self-end;
}

.container2 {
display: flex;
align-items: flex-start;
}

#target2 {
align-self: center;
}

You might also like