CSS FLEXBOX
Flexible box, or flexbox, is a modern layout model implemented in CSS3 for developing flexible user interfaces with multiple rows and columns without using percentage or fixed length values. The CSS3 flex layout model offers a simple and efficient framework for automatically distributing space and aligning content without interfering with the actual markup via a stylesheet.
As flexbox is just not a single property and is a whole module, it involves alot of things including a whole set of properties of its own. Some properties are for the container (which is the parent), which is also known as flex container. The other properties are for the children, which are known as flex items.
div {
display:flex;
border: 2px dashed blue;
}
Output:
Justify Content
justify-content property is used to align items on the main axis. The default value is flex-start, which starts the items' line up from the start of the container.
Here are the values for the justify-content property:
- flex-start
- flex-end
- center
- space-around
- space-between
- space-evenly
flex-start
Using flex-start, items are aligned towards the start:
div {
display:flex;
border: 2px dashed blue;
justify-content: flex-start;
}
Output:
flex-end
flex-end aligns items towards the end:
div {
display:flex;
border: 2px dashed blue;
justify-content: flex-end;
}
Output:
center
justify-content:center aligns items in the center:
div {
display:flex;
border: 2px dashed blue;
justify-content: center;
}
Output:
space-around
space-around adds spaces all around the items:
div {
display:flex;
border: 2px dashed blue;
justify-content: space-around;
}
Output:
space-between
space-between adds spaces between the items:
div {
display:flex;
border: 2px dashed blue;
justify-content: space-between;
}
Output:
space-evenly
space-evenly adds spaces evenly to both sides of items:
div {
display:flex;
border: 2px dashed blue;
justify-content: space-evenly;
}
Output:
Flex Direction
flex-direction defines the direction in which items are going to be placed in the flex container. It has four values:
- row (default)
- row-reverse
- column
- column-reverse
div {
display:flex;
border: 2px dashed blue;
flex-direction:row | row-reverse | column | column-reverse;
}
flex-direction:row
flex-direction:row-reverse
flex-direction:column
flex-direction:column-reverse
Flex Grow
flex-grow gives items' ability to grow when necessary. It accepts a value that works as a proportion.
If all items have flex-grow as 1, then all items will have equal space distribution. Now if we assign a value of 2 to one of the children, the remaining space taken will be twice as much as the other.
flex is the shorthand property for flex-grow, flex-shrink and flex-basis. The difference is that flex: 1 sets
flex-grow: 1,
flex-shrink: 1
flex-basis: 0. If you use flex-grow:1 then
flex-grow: 1,
flex-shrink: 1,
flex-basis: auto.
Let's have a look:
div {
display:flex;
border: 2px dashed blue;
}
div .item {
flex-grow:1;
}
div .double {
flex-grow:2;
}
Using flex-grow:
Using flex:
Example
Using the flex layout model, the following example shows how to build a three-column layout with equal width and height for each column.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3 Three Equal Flex Column</title>
<style>
.flex-container {
width: 80%;
min-height: 300px;
display: -webkit-flex; /* Safari */
display: flex; /* Standard syntax */
border: 1px solid #808080;
color: white;
}
.flex-container .item1 {
background: red;
-webkit-flex: 1; /* Safari */
-ms-flex: 1; /* IE 10 */
flex: 1; /* Standard syntax */
}
.flex-container .item2 {
background: green;
-webkit-flex: 1; /* Safari */
-ms-flex: 1; /* IE 10 */
flex: 1; /* Standard syntax */
}
.flex-container .item3 {
background: blue;
-webkit-flex: 1; /* Safari */
-ms-flex: 1; /* IE 10 */
flex: 1; /* Standard syntax */
}
</style>
</head>
<body>
<div class="flex-container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
</body>
</html>