BACHELOR OF SCIENCE (HONOURS) IN ANIMATION & MULTIMEDIA – 2024 / 2nd Sem

BAM27202(T) - Responsive Web Design

Section - A/B/C
2024-25​
​

Study Material
(Responsive Web Design , BAM27202(T))
_____________________________________________________________________________________________

Table of Contents

Topic Page No

CSS Flexbox 1

Flex Container Properties 2

Flex Items Properties 5
Css Positioning 7

Ayan Chatterjee
Dept: Multimedia
Brainware University, Kolkata ​ ​ 1
BACHELOR OF SCIENCE (HONOURS) IN ANIMATION & MULTIMEDIA – 2024 / 2nd Sem
BAM27202(T) - Responsive Web Design
Section - A/B/C
2024-25​
​
Introduction to Flexbox
Flexbox, short for “Flexible Box Layout,” is a CSS3 layout model that provides a more
efficient way to design, align, and distribute space among elements within a container.
It is particularly useful for building responsive layouts, where items need to adjust or
wrap based on screen size.

Before Flexbox, web developers relied on floats and inline-block techniques, which
made vertical alignment and dynamic spacing difficult. Flexbox addresses these issues
by offering flexibility and better control.

Understanding Axes in Flexbox

When using Flexbox, you deal with two axes:

●​ Main Axis: The primary axis along which items are laid out. It changes based on
flex-direction.
●​ Cross Axis: The axis perpendicular to the main axis.

flex-direction​ ​ Main Axis​ ​ ​ Cross Axis

row (default)​ ​ Left → Right​ ​ ​ Top → Bottom

column​ ​ ​ Top → Bottom​ ​ Left → Right​

Ayan Chatterjee
Dept: Multimedia
Brainware University, Kolkata ​ ​ 2
BACHELOR OF SCIENCE (HONOURS) IN ANIMATION & MULTIMEDIA – 2024 / 2nd Sem
BAM27202(T) - Responsive Web Design
Section - A/B/C
2024-25​
​
Flex Container Properties
A flex container is any element with display: flex; or display: inline-flex;. Its
children automatically become flex items.

