CHAPTER 5: CSS FLEXBOX

CLO4: Apply different styles to modify the appearance of static

web pages
DOCUMENT REVISION
CONTROL (DRC)

Version Author Effecti Change DRC

ve Description No
Date
X.Y
1.0 Oussama Hamid 202310 First Version 01
X: MAJOR CHANGE
1.1 Reem Atassi 202310 Review
Y: MINOR CHANGE

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID

2
LECTURE NOTES

 Contents of lectures are based on the textbook, recommended text, and

supplementary material
 Please read Chapter16: 177 to 200 of the e-textbook

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 3

 A: CSS FLEX BOX

B: FLEX CONTAINER PROPERTIES

LECTURE
OUTLINE
C: FLEX ITEM PROPERTIES

D: RESPONSIVE WEB DESIGN

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID

CSS FLEXBOX

 CCS flexbox, or simply Flexbox, is a layout model that allows you to

design sophisticated layouts with a more efficient and predictable way to
distribute space and align content with a container, even when the size of
your elements is unknown or dynamic.
 More can be found in Chapter16, pages 177 to 200 of the e-textbook.

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 5

CSS FLEXBOX

 Key concepts and properties associated with CSS flexbox include:

 Flex Container: to create a flexbox layout, you designate an element as a flexible
container (flex container)
 By applying the ‘display: flex;’ or ‘display: inline-flex;’ property to it.
 This container becomes the parent element for the items you want to arrange using flex properties.

 Flex Items:
 The child elements within a flex container are called ‘flex items’.
 These items are laid out along a single axis or multiple axes, depending on how the container is
configured.

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 6

FLEX CONTAINER

 Key concepts and properties associated with CSS flexbox include:

 Flex Container properties:
 Display
 Flex-direction
 Flex-wrap
 Justify-content
 Align-items
 Order

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 7

DISPLAY

 The flex container becomes flexible by setting the display property to flex
as follows:

.flex-container {
display: flex;
}

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 8

FLEX-DIRECTION

 The flex-direction property defines in which direction the container wants

to stack the flex items.
 For example, the column value stacks the flex items vertically (from top to
bottom)

.flex-container {
display: flex;
flex-direction: column;
}

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 9

FLEX-DIRECTION

 Other flex directions include:

 Column-reverse: this stacks the flex items vertically (but from bottom to top).
 Row: the row value stacks the flex items horizontally from left to right.
 Row-reverse: the row-reverse value stacks the flex items horizontally (but from
right to left).

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 10

FLEX-DIRECTION

 Column-reverse: this stacks the flex items vertically (but from bottom to
top).

.flex-container {
display: flex;
flex-direction: column-reverse;
}

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 11

FLEX-DIRECTION

 Row: the row value stacks the flex items horizontally from left to right.

.flex-container {
display: flex;
flex-direction: row;
}

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 12

