CSS Flexible Layout Box, popularly known as Flexbox is a powerful one-dimensional layout model. It helps to lay, align and distribute items (children) efficiently inside a container (parent).
Important Features:
- One-dimensional layout model: Flex is a one-dimensional layout model as it can only deal with items either horizontally as rows or vertically as columns. On the contrary, the CSS Grid layout can handle rows and columns together.
- Creates flexible and responsive layouts: Flexbox gives flex container the ability to customize the items within it, depending on different screen sizes. A flex container can expand its children’s items to fill the available space or it can also shrink them to prevent overflow.
- Direction-agnostic: Flexbox is free from any directional constraints unlike Block (vertically biased) and Inline (horizontally biased).
- Super easy to use: It is easy to align items in Flexbox, unlike using float and positioning which are a little frustrating and sometimes difficult to use.
Flexbox Architecture:
There are two aspects of a Flexbox: Flex container and Flex item
The flex items can be laid out either along the main axis (starting from the main start and ending at the main end) or along the cross axis (starting from the cross start and ending at the cross end).
- Main axis: Flex items are laid out along this axis, either horizontally or vertically based upon the flex-direction.
- Cross axis: It is perpendicular to the main axis and its direction depends on the direction of the main axis.
- Main size: It is the width/height of the flex item depending on the main dimension.
- Cross size: It is the width/height of the flex item depending on the cross dimension.
To understand the different Flexbox properties, let us take an example by creating an HTML file, along with a CSS file.
Example:
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>CSS Flexbox</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
</div>
</body>
</html>
|
This is our CSS code in which we will be styling the flex-container and flex-item.
CSS
.container { border: 5px solid rgb(0, 0, 0);
background-color: rgb(245 197 221);
} .item { border: 5px solid rgb(0, 0, 0);
background-color: rgb(141, 178, 226);
margin: 10px;
padding: 20px;
height: 100px;
width: 100px;
font-weight: bold;
font-size: 45px;
} |
Output:
From the above output, the items are aligned vertically, by default, and the default display is block-level. The pink area is the container and the blue boxes within it are the items.
Properties for the Parent/Flex Container:
- display: Let’s make the container flex by setting its display to flex inside the .container of our CSS file.
.container{
display: flex;
border: 5px solid rgb(0, 0, 0);
background-color: rgb(245 197 221);
}Example:
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>CSS Flexbox</title>
<style>
.container {
display: flex;
border: 5px solid rgb(0, 0, 0);
background-color: rgb(245 197 221);
}
.item {
border: 5px solid rgb(0, 0, 0);
background-color: rgb(141, 178, 226);
margin: 10px;
padding: 20px;
height: 100px;
width: 100px;
font-weight: bold;
font-size: 45px;
}
</style>
</head>
<body>
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
</div>
</body>
</html>
|
Output: As you can see, after applying the display: flex property, the items have been aligned horizontally as the default flex-direction of flexbox is row.
display: flex
- flex-direction: It sets the direction of the flex container’s main axis and specifies how items will be placed inside the container.
Syntax:
flex-direction: attribute value
Attribute Values:
- row: Flex items are displayed horizontally along a row.
- column: Flex items are displayed vertically along a column.
- row reverse: Flex items are displayed horizontally along a row but in reverse order.
- column reverse: Flex items are displayed vertically along a column but in reverse order.
Note: The display direction, by default, is row.
Example:
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>flex-direction</title>
<link rel="stylesheet" href="style_flex-direction.css" />
</head>
<body>
<ul class="container row">
<li class="item">
<p>1</p>
</li>
<li class="item">
<p>2</p>
</li>
<li class="item">
<p>3</p>
</li>
<li class="item">
<p>4</p>
</li>
</ul>
<ul class="container column">
<li class="item">
<p>1</p>
</li>
<li class="item">
<p>2</p>
</li>
<li class="item">
<p>3</p>
</li>
<li class="item">
<p>4</p>
</li>
</ul>
<ul class="container row-reverse">
<li class="item">
<p>1</p>
</li>
<li class="item">
<p>2</p>
</li>
<li class="item">
<p>3</p>
</li>
<li class="item">
<p>4</p>
</li>
</ul>
<ul class="container column-reverse">
<li class="item">
<p>1</p>
</li>
<li class="item">
<p>2</p>
</li>
<li class="item">
<p>3</p>
</li>
<li class="item">
<p>4</p>
</li>
</ul>
</body>
</html>
|
CSS Code:
CSS
.container { background-color: rgb(245 197 221);
margin: 5px;
padding: 0;
float: left;
height: 270px;
width: 170px;
border: 2px solid black;
display: flex;
} .row { flex-direction: row;
} .column { flex-direction: column;
} .row-reverse { flex-direction: row-reverse;
} .column-reverse { flex-direction: column-reverse;
} ul { list-style: none;
} .item { background-color: rgb(141, 178, 226);
padding: 5px;
height: 40px;
width: 40px;
margin: 2px;
padding: 2px;
font-weight: bold;
border: 2px solid black;
} |
Output:
row, column, row-reverse, column-reverse
- flex-wrap: It specifies whether the flex container will have a single line or have multiple lines.
Syntax:
flex-wrap: attribute value
Attribute values:
- nowrap (default): It specifies that the flex items will not wrap and will be laid out in a single line. It may cause the flex container to overflow.
- wrap: It specifies that the flex items will wrap if necessary, and will be laid out in multiple lines.
- wrap-reverse: It is the same as a wrap, but the flex items will wrap in reverse order in this case.
- initial: It represents the value specified as the property’s initial value.
- inherit: It represents the computed value of the property on the element’s parent.
Note: We have increased the number of items inside the container to understand the flex-wrap effect better.
Example:
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>flex-wrap</title>
<link rel="stylesheet" href="style_flex-wrap.css" />
</head>
<body>
<ul class="container no-wrap">
<li class="item">
<p>1</p>
</li>
<li class="item">
<p>2</p>
</li>
<li class="item">
<p>3</p>
</li>
<li class="item">
<p>4</p>
</li>
<li class="item">
<p>5</p>
</li>
<li class="item">
<p>6</p>
</li>
<li class="item">
<p>7</p>
</li>
<li class="item">
<p>8</p>
</li>
</ul>
<ul class="container wrap">
<li class="item">
<p>1</p>
</li>
<li class="item">
<p>2</p>
</li>
<li class="item">
<p>3</p>
</li>
<li class="item">
<p>4</p>
</li>
<li class="item">
<p>5</p>
</li>
<li class="item">
<p>6</p>
</li>
<li class="item">
<p>7</p>
</li>
<li class="item">
<p>8</p>
</li>
</ul>
<ul class="container wrap-reverse">
<li class="item">
<p>1</p>
</li>
<li class="item">
<p>2</p>
</li>
<li class="item">
<p>3</p>
</li>
<li class="item">
<p>4</p>
</li>
<li class="item">
<p>5</p>
</li>
<li class="item">
<p>6</p>
</li>
<li class="item">
<p>7</p>
</li>
<li class="item">
<p>8</p>
</li>
</ul>
</body>
</html>
|
CSS Code:
CSS
.container { background-color: rgb(245 197 221);
margin: 5px;
padding: 0;
float: left;
width: 250px;
border: 2px solid black;
display: flex;
} .no-wrap { flex-wrap: nowrap;
} .wrap { flex-wrap: wrap;
} .wrap-reverse { flex-wrap: wrap-reverse;
} ul { list-style: none;
} .item { background-color: rgb(141, 178, 226);
padding: 5px;
height: 40px;
width: 40px;
margin: 2px;
padding: 2px;
font-weight: bold;
border: 2px solid black;
} |
Output:
nowrap, wrap, wrap-reverse
- flex-flow: It is a shorthand for flex-direction and flex-wrap. By default, flex-direction is row, and flex-wrap is nowrap.
Syntax:
flex-flow: flex-direction flex-wrap
For example, we can specify flex-direction as a row and flex-wrap as a wrap.
.container{
flex-flow: row wrap;
}row wrap
- justify-content: It defines how items are positioned along the main/primary axis of the current line.
Syntax:
justify-content: attribute value
Attribute values:
- flex-start (default): Flex items are positioned at the beginning of the container.
- flex-end: Flex items are positioned at the end of the container.
- center: Flex items are positioned in the center of the container.
- space-between: Flex items are distributed with even spacing, the first item will be at the start and the last item will be at the end of the container.
- space-around: Flex items are distributed with even spacing, with half the amount of space at the start of the first item and at the end of the last item.
- space-evenly: Flex items are evenly distributed within the alignment container along the main axis.
- initial: It represents the value specified as the property’s initial value.
Example:
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>justify-content</title>
<link rel="stylesheet" href="style_justify-content.css" />
</head>
<body>
<ul class="container flexStart">
<li class="item">
<p>1</p>
</li>
<li class="item">
<p>2</p>
</li>
<li class="item">
<p>3</p>
</li>
<li class="item">
<p>4</p>
</li>
<li class="item">
<p>5</p>
</li>
</ul>
<ul class="container flexEnd">
<li class="item">
<p>1</p>
</li>
<li class="item">
<p>2</p>
</li>
<li class="item">
<p>3</p>
</li>
<li class="item">
<p>4</p>
</li>
<li class="item">
<p>5</p>
</li>
</ul>
<ul class="container center">
<li class="item">
<p>1</p>
</li>
<li class="item">
<p>2</p>
</li>
<li class="item">
<p>3</p>
</li>
<li class="item">
<p>4</p>
</li>
<li class="item">
<p>5</p>
</li>
</ul>
<ul class="container spaceBetween">
<li class="item">
<p>1</p>
</li>
<li class="item">
<p>2</p>
</li>
<li class="item">
<p>3</p>
</li>
<li class="item">
<p>4</p>
</li>
<li class="item">
<p>5</p>
</li>
</ul>
<ul class="container spaceAround">
<li class="item">
<p>1</p>
</li>
<li class="item">
<p>2</p>
</li>
<li class="item">
<p>3</p>
</li>
<li class="item">
<p>4</p>
</li>
<li class="item">
<p>5</p>
</li>
</ul>
<ul class="container spaceEvenly">
<li class="item">
<p>1</p>
</li>
<li class="item">
<p>2</p>
</li>
<li class="item">
<p>3</p>
</li>
<li class="item">
<p>4</p>
</li>
<li class="item">
<p>5</p>
</li>
</ul>
</body>
</html>
|
CSS Code:
CSS
.container { background-color: rgb(245 197 221);
margin: 5px;
padding: 0;
border: 2px solid black;
display: flex;
} .flexStart { justify-content: flex-start;
} .flexEnd { justify-content: flex-end;
} .center {
justify-content: center;
} .spaceBetween { justify-content: space-between;
} .spaceAround { justify-content: space-around;
} .spaceEvenly { justify-content: space-evenly;
} ul { list-style: none;
} .item { background-color: rgb(141, 178, 226);
width: 50px;
height: 50px;
margin: 5px;
line-height: 10px;
font-weight: bold;
border: 2px solid black;
} |
Output:
flex-start, flex-end, center, space between, space-around, space-evenly
- align-content: When there is extra space in the cross-axis, align-content aligns multiple lines within the container. It is similar to justify-content which aligns individual items within the main axis.
Note: This property only works when the Flexbox has multiple lines.
Syntax:
align-content: attribute value
Attribute values:
- flex-start: Lines are aligned towards the beginning of the container.
- flex-end: Lines are aligned towards the end of the container.
- center: Lines are aligned towards the center of the container.
- space-between: Lines are evenly distributed, the first item will be at the start and the last item will be at the end of the container.
- space-around: Lines are evenly distributed, with half the amount of space at the start of the first item and at the end of the last item.
- stretch(default): Line stretches to take up the remaining space.
Example:
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>align-content</title>
<link rel="stylesheet" href="style_align-content.css" />
</head>
<body>
<ul class="container flexStart">
<li class="item">
<p>1</p>
</li>
<li class="item">
<p>2</p>
</li>
<li class="item">
<p>3</p>
</li>
<li class="item">
<p>4</p>
</li>
<li class="item">
<p>5</p>
</li>
</ul>
<ul class="container flexEnd">
<li class="item">
<p>1</p>
</li>
<li class="item">
<p>2</p>
</li>
<li class="item">
<p>3</p>
</li>
<li class="item">
<p>4</p>
</li>
<li class="item">
<p>5</p>
</li>
</ul>
<ul class="container center">
<li class="item">
<p>1</p>
</li>
<li class="item">
<p>2</p>
</li>
<li class="item">
<p>3</p>
</li>
<li class="item">
<p>4</p>
</li>
<li class="item">
<p>5</p>
</li>
</ul>
<ul class="container spaceBetween">
<li class="item">
<p>1</p>
</li>
<li class="item">
<p>2</p>
</li>
<li class="item">
<p>3</p>
</li>
<li class="item">
<p>4</p>
</li>
<li class="item">
<p>5</p>
</li>
</ul>
<ul class="container spaceAround">
<li class="item">
<p>1</p>
</li>
<li class="item">
<p>2</p>
</li>
<li class="item">
<p>3</p>
</li>
<li class="item">
<p>4</p>
</li>
<li class="item">
<p>5</p>
</li>
</ul>
<ul class="container stretch">
<li class="item">
<p>1</p>
</li>
<li class="item">
<p>2</p>
</li>
<li class="item">
<p>3</p>
</li>
<li class="item">
<p>4</p>
</li>
<li class="item">
<p>5</p>
</li>
</ul>
</body>
</html>
|
CSS Code:
CSS
.container { background-color: rgb(245 197 221);
margin: 5px;
float: left;
height: 500px;
width: 50px;
border: 2px solid black;
display: flex;
flex-wrap: wrap;
flex-direction: row;
} .flexStart { align-content: flex-start;
} .flexEnd { align-content: flex-end;
} .center {
align-content: center;
} .spaceBetween { align-content: space-between;
} .spaceAround { align-content: space-around;
} .stretch { align-content: stretch;
} ul { list-style: none;
} .item { background-color: rgb(141, 178, 226);
padding: 5px;
width: 50px;
margin: 5px;
line-height: 10px;
font-weight: bold;
border: 2px solid black;
} |
Output:
flex-start, flex-end, center, space-between, space-around, stretch
- align-items: It defines how flex items will be aligned along the cross axis of the current line of the container.
Syntax:
align-items: stretch|center|flex-start|flex-end|baseline|initial| inherit;
Attribute Values:
- flex-start: Items are aligned along the cross-start line.
- flex-end: Items are aligned along the cross-end line.
- center: The items are centered in the cross-axis.
- baseline: The items are aligned in a line in such a matter that their baselines align.
- stretch(default): The items stretch to fill the container.
Example:
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>align-item</title>
<link rel="stylesheet" href="style_align-item.css" />
</head>
<body>
<ul class="container flexStart">
<li class="item">
<p>1</p>
</li>
<li class="item">
<p>2</p>
</li>
<li class="item">
<p>3</p>
</li>
<li class="item">
<p>4</p>
</li>
<li class="item">
<p>5</p>
</li>
</ul>
<ul class="container flexEnd">
<li class="item">
<p>1</p>
</li>
<li class="item">
<p>2</p>
</li>
<li class="item">
<p>3</p>
</li>
<li class="item">
<p>4</p>
</li>
<li class="item">
<p>5</p>
</li>
</ul>
<ul class="container center">
<li class="item">
<p>1</p>
</li>
<li class="item">
<p>2</p>
</li>
<li class="item">
<p>3</p>
</li>
<li class="item">
<p>4</p>
</li>
<li class="item">
<p>5</p>
</li>
</ul>
<ul class="container baseline">
<li class="item">
<p>1</p>
</li>
<li class="item">
<p>2</p>
</li>
<li class="item">
<p>3</p>
</li>
<li class="item">
<p>4</p>
</li>
<li class="item">
<p>5</p>
</li>
</ul>
<ul class="container stretch">
<li class="item">
<p>1</p>
</li>
<li class="item">
<p>2</p>
</li>
<li class="item">
<p>3</p>
</li>
<li class="item">
<p>4</p>
</li>
<li class="item">
<p>5</p>
</li>
</ul>
</body>
</html>
|
CSS Code:
CSS
.container { background-color: rgb(245 197 221);
margin: 5px;
float: left;
height: 300px;
width: 150px;
border: 2px solid black;
display: flex;
flex-direction: row;
} .flexStart { align-items: flex-start;
} .flexEnd { align-items: flex-end;
} .center {
align-items: center;
} .baseline {
align-items: baseline;
} .stretch { align-items: stretch;
} ul { list-style: none;
} .item { background-color: rgb(141, 178, 226);
padding: 5px;
width: 50px;
line-height: 10px;
font-weight: bold;
border: 2px solid black;
} |
Output:
flex-start ,flex-end, center, baseline, stretch
Please refer to the Difference between align-content and align-items article for the detailed differences.
Properties for the Child/Flex Item:
- order: It assigns the order in which children of a flex container appear within the flex container.
Syntax:
order: <integer>
Flex items have a default order value of 0. That is why items assigned with values greater than 0 appear after items for which no value has been set. The reverse applies for items with values lesser than 0, they appear before the items having default order value or order value more than 0.
Example:
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>order</title>
<link rel="stylesheet" href="style_order.css" /> </head>
<body>
<ul class="container">
<li class="item item-1">
<p>1</p>
</li>
<li class="item item-2">
<p>2</p>
</li>
<li class="item item-3">
<p>3</p>
</li>
<li class="item item-4">
<p>4</p>
</li>
<li class="item item-5">
<p>5</p>
</li>
</ul>
</body>
</html>
|
CSS Code:
CSS
.container { background-color: rgb(245 197 221);
margin: 0;
padding: 0;
float: left;
height: 200px;
width: 400px;
border: 2px solid black;
display: flex;
flex-wrap: wrap;
flex-direction: row;
} ul { list-style: none;
} .item { background-color: rgb(141, 178, 226);
padding: 5px;
margin: 5px;
width: 50px;
height: 50px;
font-weight: bold;
border: 2px solid black;
} .item-1 {
order: 3;
} .item-4 {
order: -3;
} |
Output: As item 1 has order 3, its order is higher than every item’s order so it is placed at the end and item 4 is placed at the beginning as its order (-3) is the lowest order among other items.
flex: It specifies the components of a flexible length and it is a shorthand property for:
- flex-grow: It specifies how much the item will grow compared to other items inside that container.
- flex-shrink: It specifies how much the item will shrink compared to other items inside that container.
- flex-basis: It specifies the initial size of the flexible item.
Syntax:
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
Example:
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex</title>
<link rel="stylesheet" href="style_flex.css" /> </head>
<body>
<ul class="container">
<li class="item item-1">
<p>1</p>
</li>
<li class="item item-2">
<p>2</p>
</li>
<li class="item item-3">
<p>3</p>
</li>
<li class="item item-4">
<p>4</p>
</li>
<li class="item item-5">
<p>5</p>
</li>
</ul>
</body>
</html>
|
CSS Code:
CSS
.container { background-color: rgb(245 197 221);
margin: 0;
padding: 0;
height: 500px;
border: 2px solid black;
display: flex;
} ul { list-style: none;
} .item { background-color: rgb(141, 178, 226);
padding: 5px;
margin: 5px;
width: 50px;
height: 50px;
font-weight: bold;
border: 2px solid black;
} .item-1 {
flex: 0 1 auto;
} .item-2 {
flex: 2 2 auto;
} .item-3 {
flex: 0 1 auto;
} .item-4 {
flex: 0 1 auto;
} .item-5 {
flex: 0 1 auto;
} |
Output: As we can clearly see, item 2 with the highest flex-grow and flex-shrink value expand and shrinks the most. It has flex-grow value and shrinks value both as 2, while other items have 0 and 1 flex-grow and flex-shrink values respectively. The flex-basis for all items have been set as auto.
- flex-grow: It sets the flex-grow property of a flex item and defines its ability to grow. Default flex-grow value is 0.
Syntax:
flex-grow: <number>
Note: Negative numbers are invalid.
Example:
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>flex-grow</title>
<link rel="stylesheet" href="style_flex-grow.css" /> </head>
<body>
<ul class="container">
<li class="item item-1">
<p>1</p>
</li>
<li class="item item-2">
<p>2</p>
</li>
<li class="item item-3">
<p>3</p>
</li>
<li class="item item-4">
<p>4</p>
</li>
<li class="item item-5">
<p>5</p>
</li>
</ul>
</body>
</html>
|
CSS Code:
CSS
.container { background-color: rgb(245 197 221);
margin: 0;
padding: 0;
height: 250px;
border: 2px solid black;
display: flex;
} ul { list-style: none;
} .item { background-color: rgb(141, 178, 226);
padding: 5px;
margin: 5px;
width: 50px;
height: 50px;
font-weight: bold;
border: 2px solid black;
} .item-1 {
flex-grow: 0;
} .item-2 {
flex-grow: 2;
} .item-3 {
flex-grow: 0;
} .item-4 {
flex-grow: 0;
} .item-5 {
flex-grow: 0;
} |
Output: As we can clearly see, item 2 with flex-grow value more than others expands more than the other four items.
- flex-shrink: It sets the flex-shrink property for a flex item and defines the ability for a flex item to shrink. Default flex-grow value is 1.
Syntax:
flex-shrink: <number>
Note: Negative numbers are invalid.
Example:
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex-shrink</title>
<link rel="stylesheet" href="style_flex-shrink.css" /> </head>
<body>
<ul class="container">
<li class="item item-1">
<p>1</p>
</li>
<li class="item item-2">
<p>2</p>
</li>
<li class="item item-3">
<p>3</p>
</li>
<li class="item item-4">
<p>4</p>
</li>
<li class="item item-5">
<p>5</p>
</li>
</ul>
</body>
</html>
|
CSS Code:
CSS
.container { background-color: rgb(245 197 221);
margin: 0;
padding: 0;
height: 250px;
border: 2px solid black;
display: flex;
} ul { list-style: none;
} .item { background-color: rgb(141, 178, 226);
padding: 5px;
margin: 5px;
width: 50px;
height: 50px;
font-weight: bold;
border: 2px solid black;
} .item-1 {
flex-shrink: 1;
} .item-2 {
flex-shrink: 2;
} .item-3 {
flex-shrink: 1;
} .item-4 {
flex-shrink: 1;
} .item-5 {
flex-shrink: 1;
} |
Output: As we can clearly see, item 2 with flex-shrink value more than others shrinks more than the other four items.
- flex-basis: It defines the initial size of a flex item.
Syntax:
flex-basis: content | <'width'>
Example:
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex-basis</title>
<link rel="stylesheet" href="style_flex-basis.css" /> </head>
<body>
<ul class="container">
<li class="item px">
<p>px</p>
</li>
<li class="item percentage">
<p>percentage</p>
</li>
<li class="item auto">
<p>auto</p>
</li>
<li class="item initial">
<p>initial</p>
</li>
<li class="item inherit">
<p>inherit</p>
</li>
</ul>
</body>
</html>
|
CSS Code:
CSS
.container { background-color: rgb(245 197 221);
padding: 0;
margin: 0;
height: 250px;
border: 2px solid black;
display: flex;
} ul { list-style: none;
} .item { background-color: rgb(141, 178, 226);
padding: 5px;
margin: 5px;
width: 50px;
height: 50px;
font-weight: bold;
border: 2px solid black;
} .px { flex-basis: 50px;
} .percentage { flex-basis: 75%;
} .auto {
flex-basis: auto;
} .initial { flex-basis: initial;
} .inherit { flex-basis: inherit;
} |
Output:
- align-self: It defines how individual flex items are aligned along the cross-axis.
Syntax:
align-self: auto|stretch|center|flex-start|flex-end|baseline| initial|inherit;
Attribute Value:
- flex-start: Aligns items at the beginning of the container.
- flex-end: Aligns items at the end of the container.
- center: Aligns items at the center of the container.
- stretch: Aligns items to fit the container.
- baseline: Aligns items to the baseline of the container.
- auto (default): Item inherits the align-items property of parent container.
- initial: Sets to the default value.
- inherit: Item inherits align-self property from its parent element.
Example:
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>align-self</title>
<link rel="stylesheet" href="style_align-self.css" /> </head>
<body>
<ul class="container">
<li class="item flex-start">
<p>1</p>
</li>
<li class="item flex-end">
<p>2</p>
</li>
<li class="item center">
<p>3</p>
</li>
<li class="item stretch">
<p>4</p>
</li>
<li class="item baseline">
<p>5</p>
</li>
</ul>
</body>
</html>
|
CSS Code:
CSS
.container { background-color: rgb(245 197 221);
padding: 0;
margin: 0;
height: 250px;
border: 2px solid black;
display: flex;
} ul { list-style: none;
} .item { background-color: rgb(141, 178, 226);
padding: 5px;
width: 100px;
margin: 5px;
line-height: 100px;
font-weight: bold;
border: 2px solid black;
} .flex-start { align-self: flex-start;
} .flex-end { align-self: flex-end;
} .center {
align-self: center;
} .stretch { align-self: stretch;
} .baseline {
align-self: baseline;
} |
Output:
flex-start, flex-end, center, stretch, baseline
Supported Browsers:
- Google Chrome 29.0
- Firefox 22.0
- Microsoft Edge 12.0
- Internet Explorer 11+
- Opera 48.0
- Safari 10.0