Scribd
Upload
4 views

MODULE-5- CSS-FLEX-edited

Module 5 focuses on CSS Flexbox and Grid, teaching students to create responsive layouts using these techniques along with frameworks like Bootstrap and Tailwind. Key learning outcomes include applying CSS Grid and Flexbox for flexible layouts, utilizing CSS frameworks for responsive design, and comparing their advantages and limitations. The module includes practical exercises to reinforce the concepts of Flexbox properties such as flex-direction, flex-wrap, and alignment.

Uploaded by

richmarabi25
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

MODULE-5- CSS-FLEX-edited

Module 5 focuses on CSS Flexbox and Grid, teaching students to create responsive layouts using these techniques along with frameworks like Bootstrap and Tailwind. Key learning outcomes include applying CSS Grid and Flexbox for flexible layouts, utilizing CSS frameworks for responsive design, and comparing their advantages and limitations. The module includes practical exercises to reinforce the concepts of Flexbox properties such as flex-direction, flex-wrap, and alignment.

Uploaded by

richmarabi25
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

Module 5: CSS FLEX

📌 Course Overview:
This module introduces CSS Grid, Flexbox, and popular CSS frameworks like Bootstrap and
Tailwind to create dynamic, responsive layouts.

🎯 Learning Outcomes:
By the end of this module, students should be able to:

1. Apply CSS Grid and Flexbox to develop flexible, scalable layouts.


2. Utilize Bootstrap, Tailwind, or other frameworks for responsive design.
3. Compare the advantages and limitations of different CSS frameworks.

Here’s a detailed explanation on how to apply CSS Grid and Flexbox to develop flexible,
scalable layouts for responsive web design.

LO-1:Applying CSS Grid and Flexbox for Flexible,


Scalable Layouts
Modern web development requires layouts that adapt to various screen sizes and devices. CSS
Grid and Flexbox are powerful layout systems in CSS that help developers create responsive,
flexible, and scalable designs.

1. Introduction to Flexbox and Grid


What is CSS Flexbox?

Flexbox is short for the Flexible Box Layout module.

Flexbox is a layout method for arranging items in rows or


columns.

Flexbox makes it easier to design a flexible responsive layout


structure, without using float or positioning.

1
Flexbox vs. Grid
The CSS Flexbox Layout should be used for one-dimensional layout, with rows
OR columns.

The CSS Grid Layout should be used for two-dimensional layout, with rows AND
columns.

Feature Flexbox CSS Grid


Layout One-dimensional (row or column) Two-dimensional (rows and
Direction columns)
Use Case Aligning items in a single Complex page layouts with rows and
row/column columns
Flexibility Auto adjusts content based on size Precisely defines layout areas
Browser Widely supported (IE 10+, modern Widely supported (IE 11+ with
Support browsers) prefixes)

CSS Flexible Box Layout Module


Before the Flexible Box 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

CSS flexbox is supported in all modern browsers.

CSS Flexbox Components


A flexbox always consists of:

 a Flex Container - the parent (container) <div> element


 Flex Items - the items inside the container <div>

2
A Flex Container with Three Flex Items
To start using CSS Flexbox, you need to first define a flex container.

The flex container becomes flexible by setting the display property to flex.

The element above represents a flex container (the blue area) with three flex
items.

EXAMPLE

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: DodgerBlue;
}

.flex-container > div {


background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>

<h1>Create a Flex Container</h1>

<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>

3
</div>
<p>A Flexible Layout must have a parent element with the <em>display</em> property set to
<em>flex</em>.</p>
<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>
</body>
</html>

The flex-direction Property


flex-direction: column; stacks the flex items vertically (from top to bottom)

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-direction: column;
background-color: DodgerBlue;
}

.flex-container > div {


background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;

4
}
</style>
</head>
<body>

<h1>The flex-direction Property</h1>

<p>flex-direction: column; stacks the flex items vertically (from top to


bottom):</p>

<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

</body>
</html>

EXERCISE 1

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-direction: row-reverse;
background-color: DodgerBlue;
}

.flex-container > div {


background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>

<h1>The flex-direction Property</h1>

<p>flex-direction: row-reverse; stacks the flex items horizontally (but from


right to left):</p>

<div class="flex-container">
<div>1</div>

5
<div>2</div>
<div>3</div>
</div>

</body>
</html>

EXERCISE 2

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: DodgerBlue;
}

.flex-container>div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>

<h1>The flex-wrap Property</h1>

<p>flex-wrap: nowrap; specifies that the flex items will not wrap (this is
default):</p>

<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>

6
</body>
</html>

EXERCISE 3

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
justify-content: space-around;
background-color: DodgerBlue;
}

.flex-container > div {


background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>

<h1>The justify-content Property</h1>

<p>justify-content: space-around; displays the flex items with space before,


between, and after the lines:</p>

<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

</body>
</html>

EXERCISE 4

7
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
overflow: scroll;
background-color: DodgerBlue;
}

