Scribd
Upload
289 views6 pages

211 Css Flexbox Slides

Flexbox is a modern way to lay out elements on web pages. It consists of a flex container, which elements are placed into using display: flex. The flex container controls flex items within it using properties like flex-direction to define the main and cross axes, and justify-content and align-items to position flex items along those axes. Flex items can also be controlled directly with properties like order, flex-grow, and align-self.

Uploaded by

abbasiash
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
289 views6 pages

211 Css Flexbox Slides

Flexbox is a modern way to lay out elements on web pages. It consists of a flex container, which elements are placed into using display: flex. The flex container controls flex items within it using properties like flex-direction to define the main and cross axes, and justify-content and align-items to position flex items along those axes. Flex items can also be controlled directly with properties like order, flex-grow, and align-self.

Uploaded by

abbasiash
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/ 6

Working with Flexbox

The modern way to change the way


our elements are displayed
Understanding Flexbox

Property Property

display: flex;

flex-flow:
Parent Children
= =
Flex Container Flex Items
justify-content: order:

align-content: flex:

align-items: align-self:
Main Axis vs. Cross Axis

main main

flex-direction: flex-direction:
row; row-reverse;
cross cross

cross

main
flex-direction: flex-direction:
column; column-reverse;
main

cross
Align Items and Justify Content

flex-direction: row flex-direction: column

main cross

cross justify-content main align-items

align-items justify-content
Understanding Flexbox

Property Property

display: flex;

flex-flow:
Parent Children
= =
Flex Container Flex Items
justify-content: order:

align-content: flex:

align-items: align-self:
Summary

Flexbox Flex Container Flex Container - Properties


• Changes the way elements • Adding display: flex to display: (inline-)flex
are displayed on a website an element will turn it into a flex-direction
• Flexbox consists of the Flex-Container flex-wrap
Flex-Container and Flex- flex-flow (shorthand)
Items align-items
Flex Items
justify-content
Main Axis vs Cross Axis • All elements/children of the align-content
Flex-Container will become
• flex-direction defines Flex Items - Properties
Flex-Items
main axis
• Behaviour can be changed order
• Properties refer to main or
by properties applied to the align-self
cross axis
Flex-Container and applied flex-grow
• Behaviour of Flex-Items
to individual Flex-Items flex-shrink
changes depending on
flex-direction flex-basis
flex (shorthand)

You might also like