Scribd
Upload
761 views

Css Flexbox

The document discusses CSS Flexbox, including defining a flex container and its properties like flex-direction, flex-wrap, justify-content, and align-items. It also covers flex item properties like order, flex-grow, flex-shrink, and align-self. The document ends with assigning builds of layouts using flexbox like a pricing page, image left with text right, profiles display, and what is offered.

Uploaded by

Ishaan Khandelwal
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
761 views

Css Flexbox

The document discusses CSS Flexbox, including defining a flex container and its properties like flex-direction, flex-wrap, justify-content, and align-items. It also covers flex item properties like order, flex-grow, flex-shrink, and align-self. The document ends with assigning builds of layouts using flexbox like a pricing page, image left with text right, profiles display, and what is offered.

Uploaded by

Ishaan Khandelwal
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

6.

CSS Flexbox

Table of Content
1. CSS Flexbox

2. Mini Project (Resume)

CSS Flexbox
To start using the Flexbox model, you first need to define a flex container.
Two axes of flexbox

CSS Flex Container


The flex container properties are:

flex-direction

6. CSS Flexbox 1
The  flex-direction  property defines in which direction the container wants to
stack the flex items.

row

column

row-reverse

column-reverse

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

wrap

no-wrap

wrap-reverse

flex-flow
The flex-flow property is a shorthand property for setting both the flex-direction
and flex-wrap properties.

justify-content
The justify-content property is used to align the flex items in main-axis

center

flex-start

flex-end

space-around

space-between

align-items

The align-items property is used to align the flex items in cross-axis

center

flex-start

flex-end

6. CSS Flexbox 2
stretch

baseline

align-content
The align-content property is used to align the flex lines.

center

flex-start

flex-end

space-around

space-between

CSS Flex Children


The flex item properties are:

order
The order property specifies the order of the flex items. The order value must
be a number, the default value is 0.

flex-grow

The flex-grow property specifies how much a flex item will grow relative to the
rest of the flex items. The value must be a number, the default value is 0.

flex-shrink
The flex-shrink property specifies how much a flex item will shrink relative to the
rest of the flex items. The value must be a number, the default value is 1.

flex-basis
The flex-basis property specifies the initial length of a flex item.

flex
The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-
basis properties.

align-self

6. CSS Flexbox 3
The align-self property specifies the alignment for the selected item inside the
flexible container.
The align-self property overrides the default alignment set by the container's
align-items property.

Assignments
Build these layouts

1. Pricing page

2. Image left, Text Right

6. CSS Flexbox 4
3. Profiles Display

4. What do we offer

6. CSS Flexbox 5
6. CSS Flexbox 6

You might also like