FLEX-DIRECTION

 Row-reverse: the row value stacks the flex items horizontally (but from
right to left.

.flex-container {
display: flex;
flex-direction: row-reverse;
}

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 13

FLEX-WRAP

 Flex-wrap: the flex-wrap property specifies whether the flex items

should wrap or not.

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

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 14

FLEX-WRAP

 Flex-wrap:
 The flex-wrap property specifies whether the flex items should wrap or not.

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

 The flex-wrap: no wrap specifies that the flex items will not wrap (this is default).
.flex-container {
display: flex;
flex-wrap: nowrap;
}
CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 15
JUSTIFY-CONTENT & ALIGN-ITEMS

 Justify-content: The justify-content property is used to align the flex

items.
.flex-container {
display: flex;
justify-content: center;
}
 Align-items: The align-items property is used to align the flex items.
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 16
FLEX ITEM

 Key concepts and properties associated with CSS flexbox include:

 Flex Item properties:
 Flex-grow
 Flex-shrink
 Flex-basis
 Flex-align
 Align-self
 Order

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 17

FLEX-GROW

 Flex-grow: The flex-grow property specifies how much a flex item will
grow relative to the rest of the 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>

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 18

FLEX-SHRINK

 Flex-shrink: The flex-shrink property specifies how much a flex item

will shrink relative to the rest of the 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>
CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 19
FLEX-BASIS

 Flex-basis: The flex-basis property specifies the initial length of a flex

item.

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

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 20

ALIGN-SELF

 Align-self: The align-self property specifies the alignment for the

selected item inside the flexible container. It overrides the default
alignment set by the container’s align-items property.

<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>
CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 21
ORDER

 Order: The order property specifies 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>

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 22

RESPONSIVE WEB DESIGN

 What is Responsive Web Design (RWD)?

 Responsive web design is about creating web pages that look good in all devices.
 A responsive web design will automatically adjust for different screen sizes and
viewports.
 It is when you use CSS and HTML to resize, hide, shrink, enlarge, or move the
content to make it look good on any screen.

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 23

RESPONSIVE WEB DESIGN

 What is Responsive Web Design (RWD)?

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 24

SETTING THE VIEW PORT

 Setting the View Port

 To create a responsive website, add the following <meta> tag to all your web
pages.

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 25

RESPONSIVE IMAGES

 Using the width Property

 If the CSS ‘width’ property is set to 100%, the image will be responsive and scale
up and down.

<img src=“myImage.jpg" style="width:100%;">

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 26

RESPONSIVE IMAGES

 Using the max-width Property

 If the ‘max-width’ property is set to 100%, the image will scale down if it has to,
but never scale up to be larger than its original size.

<img src=“myImage.jpg" style=“max-width:100%; height:auto;”>

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 27

MEDIA QUERIES

 Media Queries
 In addition to resize images, it is also common to use media queries in responsive
web design.
 With media queries you can define completely different styles for different browser
sizes.
 What are media queries useful for?
 Imagine you are designing a website, and you want it to look good on both big
computer screens and small phone screens. Media queries help you achieve this.

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 28

MEDIA QUERIES

 How does a media query look like?

 The general syntax of a media query in CSS consists of the ‘@media’ rule followed by a set of conditions that define when
the style inside the media query block should be applied.
@media (condition){
/* CSS styles to be applied when the condition is met */
}
 In the example below, the styles inside the media query block will be applied when the screen width is 600 pixels or less,
making the background color of the ‘body’ element light blue.
@media (max-width: 600px) {
body { background-color: lightblue;
}
}
CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 29
MEDIA QUERIES

 The following is a more specific syntax with additional control over how the media
query is evaluated.

@media not | only media_type and (conditions) {

/* CSS rules; */
}

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 30

MEDIA QUERIES

 @media is the beginning of a media query rule. It indicates that you are defining
styles that should be applied under certain conditions.
 not | only these are optional keywords that modify how the media query is evaluated.
 not means the enclosed styles will apply when the condition specified is not true.
 only means that the enclosed styles will apply only when the condition specified is true.

 media_type this is where you specify the type of media for which the styles should be
applied. Common media types include things like “screen,” “print,” “all,” “speech,”
etc. For example, if you want your styles to apply only when printing a webpage,
you’d use ‘print’ as the media type.

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 31

MEDIA QUERIES

 conditions these are criteria that determine when the enclosed styles should be
applied. Conditions can include things like screen width, screen height, orientation,
and more. We use logical operators like ‘and’, ‘not’ and ‘only’ to combine these
conditions.
 CSS rules: Inside the curly braces, you put CSS styles that should be applied when
the conditions in the media query are met.

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 32

MEDIA QUERIES

 Example:
@media screen and (max-width: 600) {
/* CSS rules; */
}
This media query is used to define CSS rules that will be applied to screens (like computers and
mobile devices) when their width is 600 pixels or less.

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 33

RESPONSIVE WEB DESIGN AND THE HTML <ASIDE> ELEMENT

 <aside>
 The <aside> element is a semantic HTML5 element typically used for defining
some content aside from the content it is placed in.

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 34

RESPONSIVE WEB DESIGN

 Activity: this activity reviews

some of the flex container
properties and responsive design.
 https://replit.com/@ohhamid/
Flexbox-Responsive-
Design#index.html

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID 35

  CCS flexbox is a layout model that allows you to design sophisticated layouts

SUMMAR with a more efficient way to distribute space and align content with a container,
even when the size of your elements is unknown or dynamic.

Y  Key concepts and properties associated with CSS flexbox include flex container
and flex items.
 Flex container properties include display, flex-direction, flex-wrap, and justify-
content.
 Flex item properties include flex-grow, flex-shrink, flex-basis, flex-align, align-
self, and order.
 Responsive website design uses CSS and HTML to resize, hide, shrink, enlarge,
or move the content to make it look good on any screen.

36

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID

KEY TERMS Flex
Flexbox
Container

Flex Items
37

CIS 1203 - WEB TECHNOLOGIES – DR. OUSSAMA HAMID

800 MyHCT (800 69428) www.hct.ac.ae