CSS Flexible Box Layout Module (Flexbox) is one of the most widely used and popular mechanisms which provides flexibility to create/build or design professional layouts/nested layouts.
Hi All, I'm Dinanath Jayaswal, Senior UI/Web Developer and Adobe Certified Expert Professional, I wanna welcome you to CSS Flexbox Tutorial for beginners.
This is a comprehensive guide to CSS flexbox layout. This complete guide explains everything about the flexbox.
This Course/Tutorial is ideal for:
- Any Web designer/developer interested in getting a deep understanding of Flexbox
- CSS lovers
- Candidates desire to become CSS Expert and better Front End web Developer / Designer
- Web designers/developers who want to improve skills with new web standards
After completing/attending/finishing this Course/Tutorial, participants should be able to:
- Align elements using modern CSS module, like CSS Flexbox
- vertically align any element
- Use the new CSS3 Flexbox box model to create responsive web layouts more effectively!
- add spacing between elements
- take up remaining space
- Use/Operate CSS Flexbox confidently to create modern/advanced layouts
- implement complete site layouts / create modern grids
- Basic knowledge of HTML5 and CSS3
-
- 1.1. What is CSS Flexbox
- 1.2. Layout modes
- 1.3. Why Flexbox?
- 1.4. Important Terminology
- 1.5. Flexbox axis
- 1.6. Browser support
-
- 2.1. Flex Display
- 2.2. Flex Direction
- 2.3. Flex Wrap
- 2.4. Flex Flow
- 2.5. Justify Content
- 2.6. Align Items
- 2.7. Align Content
-
- 3.1. Order
- 3.2. Flex Grow
- 3.3. Flex Shrink
- 3.4. Flex Basis
- 3.5. Flex
- 3.6. Align Self
-
- 4.1. Perfect Center
- 4.2. Flex Navbar
- 4.3. Item height adjustment
- 4.4. Flex Website Layout
CSS Flexible Box Layout Module is a CSS3 layout mode that provides an easy, professional and advanced clean way to arrange child elements/items within a container.
CSS Flexible Box Layout Module is also known and referred to as CSS Flexbox, is designed for one-dimensional layout model that makes it easy to:
- Design flexible and efficient layouts
- Distribute space among items
- Control alignments of objects/elements/items in given container
- Flexbox layout is most appropriate to the components of an application, and small-scale layouts
- Flexbox is a new CSS display type designed to craft CSS layouts in a much easier way
- Control the position, size, and spacing of child elements relative to parent container and other child elements
- W3C Candidate Recommendation as of October 2017
Before CSS Flexbox there were 4 layout modes/models:
Block(for different sections in a webpage)Inline(for text and spans in the same line)Table(for two-dimensional tabular data)Position(for the explicit position of an element)
- Different positional properties like
fixed, absoluteto set alignment at the exact required place - Floats and clear fixes to create navigation, detailed section
- Fixed heights columns to show equality
- Above mentioned layout modes does not provide enough flexibility to create/build or design professional/nested/modern layouts
- we need to include another CSS mechanism like Floats, Vertical alignment of text/elements and other hacks with Margin, Padding to create the accurate/desired layout
- CSS Flexible Box Layout Module (Flexbox), makes it easier to design flexible responsive layout structure without using float or positioning
- Flex/CSS Flexbox layout provides lots of flexibilities while creating complex layouts like:
- No CSS Float used
- arrange items from left to right or top to bottom and vice versa
- adjust the spacing between objects
- Position and alignments of items
- order and placements of various elements
- improve the items alignment, directions and order in the container even when they are with dynamic or even unknown size
- equal height columns
- ability to modify the width or height of its children to fill the available space in the best possible way on different screen sizes
- Flexbox is a new CSS display type designed to craft CSS layouts in a much easier way
- Control the position, size, and spacing of child elements relative to parent container and other child elements
- CSS flexbox works great responsively (RWD - Responsive Web Design)
- Responsive and Mobile friednly
- Bootstrap 4 is built-on with Flex layout Model
Let's learn some of the Important Terminology/concepts related to CSS flexbox to get proper understandings and how it works. There are main three terms or entities while dealing with flexbox:
Flex Container(Parent/Container to hold sub-items)Flex Items(Child/sub-items)Flexbox axis(Main axis [horizontal] and Cross axis [vertical])
To start with Flexbox just apply a display type of flex to the parent container
Syntax & Example:
1.4-flex-container-item.html basic markup
<div class="main-container">
<div class="item item-1">item-1</div>
<div class="item item-2">item-2</div>
<div class="item item-3">item-3</div>
<div class="item item-4">item-4</div>
<div class="item item-5">item-5</div>
<div class="item item-6">item-6</div>
<div class="item item-7">item-7</div>
<div class="item item-8">item-8</div>
<div class="item item-9">item-9</div>
<div class="item item-10">item-10</div>
</div>Syntax & Example:
1.4-flex-container-item.html default
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>1.4-flex-container-item.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.main-container {
border: 4px solid #826a98;
}
.item {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
}
.item-1 {
background-color:#DDA0DD;
}
.item-2 {
background-color:#BF94E4;
}
.item-3 {
background-color:#734F96;
}
.item-4 {
background-color:#FBAED2;
}
.item-5 {
background-color:#EE82EE;
}
.item-6 {
background-color:#ADE4CA;
}
.item-7 {
background-color:#A6D5AE;
}
.item-8 {
background-color:#8FBC8E;
}
.item-9 {
background-color: #64A466;
}
.item-10 {
background-color:#2E8B56;
}
</style>
</head>
<body>
<div class="main-container">
<div class="item item-1">item-1</div>
<div class="item item-2">item-2</div>
<div class="item item-3">item-3</div>
<div class="item item-4">item-4</div>
<div class="item item-5">item-5</div>
<div class="item item-6">item-6</div>
<div class="item item-7">item-7</div>
<div class="item item-8">item-8</div>
<div class="item item-9">item-9</div>
<div class="item item-10">item-10</div>
</div>
</body>
</html>
Syntax & Example:
1.4-flex-container-item.html display:flex
<style type="text/css">
.main-container {
border: 4px solid #826a98;
display: flex; /* block level flex container */
}
</style>
Main Axis- By default, main/primary axis runs Left to Right
- Its denoted with terms like the main start and main end
- The length between the main start to the main end is known as the main size
Cross Axis- By default, cross-axis runs Top to Bottom
- Its denoted with terms like cross start and cross end
- The length between cross start to cross end is known as cross size
The flexbox properties are supported in all modern browsers:
Let's look into some of the important properties used with Flex Container:
display- It defines the Flex Container inline or block
- An important and mandatory property to work with Flexbox
flex-direction- Defines direction for flex items to be placed inside Flex Container
flex-wrap- Set wrapping of items within Flex Container (overflow item placement)
flex-flow- Short-hand property for a combination of flex-direction and flex-wrap
justify-content- Defines alignment of items along the main axis
align-items- How flex items layout/laid out with the cross axis
align-content- Alignment of items along the cross axis (if multiple rows/lines available)
- To create a flex container, we set the value of the container's
displayproperty toflexorinline-flex - It enables a flex context for all its direct children
display property creates either a block-level or inline-level flex container:
display: flex;- block level flex, covers 100% width
display: inline-flex;- inline-level, same line flex, covers only required width as per items width
- syntax:
.container {
/* display: flex; */ /* block level flex container */
/* display: inline-flex; */ /* inline flex container */
display : flex | inline-flex;
}Syntax & Example:
2.1-flex-display.html, display: flex; /* block level flex container */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>2.1-flex-display</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.main-container {
border: 4px solid #826a98;
display: flex; /* block level flex container */
}
.item {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
}
.item-1 {
background-color:#DDA0DD;
}
.item-2 {
background-color:#BF94E4;
}
.item-3 {
background-color:#734F96;
}
.item-4 {
background-color:#FBAED2;
}
.item-5 {
background-color:#EE82EE;
}
.item-6 {
background-color:#ADE4CA;
}
.item-7 {
background-color:#A6D5AE;
}
.item-8 {
background-color:#8FBC8E;
}
.item-9 {
background-color: #64A466;
}
.item-10 {
background-color:#2E8B56;
}
</style>
</head>
<body>
<div class="main-container">
<div class="item item-1">item-1</div>
<div class="item item-2">item-2</div>
<div class="item item-3">item-3</div>
<div class="item item-4">item-4</div>
<div class="item item-5">item-5</div>
<div class="item item-6">item-6</div>
<div class="item item-7">item-7</div>
<div class="item item-8">item-8</div>
<div class="item item-9">item-9</div>
<div class="item item-10">item-10</div>
</div>
</body>
</html>
Syntax & Example:
2.1-flex-display.html, display: inline-flex; /* inline flex container */
.main-container {
border: 4px solid #826a98;
/* display: flex; */ /* block level flex container */
display: inline-flex; /* inline flex container */
}
- The flex-direction property decides/defines how flex items will stack inside flex container along the main axis, by default it's Main Axis runs from Left to Right
- Flex items can be laid out in two main directions, like rows horizontally or like columns vertically
flex-direction property sets the direction of the flex items along with the main axis:
flex-direction: row;- Default direction is row-wise ie. left to right alignment
- With row direction, the flex items are stacked in a row from left-to-right
flex-direction: row-reverse;- Right to left alignment (item alignment will start from right to left - item 1 will start from right)
flex-direction: column;- The column value stacks the flex items vertically (from top to bottom)
flex-direction: column-reverse;- bottom to top (item alignment will start from bottom to top - item 1 will start from the bottom)
- syntax:
.container {
display: inline-flex;
flex-direction: row | row-reverse | column | column-reverse;
}Syntax & Example:
2.2-flex-direction.html, flex-direction: row; /* left to right */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>2.2-flex-direction</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.main-container {
border: 4px solid #826a98;
/* display: flex; */ /* block level flex container */
display: inline-flex; /* inline flex container */
/* flex-direction: row; */ /* left to right */
/* flex-direction: row-reverse; */ /* right to left */
/* flex-direction: column; */ /* top to bottom */
flex-direction: column-reverse; /* bottom to top */
}
.item {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
}
.item-1 {
background-color:#DDA0DD;
}
.item-2 {
background-color:#BF94E4;
}
.item-3 {
background-color:#734F96;
}
.item-4 {
background-color:#FBAED2;
}
.item-5 {
background-color:#EE82EE;
}
.item-6 {
background-color:#ADE4CA;
}
.item-7 {
background-color:#A6D5AE;
}
.item-8 {
background-color:#8FBC8E;
}
.item-9 {
background-color: #64A466;
}
.item-10 {
background-color:#2E8B56;
}
</style>
</head>
<body>
<div class="main-container">
<div class="item item-1">item-1</div>
<div class="item item-2">item-2</div>
<div class="item item-3">item-3</div>
<div class="item item-4">item-4</div>
<div class="item item-5">item-5</div>
<div class="item item-6">item-6</div>
<div class="item item-7">item-7</div>
<div class="item item-8">item-8</div>
<div class="item item-9">item-9</div>
<div class="item item-10">item-10</div>
</div>
</body>
</html>
By default, all items in Flex Container try to fit themselves in a container in one row/column. If enough space not available, items simply overflow - with the help of flex-wrap property we can set the overflow direction
- The
flex-wrapproperty specifies whether the flex items should wrap or not - The
flex-wrapproperty simply determines how items are wrapped when the parent container runs out of space
flex-wrap property controls the wrapping of flex items within the container:
flex-wrap: nowrap;(default is row nowrap)flex-wrap: wrap;(wraps overflow items to bottom/next row or right/next column)flex-wrap: wrap-reverse;(wraps overflow items to top row or left column)- syntax:
.container {
display: inline-flex;
flex-wrap: nowrap | wrap | wrap-reverse;
}Syntax & Example:
2.3.1-flex-wrap-row.html flex-wrap: wrap; /* wraps overflow items to bottom/next row */
.main-container {
border: 4px solid #826a98;
display: flex; /* block level flex container */
/* flex-wrap: nowrap; */ /* default is row nowrap */
/* flex-wrap: wrap; */ /* wraps overflow items to bottom/next row */
flex-wrap: wrap-reverse; /* wraps overflow items to top row */
}
Syntax & Example:
2.3.2-flex-wrap-column.html flex-wrap: wrap; /* wraps overflow items to right/next column */
.main-container {
border: 4px solid #826a98;
display: flex; /* block level flex container */
height: 300px;
flex-direction: column;
/* flex-wrap: nowrap; */ /* default is nowrap */
/* flex-wrap: wrap; */ /* wraps overflow items to right/next column */
flex-wrap: wrap-reverse; /* wraps overflow items to left column */
}
flex-flowproperty is shorthand forflex-directionandflex-wrapproperties- By default
flex-flowproperty is set torowandnowrapwhich is default value of properties likeflex-directionandflex-wrap - syntax:
.container {
/* flex-flow: <flex-direction> && <flex-wrap> */
flex-flow: row wrap;
}Syntax & Example:
2.4.1-flex-flow-row.html
.main-container {
border: 4px solid #826a98;
display: flex; /* block level flex container */
/* basic or normal way for row wrap */
/* flex-direction: row; */
/* flex-wrap: wrap; */
/* latest way to write and use flex-flow, instead of flex-direction and flex-wrap */
/* flex-flow: row wrap; */
/* flex-flow: row wrap-reverse; */
flex-flow: row-reverse wrap-reverse;
}
Syntax & Example:
2.4.2-flex-flow-column.html
.main-container {
border: 4px solid #826a98;
display: flex; /* block level flex container */
/* basic or normal way for row wrap */
/* flex-direction: row; */
/* flex-wrap: wrap; */
/* height: 300px; */
/* latest way to write and use flex-flow, instead of flex-direction and flex-wrap */
height: 300px;
flex-flow: column wrap;
/* flex-flow: column-reverse wrap; */
/* flex-flow: column-reverse wrap-reverse; */
}
justify-contentdefines and set the alignment of flex items along with the main axis- It helps distribute extra free space leftover when either all the flex items on a line
- The default value of
justify-contentisflex-startwhich simply means start all flex items from left side exactly the place where the container starts (justify-content: flex-start;) - syntax:
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right;
}justify-content property is used to align the flex items within the container along with the main axis:
justify-content: flex-start;- Default alignment for items, start from/packed toward the left side of the container
- The
flex-startvalue aligns the flex items at the beginning of the container (this is the default)
justify-content: flex-end;- Align item to right or end of the container main axis
justify-content: center- Align item at the center of the main container
centervalue aligns the flex items at the center of the container
justify-content: space-between- Equally, distribute the items [(apart from first-start and last-end item) in between items will be distributed with equal gap/space ]
justify-content: space-aroundspace-aroundproperty displays the flex items with space before, between, and after the lines- [( first-start and last-end items have 50% space/gap) in between items will be distributed with 100% gap/space ]
- [space to the edges will be 50% ] and spacing between any two items are 100%
justify-content: space-evenly- All flex item is distributed with even/equal space-gap
- All flex items are distributed evenly/equally so that the spacing between any two items (and the space to the edges) is also equal
Syntax & Example:
2.5.1-flex-justify-content-row.html
.main-container {
border: 4px solid #826a98;
display: flex; /* block level flex container */
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-around; */
justify-content: space-evenly;
}
Syntax & Example:
2.5.2-flex-justify-content-column.html
.main-container {
border: 4px solid #826a98;
display: flex; /* block level flex container */
flex-direction: column;
height: 600px;
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-around; */
justify-content: space-evenly;
}
align-itemsproperty defines default behavior of flex items, it simply means how flex items align along the cross axis (vertically) of the containeralign-itemsis similar to justify-content but works in a perpendicular direction to the main-axis- syntax:
.container {
align-items: stretch | flex-start | flex-end | center | baseline;
}The align-items property will align the items on the cross axis:
align-item: stretch;- Default alignment for flex-items, covers/occupy 100% height of the container
align-item: flex-start;- All flex items squeezed/stacked or align at start ie. from the top of the container (items line up at the start of the flex container)
align-item: flex-end;- All flex items start/stacked from bottom or aligned/pushed at the bottom
align-item: center;- Align item vertically center/middle of the container (items are stacked to the center/middle of the container)
align-item: baseline;- The baseline is the line upon which most of the letter set (Flex items are aligned in a way that their baselines are aligned)
Syntax & Example:
2.6.1-flex-align-item-row.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>2.6.1-flex-align-item-row</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.main-container {
border: 4px solid #826a98;
display: flex; /* block level flex container */
height: 600px;
align-items: stretch; /* default value for algn-iitems is stretch */
/* align-items: flex-start; */
/* align-items: flex-end; */
/* align-items: center; */
/* align-items: baseline; */
}
.item {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
}
.item-1 {
background-color:#DDA0DD;
padding-bottom: 2rem;
}
.item-2 {
background-color:#BF94E4;
padding-bottom: 3rem;
}
.item-3 {
background-color:#734F96;
font-size: 3rem;
}
.item-4 {
background-color:#FBAED2;
}
.item-5 {
background-color:#EE82EE;
}
.item-6 {
background-color:#ADE4CA;
}
.item-7 {
background-color:#A6D5AE;
}
.item-8 {
background-color:#8FBC8E;
}
.item-9 {
background-color: #64A466;
}
.item-10 {
background-color:#2E8B56;
}
</style>
</head>
<body>
<div class="main-container">
<div class="item item-1">item-1</div>
<div class="item item-2">item-2</div>
<div class="item item-3">item-3</div>
<div class="item item-4">item-4</div>
<div class="item item-5">item-5</div>
<div class="item item-6">item-6</div>
<div class="item item-7">item-7</div>
<div class="item item-8">item-8</div>
<div class="item item-9">item-9</div>
<div class="item item-10">item-10</div>
</div>
</body>
</html>
Syntax & Example:
2.6.2-flex-align-item-column.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>2.6.2-flex-align-item-column</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.main-container {
border: 4px solid #826a98;
display: flex; /* block level flex container */
flex-direction: column;
height: 600px;
/* align-items: stretch; */ /* default value for algn-iitems is stretch */
/* align-items: flex-start; */
/* align-items: flex-end; */
/* align-items: center; */
align-items: baseline;
}
.item {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
}
.item-1 {
background-color:#DDA0DD;
padding-bottom: 2rem;
font-family: cursive;
}
.item-2 {
background-color:#BF94E4;
padding-bottom: 3rem;
padding-right: 5rem;
}
.item-3 {
background-color:#734F96;
font-size: 3rem;
}
.item-4 {
background-color:#FBAED2;
font-size: 8px;
}
.item-5 {
background-color:#EE82EE;
}
.item-6 {
background-color:#ADE4CA;
}
.item-7 {
background-color:#A6D5AE;
}
.item-8 {
background-color:#8FBC8E;
}
.item-9 {
background-color: #64A466;
}
.item-10 {
background-color:#2E8B56;
}
</style>
</head>
<body>
<div class="main-container">
<div class="item item-1">item-1</div>
<div class="item item-2">item-2</div>
<div class="item item-3">item-3</div>
<div class="item item-4">item-4</div>
<div class="item item-5">item-5</div>
<div class="item item-6">item-6</div>
<div class="item item-7">item-7</div>
<div class="item item-8">item-8</div>
<div class="item item-9">item-9</div>
<div class="item item-10">item-10</div>
</div>
</body>
</html>
align-contentproperty aligns the lines of content along the cross axis (vertically) of the container if multiple lines/rows available- Multiple lines/rows (wrapping) is must, so
flex-wrap: wrapis required to force content to the next line Note: this property has no effect when there is only one line of flex items- syntax:
.container {
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}align-content property aligns lines of content along the cross axis and distributes any extra spacing in the parent container:
align-content: stretch;- Default alignment/placement for flex-items, covers/occupy 100% height of the container (lines stretched to fill available space/gap)
align-content: flex-start;- Pulls lines to the beginning of cross-axis or flex container, All flex items squeezed or align at start ie. from the top of the container
align-content: flex-end;- All flex items start from the bottom or aligned/pushed at the bottom (end of the container or cross-axis)
align-content: center;- Align item vertically center/middle of the container
align-content: space-between;- Equally, distribute the items (put extra space in-between two lines to align top and bottom)
align-content: space-around;- Put space around as well as the top and bottom of lines (top-bottom edge space/gap is 50% of in-between/around space/gap)
Syntax & Example:
2.7.1-flex-align-content-row.html
.main-container {
border: 4px solid #826a98;
display: flex; /* block level flex container */
height: 600px;
flex-wrap: wrap;
/* align-content: stretch; */ /* default value for align-content is stretch */
/* align-content: flex-start; */
/* align-content: flex-end; */
/* align-content: center; */
/* align-content: space-between; */
align-content: space-around;
}
Syntax & Example:
2.7.2-flex-align-content-column.html
.main-container {
border: 4px solid #826a98;
display: flex; /* block level flex container */
height: 300px;
flex-wrap: wrap;
flex-direction: column;
/* align-content: stretch; */ /* default value for align-content is stretch */
/* align-content: flex-start; */
/* align-content: flex-end; */
/* align-content: center; */
/* align-content: space-between; */
align-content: space-around;
}
Let us look into the some of the important properties used with and applicable to Flex Item or Child Elements (usually known as Items, present inside Flex container):
orderorderproperty controls the order in which flex item appears in Flex Containerflex-growflex-growproperty defines and sets the ability for flex item to grow/spread if necessary by adding some spacesflex-shrinkflex-shrinkproperty defines and sets the ability for a flex item to shrink/squeeze if necessaryflex-basisflex-basisproperty signifies the initial main size of a flex itemflexflexproperty short-hand property for combination offlex-grow,flex-shrinkandflex-basisalign-selfalign-selfproperty allows and sets the alignment of an individual flex item
orderproperty specifies and denotes the order of the flex items/children of a flex container appear inside the flex containerorderproperty controls the order in which flex item appears in Flex Containerorderproperty accepts integer value and controls the order of items in the flex container- The default order of all flex item is
0, flex item aligns by items with lower order to higher order in left to the right direction orderwith greater value aligns himself at the very end of flex container (Item with order 1 or more value will place at the end), so the order placement is lower to higher number from left to right direction- Items with same order number align as per appearance/order in HTML source code
- syntax:
.item {
order: <integer>; /* default is 0 */
}
.item-2 {
background-color:#BF94E4;
order: 1;
}
.item-5 {
background-color:#EE82EE;
order: 2; /* higher order number will aligned to extreme right or at the end */
}Syntax & Example:
3.1-flex-item-order.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>3.1-flex-item-order</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.main-container {
border: 4px solid #826a98;
display: flex; /* block level flex container */
}
.item {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
}
.item-1 {
background-color:#DDA0DD;
}
.item-2 {
background-color:#BF94E4;
order: 1;
}
.item-3 {
background-color:#734F96;
}
.item-4 {
background-color:#FBAED2;
}
.item-5 {
background-color:#EE82EE;
}
.item-6 {
background-color:#ADE4CA;
}
.item-7 {
background-color:#A6D5AE;
}
.item-8 {
background-color:#8FBC8E;
}
.item-9 {
background-color: #64A466;
}
.item-10 {
background-color:#2E8B56;
}
</style>
</head>
<body>
<div class="main-container">
<div class="item item-1">item-1</div>
<div class="item item-2">item-2</div>
<div class="item item-3">item-3</div>
<div class="item item-4">item-4</div>
<div class="item item-5">item-5</div>
<div class="item item-6">item-6</div>
<div class="item item-7">item-7</div>
<div class="item item-8">item-8</div>
<div class="item item-9">item-9</div>
<div class="item item-10">item-10</div>
</div>
</body>
</html>
.item-2 {
background-color:#BF94E4;
order: 1;
}
.item-5 {
background-color:#EE82EE;
order: 2; /* higher order number will aligned to extreme right or at the end */
}
.item-2 {
background-color:#BF94E4;
order: 1;
}
.item-5 {
background-color:#EE82EE;
order: 2; /* higher order number will aligned to extreme right or at the end */
}
.item-9 {
background-color: #64A466;
order: 2; /* higher order number will aligned to extreme right or at the end */
}
flex-growproperty denotes and specifies how much space or amount of space flex item to take if necessaryflex-growdictates what amount of the available space inside the flex container the item should take- The
flex-growproperty specifies how much a flex item will grow relative to the rest of the flex items - By default, all the flex item have
flex-growvalue as0, so they don't occupy any extra-empty or remaining space available in the container flex-growsize is always relative to the size of other flex items in flex container (size of the flex-grow item is calculated as per the size of other flex items)- syntax:
.item {
flex-grow: <number>; /* default 0 */
}Syntax & Example:
3.2-flex-item-grow.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>3.2-flex-item-grow</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verana;
}
.main-container {
border: 4px solid #826a98;
display: flex; /* block level flex container */
}
.item {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
}
.item-1 {
background-color:#DDA0DD;
}
.item-2 {
background-color:#BF94E4;
}
.item-3 {
background-color:#734F96;
}
.item-4 {
background-color:#FBAED2;
}
.item-5 {
background-color:#EE82EE;
}
.item-6 {
background-color:#ADE4CA;
}
.item-7 {
background-color:#A6D5AE;
}
.item-8 {
background-color:#8FBC8E;
}
.item-9 {
background-color: #64A466;
}
.item-10 {
background-color:#2E8B56;
}
</style>
</head>
<body>
<div class="main-container">
<div class="item item-1">item-1</div>
<div class="item item-2">item-2</div>
<div class="item item-3">item-3</div>
<div class="item item-4">item-4</div>
<div class="item item-5">item-5</div>
<div class="item item-6">item-6</div>
<div class="item item-7">item-7</div>
<div class="item item-8">item-8</div>
<div class="item item-9">item-9</div>
<div class="item item-10">item-10</div>
</div>
</body>
</html>
.item-2 {
background-color:#BF94E4;
flex-grow: 1;
}
.item-2 {
background-color:#BF94E4;
flex-grow: 1;
}
.item-3 {
background-color:#734F96;
flex-grow: 1;
}
.item-2 {
background-color:#BF94E4;
flex-grow: 1;
}
.item-3 {
background-color:#734F96;
flex-grow: 1;
}
.item-4 {
background-color:#FBAED2;
flex-grow: 2; /* proportionate double gap, 2 times gap */
}
.item {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
flex-grow: 1;
}
flex-shrinkproperty denotes and specifies an ability of flex-item to shrink if necessary- The
flex-shrinkproperty specifies how much a flex item will shrink relative to the rest of the flex items - By default, all the flex item have
flex-shrinkfactor value as1, so they shrink/reduce their width by default, (assigningflex-shrinkfactor value as0represents no adjustments/ no shrinking ie. fixed width - which prevents shrinking) flex-shrinksize is always relative to the size of other flex items in flex container (size of the flex-shrink item is calculated as per the size of others flex item)- syntax:
.item {
flex-shrink: <number>; /* default 1 */
}Syntax & Example:
3.3-flex-item-shrink.html
.item {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
flex-shrink: 1; /* default 1, so all items will shrink */
}
.item-2 {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
/* flex-shrink: 1; */ /* default 1, so all items will shrink */
flex-shrink: 0; /* No items will shrink - will get scrollbar */
}
Syntax & Example:
3.3-flex-item-shrink.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>3.3-flex-item-shrink</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.main-container {
border: 4px solid #826a98;
display: flex; /* block level flex container */
}
.item {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
/* flex-shrink: 1; */ /* default 1, so all items will shrink */
/* flex-shrink: 0; */ /* No items will shrink - will get scrollbar */
width: 200px;
}
.item-1 {
background-color:#DDA0DD;
}
.item-2 {
background-color:#BF94E4;
flex-shrink: 2; /* shrink relatively twice / 2 times than other items */
}
.item-3 {
background-color:#734F96;
flex-shrink: 4; /* shrink relatively 4 times than other items */
}
.item-4 {
background-color:#FBAED2;
}
.item-5 {
background-color:#EE82EE;
}
/* .item-6 {
background-color:#ADE4CA;
}
.item-7 {
background-color:#A6D5AE;
}
.item-8 {
background-color:#8FBC8E;
}
.item-9 {
background-color: #64A466;
}
.item-10 {
background-color:#2E8B56;
} */
</style>
</head>
<body>
<div class="main-container">
<div class="item item-1">item-1</div>
<div class="item item-2">item-2</div>
<div class="item item-3">item-3</div>
<div class="item item-4">item-4</div>
<div class="item item-5">item-5</div>
<!-- <div class="item item-6">item-6</div>
<div class="item item-7">item-7</div>
<div class="item item-8">item-8</div>
<div class="item item-9">item-9</div>
<div class="item item-10">item-10</div> -->
</div>
</body>
</html>
- The
flex-basisproperty denotes and specifies the initial-default length/size of a flex-item before the extra/remaining space in the container is distributed - Instead of assigning a width to flex-item, its advisable to always use and apply
flex-basisproperty to set initial width flex-basisproperty takes the same values as the width and height properties and specifies the initial main size of the flex item before free space is distributed according to the flex factors- syntax:
.item {
flex-basis: <length> | auto; /* default auto */
}Syntax & Example:
3.4-flex-basis-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>3.4-flex-item-basis</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.main-container {
border: 4px solid #826a98;
display: flex; /* block level flex container */
}
.item {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
/* width: 200px; */ /* Instead of assigning width to flex-item, its advisable to always use and apply `flex-basis` property to set initial width */
}
.item-1 {
background-color:#DDA0DD;
}
.item-2 {
background-color:#BF94E4;
}
.item-3 {
background-color:#734F96;
}
.item-4 {
background-color:#FBAED2;
flex-basis: 6%;
}
.item-5 {
background-color:#EE82EE;
flex-basis: 300px;
}
/* .item-6 {
background-color:#ADE4CA;
}
.item-7 {
background-color:#A6D5AE;
}
.item-8 {
background-color:#8FBC8E;
}
.item-9 {
background-color: #64A466;
}
.item-10 {
background-color:#2E8B56;
} */
</style>
</head>
<body>
<div class="main-container">
<div class="item item-1">item-1</div>
<div class="item item-2">item-2</div>
<div class="item item-3">item-3 width as per Content</div>
<div class="item item-4">item-4 flex-basis</div>
<div class="item item-5">item-5 flex-basis width</div>
<!-- <div class="item item-6">item-6</div>
<div class="item item-7">item-7</div>
<div class="item item-8">item-8</div>
<div class="item item-9">item-9</div>
<div class="item item-10">item-10</div> -->
</div>
</body>
</html>
flexproperty is short-hand for combination of properties likeflex-grow,flex-shrinkandflex-basis- By default value for
flex-growis0,flex-shrinkis1andflex-basisisauto - W3C encourages/recommends to use the
flexshorthand values intelligently rather than the set the individual/separate component properties - syntax:
.item {
/* flex: <flex-grow> && <flex-shrink> || <flex-basis> */
/* flex-grow: 2;
flex-shrink: 5;
flex-basis: 300px; */
flex: 2 5 300px;
}Syntax & Example:
3.5-flex-basis-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>3.5-flex</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.main-container {
border: 4px solid #826a98;
display: flex; /* block level flex container */
}
.item {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
/* width: 200px; */ /* Instead of assigning width to flex-item, its advisable to always use and apply `flex-basis` property to set initial width */
}
.item-1 {
background-color:#DDA0DD;
}
.item-2 {
background-color:#BF94E4;
}
.item-3 {
background-color:#734F96;
}
.item-4 {
background-color:#FBAED2;
}
.item-5 {
background-color:#EE82EE;
/* flex-grow: 2;
flex-shrink: 5;
flex-basis: 300px; */
flex: 2 5 300px;
}
/* .item-6 {
background-color:#ADE4CA;
}
.item-7 {
background-color:#A6D5AE;
}
.item-8 {
background-color:#8FBC8E;
}
.item-9 {
background-color: #64A466;
}
.item-10 {
background-color:#2E8B56;
} */
</style>
</head>
<body>
<div class="main-container">
<div class="item item-1">item-1</div>
<div class="item item-2">item-2</div>
<div class="item item-3">item-3 width as per Content</div>
<div class="item item-4">item-4</div>
<div class="item item-5">item-5 flex</div>
<!-- <div class="item item-6">item-6</div>
<div class="item item-7">item-7</div>
<div class="item item-8">item-8</div>
<div class="item item-9">item-9</div>
<div class="item item-10">item-10</div> -->
</div>
</body>
</html>
- The
align-selfproperty is used to control the alignment of individual flex-items - The
align-selfsimply overrides the default alignment set by the container'salign-itemsproperty - The default value for
align-selfisauto, it simply means inherit the alignment from container'salign-itemsproperty which is by defaultstretch - syntax:
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}Syntax & Example:
3.6-flex-align-self.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>3.6-flex-align-self</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.main-container {
border: 4px solid #826a98;
display: flex; /* block level flex container */
height: 400px;
align-items: flex-end;
}
.item {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
}
.item-1 {
background-color:#DDA0DD;
align-self: flex-start;
}
.item-2 {
background-color:#BF94E4;
/* align-self: flex-end; */
}
.item-3 {
background-color:#734F96;
align-self: center;
}
.item-4 {
background-color:#FBAED2;
align-self: stretch;
}
.item-5 {
background-color:#EE82EE;
font-size: 30px;
align-self: baseline;
}
.item-6 {
background-color:#ADE4CA;
}
.item-7 {
background-color:#A6D5AE;
}
.item-8 {
background-color:#8FBC8E;
}
.item-9 {
background-color: #64A466;
}
.item-10 {
background-color:#2E8B56;
}
</style>
</head>
<body>
<div class="main-container">
<div class="item item-1">item-1 <br/> flex-start</div>
<div class="item item-2">item-2 <br/> flex-end</div>
<div class="item item-3">item-3 <br/> center</div>
<div class="item item-4">item-4 <br/> stretch</div>
<div class="item item-5">item-5</div>
<div class="item item-6">item-6</div>
<div class="item item-7">item-7</div>
<div class="item item-8">item-8</div>
<div class="item item-9">item-9</div>
<div class="item item-10">item-10</div>
</div>
</body>
</html>
Syntax & Example:
4.1-flex-demo-perfect-center.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>4.1-flex-demo-perfect-center.html</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.container {
background-color: #64A466;
border: 4px solid #826a98;
height: 500px;
width: 500px;
display: flex; /* block level flex container */
justify-content: center; /* horizontal center - align along the main axis */
align-items: center; /* vertical center - cross axis*/
}
.item {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
text-align: center;
}
.item-1 {
height: 100px;
width: 100px;
background-color:#A6D5AE;
}
</style>
</head>
<body>
<div class="container">
<div class="item item-1">item-1</div>
</div>
</body>
</html>
Syntax & Example:
4.2.1-flex-demo-simple-navbar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>4.2.1-flex-demo-simple-navbar</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.navbar-container {
background-color: #64A466;
border: 4px solid #826a98;
font-size: 1rem;
}
.navbar-content {
display: flex; /* block level flex container */
justify-content: flex-end;
}
.navbar-content, .nav-item {
list-style: none;
list-style-type: none;
margin: 0;
padding: 0;
}
.nav-item {
color: #000000;
cursor: pointer;
padding: 0.5rem 1.5rem;
text-align: center;
}
.nav-item:hover {
color: #ffffff;
background-color: #826a98;
}
</style>
</head>
<body>
<nav class="navbar-container">
<ul class="navbar-content">
<li class="nav-item nav-item-1">Home</li>
<li class="nav-item nav-item-2">About Us</li>
<li class="nav-item nav-item-3">Services</li>
<li class="nav-item nav-item-4">Products</li>
<li class="nav-item nav-item-5">Contact Us</div>
</ul>
</nav>
</body>
</html>justify-content: flex-end;
justify-content: flex-start;
justify-content: center;
Syntax & Example:
4.2.2-flex-demo-responsive-navbar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>4.2.2-flex-demo-responsive-navbar</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.navbar-container {
background-color: #64A466;
border: 4px solid #826a98;
font-size: 1rem;
}
.navbar-content {
display: flex; /* block level flex container */
/* justify-content: flex-end; */
}
.navbar-content, .nav-item {
list-style: none;
list-style-type: none;
margin: 0;
padding: 0;
}
.nav-item {
color: #000000;
cursor: pointer;
padding: 0.5rem 1.5rem;
text-align: center;
flex: auto;
}
.nav-item:hover {
color: #ffffff;
background-color: #826a98;
}
@media all and (max-width: 599px) {
.navbar-content {
flex-direction: column;
}
}
</style>
</head>
<body>
<nav class="navbar-container">
<ul class="navbar-content">
<li class="nav-item nav-item-1">Home</li>
<li class="nav-item nav-item-2">About Us</li>
<li class="nav-item nav-item-3">Services</li>
<li class="nav-item nav-item-4">Products</li>
<li class="nav-item nav-item-5">Contact Us</div>
</ul>
</nav>
</body>
</html>
.nav-item {
color: #000000;
cursor: pointer;
padding: 0.5rem 1.5rem;
text-align: center;
flex: auto;
}
@media all and (max-width: 599px) {
.navbar-content {
flex-direction: column;
}
}
Syntax & Example:
4.3.1-flex-demo-item-height.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>4.3.1-flex-demo-item-height</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.container {
background-color: #64A466;
border: 4px solid #826a98;
display: flex; /* block level flex container */
}
.item {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
}
.item-1 {
background-color:#A6D5AE;
/* old mechanism */
/* float: left;
width: 20%; */
}
.item-2 {
background-color:#DDA0DD;
/* old mechanism */
/* float: right;
width: 80%; */
}
</style>
</head>
<body>
<div class="container">
<div class="item item-1">Item-1 Detail Information</div>
<div class="item item-2">Item-2 CSS Flexible Box Layout Module (Flexbox) is one of the most widely used and popular mechanisms which provides flexibility to create/build or design professional layouts/nested layouts. `CSS Flexible Box Layout Module` is also known and referred to as `CSS Flexbox`, is designed for one-dimensional layout model that makes it easy:
<ul>
<li>Design flexible and efficient layouts</li>
</ul>
This is a comprehensive guide to CSS flexbox layout. This complete guide explains everything about the flexbox. Basic knowledge of HTML5 and CSS3. </div>
</div>
</body>
</html>
Syntax & Example:
4.3.2-flex-demo-item-height-dialog-card.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>4.3.2-flex-demo-item-height-dialog-card</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.dialog-container {
background-color: #64A466;
border: 4px solid #826a98;
display: flex; /* block level flex container */
}
.dialog {
color: #ffffff;
font-size: 1rem;
padding: 0.75rem;
display: flex;
flex-direction: column;
}
.dialog-1 {
background-color:#A6D5AE;
}
.dialog-2 {
background-color:#DDA0DD;
}
.dialog-header {
font-size: 2rem;
}
.dialog-footer {
margin: 0;
padding: 0;
margin-top: 20px;
background-color: #7d6f7d8a;
font-size: 0.5em;
padding: 1.5em;
text-align: right;
}
.dialog-body {
/* flex-grow: 1; */
flex: 1;
}
</style>
</head>
<body>
<div class="dialog-container">
<div class="dialog dialog-1">
<header class="dialog-header">Dialog-1 Information</header>
<section class="dialog-body">
CSS Flexible Box Layout Module (Flexbox)
</section>
<footer class="dialog-footer">Dialog-1 © Dinanath Corporation 2019 </footer>
</div>
<div class="dialog dialog-2">
<header class="dialog-header">Dialog-2 Flexbox Information</header>
<section class="dialog-body">
CSS Flexible Box Layout Module (Flexbox) is one of the most widely used and popular mechanisms which provides flexibility to create/build or design professional layouts/nested layouts. `CSS Flexible Box Layout Module` is also known and referred to as `CSS Flexbox`, is designed for one-dimensional layout model that makes it easy:
<ul>
<li>Design flexible and efficient layouts</li>
</ul>
This is a comprehensive guide to CSS flexbox layout. This complete guide explains everything about the flexbox. Basic knowledge of HTML5 and CSS3.
</section>
<footer class="dialog-footer">Dialog-2 © Dinanath Corporation 2019 </footer>
</div>
</div>
</body>
</html>
Syntax & Example:
4.4-flex-demo-website-layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>4.4-flex-demo-website-layout</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana;
text-align: center;
height: 100vh;
}
.layout-container {
display: flex;
flex-direction: column;
height: 100vh;
}
.flx-header {
padding: 2rem;
background-color:#A6D5AE;
}
.flx-main-container {
display: flex;
flex: 1;
}
.flx-nav, .flx-aside {
background-color:#DDA0DD;
padding: 1rem;
flex: 1;
}
.flx-article-section {
background-color: #64A466;
padding: 1rem;
flex: 4;
}
.flx-footer {
padding: 1rem;
background-color:#A6D5AE;
font-size: 0.5rem;
font-weight: bold;
letter-spacing: 1rem;
}
</style>
</head>
<body>
<main class="layout-container">
<header class="flx-header">FLEX HEADER</header>
<main class="flx-main-container">
<nav class="flx-nav">Side Navigation</nav>
<article class="flx-article-section">
Main Content Article
</article>
<aside class="flx-aside">Side Ad Bar</aside>
</main>
<footer class="flx-footer">Flex Footer</footer>
</main>
</body>
</html>
@media all and (max-width: 599px) {
.flx-main-container {
flex-direction: column;
}
}
Reference: - https://www.w3schools.com/css/css3_flexbox.asp
Reference: - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout