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:

  1. Parent: The element which is marked display: flex
  2. 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

  • display
  • flex-direction
  • flex-wrap
  • flex-flow
  • justified-content
  • align-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-direction

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).

justify-content

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Manan Kumar Gupta

I am Frontend Developer, exploring the power of Javascript. I have worked on Angular, ReactJS and React Native.