.flex-container > div {


background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>

<h1>The align-content Property</h1>

<p>align-content: center; - The flex lines are packed toward the center of
the container:</p>

<div class="flex-container">
<div>1</div>

8
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>

</body>
</html>

The CSS Flex Items


The direct child elements of a flex container automatically becomes flex items.

The element above represents four blue flex items inside a grey flex container.

Example
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: #f1f1f1;
}

9
.flex-container > div {
background-color: dodgerblue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>

<h1>Flex Items</h1>

<p>All direct children of a flex container becomes flex items:</p>

<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

</body>
</html>

The CSS properties we use for flex items are:

 order
 flex-grow
 flex-shrink
 flex-basis
 flex
 align-self

The order Property


The order property specifies the order of the flex items inside the flex container.

The first flex item in the code does not have to appear as the first item in the
layout.

The order value must be a number, default value is 0.

10
Example
The order property can change the order of the flex items:

<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}

.flex-container>div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>

<h1>The order Property</h1>

<p>Use the order property to sort the flex items as you like:</p>

<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>

11
</body>
</html>

The flex-grow Property


The flex-grow property specifies how much a flex item will grow relative to the
rest of the flex items.

The value must be a number, default value is 0.

Example
Make the third flex item grow eight times faster than the other flex items:

<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}

.flex-container > div {


background-color: DodgerBlue;
color: white;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>

<h1>The flex-grow Property</h1>

12
<p>Make the third flex item grow eight times faster than the other flex
items:</p>

<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>

</body>
</html>

The flex-shrink Property


The flex-shrink property specifies how much a flex item will shrink relative to
the rest of the flex items.

The value must be a number, default value is 1.

Example
Do not let the third flex item shrink as much as the other flex items:

<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {

13
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}

.flex-container>div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>

<h1>The flex-shrink Property</h1>

<p>Do not let the third flex item shrink as much as the other flex items:</p>

<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>

</body>
</html>

The flex-basis Property


The flex-basis property specifies the initial length of a flex item.

Example
Set the initial length of the third flex item to 200 pixels:

14
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}

.flex-container > div {


background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>

<h1>The flex-basis Property</h1>

<p>Set the initial length of the third flex item to 200 pixels:</p>

<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis:200px">3</div>
<div>4</div>
</div>

</body>
</html>

The flex Property


The flex property is a shorthand property for the flex-grow, flex-shrink,
and flex-basis properties.

15
Example
Make the third flex item not growable (0), not shrinkable (0), and with an initial
length of 200 pixels:

<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex: 0 0 200px">3</div>
<div>4</div>
</div>
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}

.flex-container>div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>

<h1>The flex Property</h1>

<p>Make the third flex item not growable (0), not shrinkable (0), and with an
initial length of 200 pixels:</p>

<div class="flex-container">

16
<div>1</div>
<div>2</div>
<div style="flex: 0 0 200px">3</div>
<div>4</div>
</div>

</body>
</html>

The align-self Property


The align-self property specifies the alignment for the selected item inside the
flexible container.

The align-self property overrides the default alignment set by the


container's align-items property.

In these examples we use a 200 pixels high container, to better demonstrate


the align-self property:

Example
Align the third flex item in the middle of the container:

<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>

<!DOCTYPE html>
<html>

17
<head>
<style>
.flex-container {
display: flex;
height: 200px;
background-color: #f1f1f1;
}

.flex-container > div {


background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>

<h1>The align-self Property</h1>

<p>The "align-self: center;" aligns the selected flex item in the middle of
the container:</p>

<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>

<p>The align-self property overrides the align-items property of the


container.</p>

</body>
</html>

The CSS Flex Items Properties


The following table lists all the CSS Flex Items properties:

The CSS Flex Items Properties


The following table lists all the CSS Flex Items properties:

18
CSS Responsive Flexbox
Responsive Flexbox
You learned from the CSS Media Queries chapter that you can use media
queries to create different layouts for different screen sizes and devices.

For example, if you want to create a two-column layout for most screen sizes,
and a one-column layout for small screen sizes (such as phones and tablets),
you can change the flex-direction from row to column at a specific breakpoint
(800px in the example below):

Example
.flex-container {
display: flex;

19
flex-direction: row;
}

/* Responsive layout - makes a one column layout instead of a two-column


layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}

<!DOCTYPE html>
<html>
<head>
<style>
*{
box-sizing: border-box;
}

.flex-container {
display: flex;
flex-direction: row;
font-size: 30px;
text-align: center;
}

.flex-item-left {
background-color: #f1f1f1;

20
padding: 10px;
flex: 50%;
}

.flex-item-right {
background-color: dodgerblue;
padding: 10px;
flex: 50%;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */


@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
</style>
</head>
<body>

<h1>Responsive Flexbox</h1>

<p>The "flex-direction: row;" stacks the flex items horizontally (from left to right).</p>
<p>The "flex-direction: column;" stacks the flex items vertically (from top to bottom).</p>
<p><b>Resize the browser window to see that the direction changes when the
screen size is 800px wide or smaller.</b></p>

<div class="flex-container">
<div class="flex-item-left">1</div>
<div class="flex-item-right">2</div>
</div>

</body>
</html>

Another way is to change the percentage of the flex property of the flex items
to create different layouts for different screen sizes. Note that we also have to
include flex-wrap: wrap; on the flex container for this example to work:

Example
.flex-container {
display: flex;
flex-wrap: wrap;

21
}

.flex-item-left {
flex: 50%;
}

.flex-item-right {
flex: 50%;
}

/* Responsive layout - makes a one column layout instead of a two-column


layout */
@media (max-width: 800px) {
.flex-item-right, .flex-item-left {
flex: 100%;
}
}

<!DOCTYPE html>
<html>
<head>
<style>
*{
box-sizing: border-box;
}

.flex-container {
display: flex;
22
flex-wrap: wrap;
font-size: 30px;
text-align: center;
}

.flex-item-left {
background-color: #f1f1f1;
padding: 10px;
flex: 50%;
}

.flex-item-right {
background-color: dodgerblue;
padding: 10px;
flex: 50%;
}

/* Responsive layout - makes a one column-layout instead of a two-column layout */


@media (max-width: 800px) {
.flex-item-right, .flex-item-left {
flex: 100%;
}
}
</style>
</head>
<body>

<h1>Responsive Flexbox</h1>

<p>In this example, we change the percentage of flex to create different layouts for different
screen sizes.</p>
<p><b>Resize the browser window to see that the direction changes when the
screen size is 800px wide or smaller.</b></p>

<div class="flex-container">
<div class="flex-item-left">1</div>
<div class="flex-item-right">2</div>
</div>

</body>
</html>

Responsive Image Gallery using Flexbox

23
Use flexbox to create a responsive image gallery that varies between four, two
or full-width images, depending on screen size:

<!DOCTYPE html>
<html>
<style>
*{
box-sizing: border-box;
}

body {
margin: 0;
font-family: Arial;
}

.header {
text-align: center;
padding: 32px;
}

.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}

