In this CSS tutorial we will learn about the CSS Flexbox model. This is a just quick overview, not an in-depth course. We will look at the basics such as
- display: flex
- flex-direction
- flex-wrap
- justify-content
- align-items
Video:
Introduction to CSS3 Flexbox
What is The CSS Flexbox Layout Module?
Before the Flexbox Layout module, there were four layout modes:
- Block, for sections in a webpage.
- Inline, for text.
- Table, for two-dimensional table data.
- Positioned, for explicit position of an element.
The Flexible Box Layout Module, makes it easier to design flexible and responsive layout structure without using float or positioning.
The flexbox properties are supported in all modern browsers. Therefor Flexbox is currently a well established technology .
Code:
HTML
<h1>Flex Box</h1>
<section id="Parent">
<h2>Properties of the Parent flex Container</h2>
<div class="flexbox-container">
<div class="flexbox_item">Item-1</div>
<div class="flexbox_item">Item-2</div>
<div class="flexbox_item">Item-3</div>
<div class="flexbox_item">Item-4</div>
<div class="flexbox_item">Item-5</div>
<div class="flexbox_item">Item-6</div>
</div>
</section>
CSS
/*General Settings*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* width: 100%; */
list-style: none;
text-decoration: none;
}
body {
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
font-size: 16px;
max-width: 950px;
margin: auto;
background-color: #ddd;
}
body h1 {
text-align: center;
font-size: 80px;
font-weight: bolder;
margin: 2rem 0;
background-color: rgb(13, 57, 122);
color: orange;
}
body h2 {
margin: 1rem;
text-align: center;
}
#Parent .flexbox-container {
background-color: rgb(1, 120, 255);
box-shadow: 0 0 10px 2px;
}
#Parent .flexbox-container .flexbox_item {
font-size: 24px;
margin: 1rem;
padding: 1rem;
background-color: rgb(0, 47, 255);
color: #fff;
border-radius: 5px;
text-shadow: 1px 1px 1px rgb(51, 51, 51);
box-shadow: 0 0 25px 2px rgba(255, 254, 254, 0.5);
}Display Flex
Defines a flex container; inline or block depending on the given value.
CSS code:
#Parent .flexbox-container {
display: flex;
}Flex Direction
Defining the direction flex items are placed in the flex container.
Flex-direction row-reverse : right to left in ltr; left to right in rtl
CSS code:
#Parent .flexbox-container {
/*Flex-direction (row by default) */
flex-direction: row-reverse;
}Flex-direction column: same as row but top to bottom
CSS code:
#Parent .flexbox-container {
flex-direction: column;
}Flex-direction column-reverse: same as row-reverse but bottom to top
CSS code:
#Parent .flexbox-container {
flex-direction: column-reverse;
}Flex Wrap
By default, flex items will all try to fit onto one line.
: nowrap (default): all flex items will be on one line
#Parent .flexbox-container {
flex-wrap: nowrap;
}
: wrap flex items will wrap onto multiple lines, from top to bottom.
#Parent .flexbox-container {
flex-wrap: wrap;
}
wrap-reverse: flex items will wrap onto multiple lines from bottom to top
#Parent .flexbox-container {
flex-wrap: wrap-reverse;
}Justify Content
This defines the alignment along the main axis.
#Parent .flexbox-container {
height: 300px;
flex-wrap: wrap;
}:(default) flex-start: items are packed toward the start of the flex-direction.
#Parent .flexbox-container {
justify-content: flex-start;
}: start: items are packed toward the start of the writing-mode direction.
#Parent .flexbox-container {
justify-content: start;
}: flex-end : items are packed toward the end of the flex-direction.
#Parent .flexbox-container {
justify-content: flex-end;
}: end: items are packed toward the end of the writing-mode direction
#Parent .flexbox-container {
justify-content: end;
}: left: items are packed toward left edge of the container
#Parent .flexbox-container {
justify-content: left;
}: right: items are packed toward right edge of the container
#Parent .flexbox-container {
justify-content: right;
}: center: items are centered along the line
#Parent .flexbox-container {
justify-content: center;
}: space-between: items are evenly distributed in the line
#Parent .flexbox-container {
justify-content: space-between;
}: space-around: items are evenly distributed in the line with equal space around them.
#Parent .flexbox-container {
justify-content: space-around;
}: space-evenly: items are distributed so that the spacing between any two items
#Parent .flexbox-container {
justify-content: space-evenly;
}Align-items
This defines the default behavior for how flex items are laid out along the cross axis on the current line.
the (default) value of Align-items is stretch: stretch to fill the container
center: items are centered in the cross-axis
#Parent .flexbox-container {
align-items: center;
}baseline: items are aligned such as their baselines align
#Parent .flexbox-container {
align-items: baseline;
}flex-end: items are placed at the end of the cross axis.
#Parent .flexbox-container {
align-items: flex-end;
}flex-start: items are placed at the start of the cross axis.
#Parent .flexbox-container {
align-items: flex-start;
}stretch to fill the container
#Parent .flexbox-container {
align-items: stretch;
}