In CSS3, flexible boxes or flexbox is a new layout mode. It provides the adjustment of elements on a page as expected, when the page design holds different screen sizes and different display devices.
It makes lots of tasks much easier, it does not use floats. It is simply used to center the elements(horizontally and vertically both).
The following properties are used in the flexbox to align elements:-
- flex-direction
- justify-content
- align-items
1. flex-direction-
This defines the direction of the flex elements in the flexbox.
|
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
|
row align the element from left to right.
row-reverse is used to align the elements from right to left.
column aligns the elements from top to bottom.
column-reverse aligns elements from bottom to top.
2. justify-content-
It defines the alignment along the main axis. It assigns the extra left space to all the flex items.
|
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
|
flex-start - items are packed towards the starting line.
flex-end - items are compressed towards the end line.
center - items remained centered along the line.
space-between - first item is arranged in the start line and last item is arranged in end line.
space-around - items are arranged with equal space in both the sides.
3. align-items-
It locate the elements along the cross axis.
|
.container {
align-items: flex-start | flex-end | center | stretch;
}
|
flex-start - flex elements will start from the top edge without margin.
flex-end - cross-end margin edge of the items is placed on the cross-end line.
center - items are centered along the cross-axis.
stretch - items are stretched to whole width.
This is a simple example of flexbox:-
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
0 Comment(s)