Scribd
Upload
166 views25 pages

102 WDB Flexbox Responsive

Flexbox is a one-dimensional layout method for arranging items in rows or columns. It allows dynamic distribution of space across elements of unknown sizes. Key properties like flex-direction, justify-content, and align-items control the layout. Flexbox addresses common layout frustrations and is supported in modern browsers. Responsive design uses media queries to modify styles based on screen width and device type, allowing a single website to adapt to different devices.

Uploaded by

Aiko Yukimura
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
166 views25 pages

102 WDB Flexbox Responsive

Flexbox is a one-dimensional layout method for arranging items in rows or columns. It allows dynamic distribution of space across elements of unknown sizes. Key properties like flex-direction, justify-content, and align-items control the layout. Flexbox addresses common layout frustrations and is supported in modern browsers. Responsive design uses media queries to modify styles based on screen width and device type, allowing a single website to adapt to different devices.

Uploaded by

Aiko Yukimura
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

INTRODUCTION TO

CSS FLEXBOX
You'll love it!
WHAT IS IT?
Flexbox is a one-dimensional layout
method for laying out items in rows
or columns

IT'S NEW(ISH)
The Basics Flexbox is a recent addition to CSS,
included to address common
layout frustations

WHY 'FLEX'?
Flexbox allows us to distribute
space dynamically across elements
of an unknown size, hence the
term "flex"
The Flex Model

MAIN AXIS

CROSS AXIS
FLEX DIRECTION

flex-direction: row;
FLEX DIRECTION

flex-direction: row-reverse;
FLEX DIRECTION
flex-direction: column;

flex-direction: column-reverse;
FLEX WRAP

flex-wrap: wrap;
JUSTIFY CONTENT

justify-content: flex-start;
JUSTIFY CONTENT

justify-content: flex-end;
JUSTIFY CONTENT

justify-content: center;
JUSTIFY CONTENT

justify-content: space-between;
JUSTIFY CONTENT

justify-content: space-around;
ALIGN ITEMS

align-items: flex-start;
ALIGN ITEMS

align-items: flex-end;
ALIGN ITEMS

align-items: center;
ALIGN ITEMS

align-items: stretch;
ALIGN CONTENT

align-content:space-between;
ALIGN CONTENT

align-content:flex-start;
ALIGN CONTENT

align-content:flex-end;
ALIGN CONTENT

align-content:center;
ALIGN SELF

align-self: flex-end;
FLEX-BASIS
Defines the initial size of an
element before additional space is
distributed.

Flex Sizing FLEX-GROW

Properties Controls the amount of available


space an element should take up.
Accepts a unit-less number value.

FLEX-SHRINK
If items are larger than the
container, they shrink according to
flex-shrink.
THE PROBLEM
As mobile devices and tablets
became widely available,
developers had a problem...how do
we create websites that look good
on all screen sizes?

ONE APPROACH
RESPONSIVE Early on, it was common to create
separate stylesheets for different
devices, or even completely
DESIGN different websites for each size.

what is it & why you should care ENTER RESPONSIVE


These days, we typically create ONE
website and stylesheet that is able
to respond to different device sizes
and features.
NGISED EVISNOPSER OT ORTNI
MEDIA

QUERIES

Media queries allow us to modify our


styles depending on particular
parameters like screen width or
device type.
MEDIA

QUERIES

You might also like