●​ display
.container {

​ ​ ​ display: flex;

Activates the Flexbox model on the container

●​ flex-direction
Defines the direction in which items are placed in the container.

​ flex-direction: row | row-reverse | column | column-reverse;

●​ row: left to right (default)​

●​ column: top to bottom​

●​ row-reverse: right to left​

●​ column-reverse: bottom to top

●​ justify-content
​ Aligns items horizontally along the main axis.

Ayan Chatterjee
Dept: Multimedia
Brainware University, Kolkata ​ ​ 3
BACHELOR OF SCIENCE (HONOURS) IN ANIMATION & MULTIMEDIA – 2024 / 2nd Sem
BAM27202(T) - Responsive Web Design
Section - A/B/C
2024-25​
​
​ justify-content: flex-start | flex-end | center | space-between | space-around |
space-evenly;

●​ flex-start: Items align at the start of the row.​

●​ space-between: First item at start, last at end, others spaced evenly.​

●​ space-around: Equal space around each item.​

●​ space-evenly: Equal spacing between and around all items.

●​ align-items
Aligns items vertically on the cross axis.

​ align-items: flex-start | flex-end | center | stretch | baseline;

●​ stretch: Items stretch to fill the container (default).​

●​ center: Items centered vertically.

●​ align-content
Used when there are multiple rows. Aligns entire row blocks.

​ align-content: flex-start | flex-end | center | space-between | space-around |

stretch;

●​ flex-wrap
Determines whether flex items wrap to the next line or stay in a single line.

​ flex-direction: row | row-reverse | column | column-reverse;

●​ wrap: Items wrap to a new line when necessary.​

●​ wrap-reverse: Wrap in reverse order.

Ayan Chatterjee
Dept: Multimedia
Brainware University, Kolkata ​ ​ 4
BACHELOR OF SCIENCE (HONOURS) IN ANIMATION & MULTIMEDIA – 2024 / 2nd Sem
BAM27202(T) - Responsive Web Design
Section - A/B/C
2024-25​
​

●​ gap
Defines spacing between items in the flex container.

​ gap: 20px;

Flex Item Properties

●​ flex-grow
Specifies how much the item will grow relative to other items.

​ .item { flex-grow: 1; }

​ A higher value allows more growth.​

●​ flex-shrink
Specifies how much the item will shrink if space is limited

​ .item { flex-shrink: 1; }

●​ flex-basis
Initial size of an item before space distribution.

​ .item { flex-basis: 200px; }

●​ align-self
Overrides align-items for an individual flex item.

​ .item { align-self : center ; }

Ayan Chatterjee
Dept: Multimedia
Brainware University, Kolkata ​ ​ 5
BACHELOR OF SCIENCE (HONOURS) IN ANIMATION & MULTIMEDIA – 2024 / 2nd Sem
BAM27202(T) - Responsive Web Design
Section - A/B/C
2024-25​
​

Flexbox Use Cases

●​ Centering elements both vertically and horizontally.​

●​ Dynamic and responsive navigation bars.​

●​ Reordering elements on different screen sizes.​

●​ Creating equal-height columns regardless of content.

Ayan Chatterjee
Dept: Multimedia
Brainware University, Kolkata ​ ​ 6
BACHELOR OF SCIENCE (HONOURS) IN ANIMATION & MULTIMEDIA – 2024 / 2nd Sem
BAM27202(T) - Responsive Web Design
Section - A/B/C
2024-25​
​
CSS POSITIONING

CSS Positioning is used to control how and where elements appear on a webpage.
Using the position property, you can shift elements away from their normal place in
the document flow to a new specified location.

Types of Positioning

1.​ static (default)

.element {

​ ​ position: static;

●​ Default positioning of all elements.

●​ Elements flow normally, top to bottom.
●​ Offset properties (top, left, etc.) do not work.

2.​relative
.element {

position: relative;

top: 10px;

left: 20px;

Ayan Chatterjee
Dept: Multimedia
Brainware University, Kolkata ​ ​ 7
BACHELOR OF SCIENCE (HONOURS) IN ANIMATION & MULTIMEDIA – 2024 / 2nd Sem
BAM27202(T) - Responsive Web Design
Section - A/B/C
2024-25​
​
●​ The element stays in the normal document flow.
●​ It moves relative to its original position.

3.​ absolute
.element {

position: absolute;

top: 0;

left: 0;

●​ Removed from the normal document flow.

●​ Positioned relative to the nearest non-static ancestor.
●​ If no ancestor is positioned, it’s relative to <html>.

4.​ fixed
.element {

position: fixed;

bottom: 0;

right: 0;

●​ Positioned relative to the viewport (browser window).

●​ Does not scroll with the page.
●​ Ideal for sticky headers, footers, or floating buttons.

Ayan Chatterjee
Dept: Multimedia
Brainware University, Kolkata ​ ​ 8
BACHELOR OF SCIENCE (HONOURS) IN ANIMATION & MULTIMEDIA – 2024 / 2nd Sem
BAM27202(T) - Responsive Web Design
Section - A/B/C
2024-25​
​
5.​sticky
.element {

position: sticky;

top: 0;

●​ Acts like relative until a threshold is reached, then sticks like fixed.
●​ Used for "sticky" section headers that stay in view while scrolling.

Offset Properties
Used with relative, absolute, fixed, and sticky

●​ top, right, bottom, left

●​ Values can be in px, %, em, etc.

Z-Index and Stacking Context

The z-index property controls which elements appear in front of others

.element {

​ ​ z-index: 10;

●​ Higher values appear on top.

●​ Only works on elements with position set to anything other than static.

Ayan Chatterjee
Dept: Multimedia
Brainware University, Kolkata ​ ​ 9
BACHELOR OF SCIENCE (HONOURS) IN ANIMATION & MULTIMEDIA – 2024 / 2nd Sem
BAM27202(T) - Responsive Web Design
Section - A/B/C
2024-25​
​
Common Use Cases
Position​ ​ ​ Use Case Example
relative​ ​ ​ Nudging elements slightly

absolute​ ​ ​ Dropdowns, modals, tooltips

fixed​ ​ ​ ​ Sticky headers, floating buttons

sticky​​ ​ ​ Section headers in scrolling views

Ayan Chatterjee
Dept: Multimedia
Brainware University, Kolkata ​ ​ 10