Scribd
Upload
8 views8 pages

Introduction To Flexbox

Flexbox, or the Flexible Box Layout module, is a one-dimensional layout method for arranging items in rows or columns, allowing for horizontal and vertical alignment and responsive designs. Key CSS properties for flex containers include flex-direction, flex-wrap, justify-content, align-items, and align-content, while flex items utilize properties such as order, flex-grow, flex-shrink, and align-self. This layout system simplifies the distribution of space within a container without relying on floats or positioning hacks.

Uploaded by

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

Introduction To Flexbox

Flexbox, or the Flexible Box Layout module, is a one-dimensional layout method for arranging items in rows or columns, allowing for horizontal and vertical alignment and responsive designs. Key CSS properties for flex containers include flex-direction, flex-wrap, justify-content, align-items, and align-content, while flex items utilize properties such as order, flex-grow, flex-shrink, and align-self. This layout system simplifies the distribution of space within a container without relying on floats or positioning hacks.

Uploaded by

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

Introduction to Flexbox

Definition:
• Flexbox is short for the Flexible Box Layout module.
• Flexbox is a layout method for arranging items in rows or columns.
• It is used for one-dimensional layout

Use of Flexbox:
• Align items horizontally or vertically
• Distribute space within a container
• Create responsive designs without floats or positioning hacks
A flex container with three flex items
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

The CSS properties we use for the flex container are:


• flex-direction
• flex-wrap
• justify-content
• align-items
• align-content
Flex-direction
The flex-direction property specifies the display-direction of flex items in
the flex container.
The flex-direction property can have one of the following values:

•row
•column
•row-reverse
•column-reverse
Flex-wrap
The flex-wrap property specifies whether the flex items should wrap or not.
The flex-wrap property can have one of the following values:

•nowrap
•wrap
•wrap-reverse
Justify-content
The justify-content property is used to align the flex items when
they do not use all available space on the main-axis (horizontally).
The justify-content property can have one of the following values:

•center
•flex-start
•flex-end
•space-around
•space-between
•space-evenly
Align-items
The align-items property is used to align the flex items when they do not use all
available space on the cross-axis (vertically).
The align-items property can have one of the following values:

•center
•flex-start
•flex-end
•stretch
•baseline
•normal
Align-content
The align-content property is used to align the flex lines.
The align-content property can have one of the following values:

•center
•stretch
•flex-start
•flex-end
•space-around
•space-between
•space-evenly
CSS Flex Items
The direct child elements of a flex container automatically becomes flex items.
The CSS properties we use for flex items are:

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

You might also like