Complete Guide To Start With CSS Flexbox: Website Layout
CSS flexbox is the pattern/ way to structure the elements of webpage.
This page tell you the basics of Flexbox’s properties.
Introduction:
To work with flex we have to understand there are two types of element:
- Parent: The element which is marked display: flex
- Child: The direct elements inside the Parent Element
<div class="flex-parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">2</div>
</div>
<style>
.flex-parent{
display:flex
}
</style>
Example: Element with class flex-parent is automatically Parent element and class “child” is the child element.
Properties
Property for parent elements
displayflex-directionflex-wrapflex-flowjustified-contentalign-items
display: flex
<style>
.box {
display: flex;
}
.box-item{
width:200px;
height:200px
}
</style><div class="box">
<div class="box-item">1</div>
<div class="box-item">2</div>
<div class="box-item">3</div>
</div>
flex-direction
This defines the direction of the arrangement of the child elements.
Possible Values: row, col, row-reverse and col-reverse
<style>
.box {
display: flex;
flex-direction: row;
}
</style><div class="box">
<div class="box-item">1</div>
<div class="box-item">2</div>
<div class="box-item">3</div>
</div>
flex-wrap
Possible Values: wrap, nowrap and wrap-reverse
flex-flow
The flex-flow property is a shorthand property for: flex-direction flex-wrap
Example : flex-flow: row nowrap
justified-content
The justify-content property aligns the flexible container's items when the items do not use all available space on the main-axis (Horizontally if flex-direction: row and Vertical if flex-direction: col).
