EASWARI ENGINEERING COLLEGE
(AUTONOMOUS)
BHARATHI SALAI, RAMAPURAM, CHENNAI – 89
DEPARTMENT OF MECHANICAL ENGINEERING
BATCH NO: 02 IV YEAR C SECTION DATE : 21-11-2022
191CSO701T – WEB DESIGNING
GROUP PRESENTATION
CSS FLEXBOX WITH BOOTSTRAP
Presented by
SHREERAAM G 310619114082
SRIRAM KUMAR T 310619114086
SUSEENDRAN M S 310619114094
1
Agenda
•Introduction to Flexbox
•Flexbox Properties
• Flex direction
• Flex wrap
• Justify content
• Align items
• Align self
• Gap
• Child Element Properties
•Example Webpage using Flexbox
•Flexbox using Bootstrap
CSS FLEXBOX WITH BOOTSTRAP 2
Introduction
What is Flexbox ?
Flexbox (or) Flexible box is a layout module that provides more efficient way
to align items, distribute space among items and justify the content easily
even when the sizes are dynamic or unknown.
Flexbox is a complete module with many set of properties. In which some of
them are set to parent element and some are set to the child elements.
CSS FLEXBOX WITH BOOTSTRAP 3
Flex Properties
PARENT CONTAINER .container {
display: flex;
flex-direction: row;
row-reverse;
column;
column-reverse;
Flex-direction
flex-wrap: wrap;
no-wrap;
wrap-reverse;
flex-flow: column wrap;
column-reverse no-wrap;
Flex-wrap etc.,
CSS FLEXBOX WITH BOOTSTRAP 4
Flex Properties
.container {
JUSTIFY CONTENT ALIGN ITEMS
justify-content:flex-start;
flex-end;
center;
space-between;
space-around;
space-evenly;
align-items: flex-start;
flex-end;
center;
stretch;
baseline;
}
CSS FLEXBOX WITH BOOTSTRAP 5
Flex Properties
ALIGN CONTENT GAP
.container {
align-content: flex-start;
flex-end;
center;
stretch;
space-between;
space-around;
space-evenly;
gap: 10px;
30px;
10px 30px;
}
CSS FLEXBOX WITH BOOTSTRAP 6
Flex Properties
CHILD ELEMENT
ORDER:
The order property controls the order in which the element has to be displayed.
FLEX-GROW:
In what ratio should the container’s remaining space be distributed to the child element?
The default value is 1.
FLEX-SHRINK:
In what ratio, the child element has to shrink if the screen size or window changes? The
default value is 1.
FLEX-BASIS:
The minimum or maximum threshold value below or above which the flex-grow or shrink
ALIGN-SELF:
Over-ride align-items property and align each child element individually.
transition should change. The default value is 0.
CSS FLEXBOX WITH BOOTSTRAP 7
Flexbox Example HTML Page
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="card-01"></div>
<div class="card-01"></div>
<div class="card-01"></div>
</div>
<div class="row">
<div class="card-02"></div>
<div class="card-02"></div>
</div>
<div class="row">
<div class="card-03"></div>
</div>
</div>
</body>
CSS FLEXBOX WITH BOOTSTRAP 8
Flexbox Example CSS Page
.row { .card-03 {
width: 100%; background: #ccccff;
display: flex; max-width: 940px;
justify-content: center; }
flex-wrap: wrap; @media (max-width: 800px) {
} .card-01 {
.card-01, .card-02, .card-03 { flex: 100%;
position: relative; max-width: 600px;
flex: 1; }
height: 150px; .card-02 {
margin: 10px; flex: 100%;
border-radius: 5px; max-width: 600px;
} }
.card-01 { .card-03 {
background: #6495ed; flex: 100%;
max-width: 300px; max-width: 600px;
} }
.card-02 { }
background: #40e0d0;
max-width: 460px;
}
CSS FLEXBOX WITH BOOTSTRAP 9
Flexbox Example OUTPUT
Laptop / Desktop Mobile Devices
CSS FLEXBOX WITH BOOTSTRAP 10
Flexbox using Bootstrap
Just by adding “d-flex” as the class name to the parent container. All its child
element behaves flexibly.
<div class="container d-flex">
<div class="item"></div>
</div>
All the properties we have seen till now can be created just by adding a class
name to either the parent container (or) child element.
class="d-flex flex-row align-items-center justify-content-around"
<div class="d-flex flex-wrap">
<div class="order-1 flex-grow-1"></div>
</div>
CSS FLEXBOX WITH BOOTSTRAP 11
References
https://getbootstrap.com/docs/5.2/utilities/flex/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
CSS FLEXBOX WITH BOOTSTRAP 12
