Scribd
Upload
22 views

Css Flexbox Part1

Uploaded by

royalcommunity43
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
22 views

Css Flexbox Part1

Uploaded by

royalcommunity43
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

Css Flexbox

The display: flex property in CSS is used to create a flex container, which
allows you to use the powerful flexbox layout system. Flexbox provides a
more efficient way to lay out, align, and distribute space among items in a
container, even when their size is unknown or dynamic. It helps solve
common layout problems such as aligning items vertically, distributing
space among items, and making the layout responsive.

Basic Usage
To use flexbox, you need to set the display property of a container
element to flex:
This makes the container a flex container and its direct children flex items.

Lets Understand With Example


This makes the container a flex container and its direct children flex items.

HTML CODE

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
CSS CODE

.parent{

border: 2px solid black;

disply: flex:

.child{

height: 90px;

width: 90px;

background-color: rgb(255, 191, 0);

border:2px solid black ;

margin: 4px;

Before display Flex property

After We Are Apply Flex Property on parent container


Code

Explanation of the Example


Container:
display: flex; makes the .container a flex parent.

justify-content
property is part of the CSS Flexible Box Layout Module,
commonly known as Flexbox. This property is used to
align flex items along the main axis of the flex
containerKey Points of justify-content
Main Axis Alignment: The justify-content property aligns
flex items along the main axis (which can be horizontal
or vertical based on flex-direction).
Distribution of Extra Space: It helps distribute any extra
free space that remains after all flex items have been
sized and placed. This can occur when the items are
inflexible (fixed size) or flexible but have reached their
maximum size.

Lets Understand with Example


Before applying on parent justify content center
(Display : flex also mention on parent)
After applying on parent justify content center
(Display : flex also mention on parent)

Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
.parent{
border: 2px solid black;
display: flex;
justify-content: center;

}
.child{

height: 90px;
width: 90px;
background-color: rgb(255,
191, 0);
border:2px solid black ;
margin: 4px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>

o/p

Try remove justify – content center property


Explain Algin item property :
1. align-items Property
The align-items property defines how flex items are
aligned along the cross axis of the flex container. The
cross axis is perpendicular to the main axis, which is
determined by the flex-direction property.

Values for align-items:


flex-start: Items are aligned at the start of the cross
axis.
flex-end: Items are aligned at the end of the cross axis.
center: Items are centered along the cross axis.
baseline: Items are aligned such that their baselines
align.
stretch: Items stretch to fill the container along the
cross axis (default).

Try yourself
After Applying Align item center o/p

Code
.parent{
border: 2px solid black;
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
width: 90vw;

}
.child{

height: 90px;
width: 90px;
background-color: rgb(255,
191, 0);
border:2px solid black ;
margin: 4px;
}

Flex Direction (try your self)


he flex-direction property in CSS is used within a flex
container to determine the direction in which its flex
items are laid out along the main axis. It essentially
controls the flow of items within the container. Let's
explore how flex-direction works with simple examples.

Understanding flex-direction
The flex-direction property specifies the direction in
which flex items are placed inside the flex container. It
can have one of four values:

row: Default value. Items are placed in the same


direction as the text direction (left to right in LTR
languages).
row-reverse: Items are placed in the opposite direction
of the text direction (right to left in LTR languages).
column: Items are placed vertically, top to bottom.
column-reverse: Items are placed vertically, bottom to
top.

You might also like