24
/* Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}

.column img {
margin-top: 8px;
vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */


@media (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each
other */
@media (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
</style>
<body>

<!-- Header -->


<div class="header">
<h1>Responsive Image Gallery</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>

<!-- Photo Grid -->


<div class="row">
<div class="column">
<img src="/w3images/wedding.jpg" style="width:100%">
<img src="/w3images/rocks.jpg" style="width:100%">
<img src="/w3images/falls2.jpg" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
<img src="/w3images/nature.jpg" style="width:100%">
<img src="/w3images/mist.jpg" style="width:100%">

25
<img src="/w3images/paris.jpg" style="width:100%">
</div>

<div class="column">
<img src="/w3images/underwater.jpg" style="width:100%">
<img src="/w3images/ocean.jpg" style="width:100%">
<img src="/w3images/wedding.jpg" style="width:100%">
<img src="/w3images/mountainskies.jpg" style="width:100%">
<img src="/w3images/rocks.jpg" style="width:100%">
<img src="/w3images/underwater.jpg" style="width:100%">
</div>

<div class="column">
<img src="/w3images/wedding.jpg" style="width:100%">
<img src="/w3images/rocks.jpg" style="width:100%">
<img src="/w3images/falls2.jpg" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
<img src="/w3images/nature.jpg" style="width:100%">
<img src="/w3images/mist.jpg" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
</div>

<div class="column">
<img src="/w3images/underwater.jpg" style="width:100%">
<img src="/w3images/ocean.jpg" style="width:100%">
<img src="/w3images/wedding.jpg" style="width:100%">
<img src="/w3images/mountainskies.jpg" style="width:100%">
<img src="/w3images/rocks.jpg" style="width:100%">
<img src="/w3images/underwater.jpg" style="width:100%">
</div>
</div>

</body>
</html>

Responsive Website using Flexbox

26
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
}

/* Style the body */


body {
font-family: Arial;
margin: 0;
}

/* Header/logo Title */
.header {
padding: 60px;
text-align: center;
background: #1abc9c;
color: white;
}

/* Style the top navigation bar */

27
.navbar {
display: flex;
background-color: #333;
}

/* Style the navigation bar links */


.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}

/* Change color on hover */


.navbar a:hover {
background-color: #ddd;
color: black;
}

/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */


/* Sidebar/left column */
.side {
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}

/* Main column */
.main {
flex: 70%;
background-color: white;
padding: 20px;
}

/* Fake image, just for this example */


.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}

28
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on
top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row, .navbar {
flex-direction: column;
}
}
</style>
</head>
<body>

<!-- Note -->


<div style="background:yellow;padding:5px">
<h4 style="text-align:center">Resize the browser window to see the responsive effect.</h4>
</div>

<!-- Header -->


<div class="header">
<h1>My Website</h1>
<p>With a <b>flexible</b> layout.</p>
</div>

<!-- Navigation Bar -->


<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>

<!-- The flexible grid (content) -->


<div class="row">
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
<h3>More Text</h3>

29
<p>Lorem ipsum dolor sit ame.</p>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div>
</div>
<div class="main">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2024</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco.</p>
<br>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2024</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco.</p>
</div>
</div>

<!-- Footer -->


<div class="footer">
<h2>Footer</h2>
</div>

</body>
</html>

30

You might also like