Scribd
Upload
21 views

FlexBox Model - CSS Lab-2

The document introduces flexbox, explaining that it is a one-dimensional layout method for arranging items in rows or columns. It defines flex containers as parent elements with display: flex and flex items as their child elements. It describes main axis, cross axis, and properties for flex containers like flex-direction, justify-content, and align-items, as well as properties for flex items like flex-grow, flex-shrink, and align-self.

Uploaded by

Avinash kumar Duseja
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

FlexBox Model - CSS Lab-2

The document introduces flexbox, explaining that it is a one-dimensional layout method for arranging items in rows or columns. It defines flex containers as parent elements with display: flex and flex items as their child elements. It describes main axis, cross axis, and properties for flex containers like flex-direction, justify-content, and align-items, as well as properties for flex items like flex-grow, flex-shrink, and align-self.

Uploaded by

Avinash kumar Duseja
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Swan Coaching Center Web development Course

Introduction to Flexbox
CSS Lab-2
Objectives
• Understanding the flexbox
• Understanding flexbox container and items
• Learn about the properties of flexbox container and flexbox item

Flexbox: One dimensional layout method for arranging items in row or columns.

Main axis

Cross axis

Flex Container: The parent element that holds one or more flex items. To create a flex container, you
set its display property to display: flex.

Flex Items: The child elements inside the flex container are referred to as flex items. Each item can be
arranged and aligned based on the flexbox properties applied to the container.

Main Axis: The primary axis of the flex container along which flex items are laid out. By default, the
main axis runs horizontally from left to right (for flex-direction: row) or vertically from top to bottom (for
flex-direction: column).

Cross Axis: The perpendicular axis to the main axis. It runs vertically (top to bottom) for flex-direction:
row and horizontally (left to right) for flex-direction: column.

Flex Container Properties:


Flex Direction: Determines the layout direction of the flex container. affecting the main axis direction
and the order of flex items. Following are the values which can be set:
• Row
• Row-reverse
• Column
• Column-reverse
Swan Coaching Center Web development Course

Justify Content: Defines how flex items are distributed along the main axis. It controls the alignment of
items when there is extra space available within the flex container.

Align Items: Specifies how flex items are aligned along the cross axis. It defines the alignment of items
in case there's extra space within the flex container on the cross axis.

Flex Wrap: By default, flex items will try to fit in a single line. However, with flex-wrap: wrap; items
can wrap to the next line if the container's width is not enough to fit them.

Flex Item Properties


Flex Grow: Determines how much a flex item can grow relative to other items in the container when
there is extra space available along the main axis.

Flex Shrink: Decides how much a flex item can shrink relative to other items in the container when
there is not enough space along the main axis.

Align Self: Works similarly to align-items, but it is applied to individual flex items, allowing them to
have unique cross-axis alignment within the container.

Perform the following task.


1. Create the navigation bar given below using the flexbox.

2. Create the following output. Set the height of outer container 550px

You might also like