Scribd
Carica
12 visualizzazioni

CSS Flex

Uses for style

Caricato da

satyampandatt20
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
12 visualizzazioni

CSS Flex

Uses for style

Caricato da

satyampandatt20
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 21

CSS FLEX

CSS Flexbox, short for Flexible Box Layout, offers a streamlined way to design adaptable
and visually appealing layouts. It works primarily in one dimension (row or column) to
intelligently distribute space among elements within a container, resulting in clean alignment
and responsive designs suitable for various screen sizes. Flexbox is perfect for crafting both
smaller components and overall webpage structures.

Features of Flexbox:
 High flexibility

 Arrangement & alignment of items

 Proper spacing

 Order & sequencing of items

 Bootstrap 4 is built on top of the flex layout

Before the Flexbox Model:


 Block: Sections in web pages

 Inline: Text

 Table: Two-dimensional table data

 Positioned: Explicit position of an element

Flexbox Components:
 Flex Container: The parent div containing various divisions.

 Flex Items: The items inside the container div.


Creating a Flexbox:
To create a flexbox, set the display property of the container to flex.

<!DOCTYPE html>
<html>

<head>
<title>Flexbox Tutorial</title>
<style>
.flex-container {
display: flex;
background-color: #32a852;
}

.flex-container div {
background-color: #c9d1cb;
margin: 10px;
padding: 10px;
}
</style>
</head>

<body>
<h2>FEE</h2>
<h4> Flexbox</h4>
<div class="flex-container">
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
</div>
</body>

</html>

Flex Direction Properties:


 Left to Right: flex-direction: row;

 Right to Left: flex-direction: row-reverse;

 Top to Bottom: flex-direction: column;

 Bottom to Top: flex-direction: column-reverse;

Aligning and Justifying Content:


Flexbox provides several properties for aligning and justifying content within the container:

 justify-content: Aligns items along the main axis (e.g., flex-start,


flex-end, center, space-between, space-around).

 align-items: Aligns items along the cross axis (e.g., stretch, center,
flex-start, flex-end).

 align-content: Aligns rows within a flex container when there is


extra space on the cross axis.

Responsive Design with Flexbox:


Flexbox excels in creating responsive designs by adjusting items to fit various screen sizes.
You can use media queries in combination with Flexbox properties to ensure your layout
adapts seamlessly to different devices.

Example of Responsive Flexbox:


<!DOCTYPE html>
<html>
<head>
<title>Responsive Flexbox</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
background-color: #32a852;
}
.flex-container div {
background-color: #c9d1cb;
margin: 10px;
padding: 20px;
flex: 1 1 200px;
}
@media (max-width: 600px) {
.flex-container {
flex-direction: column;
}
}
</style>
</head>
<body>
<h2>Responsive Flexbox</h2>
<div class="flex-container">
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
</div>
</body>
</html>

Output:

Responsive Design with Flexbox

CSS Flexbox is an essential tool for creating flexible and responsive web layouts. Its ability
to distribute space and align items effectively makes it a vital part of modern web design.
Understanding its properties and axes can significantly improve the adaptability and
aesthetics of your web pages.

CSS Flexbox and Its Properties


Last Updated : 13 Jun, 2024




CSS Flexbox, or Flexible Box Layout, is the layout model designed to create flexible and
responsive layout structures without using float or positioning. By applying display: flex to a
parent container, it becomes a flex container, and its children become flex items. This allows
control over the items’ growth, shrinkage, and space distribution.

Note: Not all browsers support the flexbox properties, so make sure that the browser you are
using supports this property.

Basics of Flexbox:
Apply a display type of flexbox to the parent container, this would make all the child
elements in it to adjust into the flex type and these would be called the ” flex items “. This
means they have become more flexible i.e. we can control how much they can shrink and
how much they can grow and also the spacing between these elements.

 Display: flex: Applies flexbox to the parent container, making child


elements flex items.

 Flex Items: Flexible elements that can grow, shrink, and adjust
spacing.
 The flex container can change the width, height and order of the
child elements.

 Items can grow or shrink to fill the available space or to prevent


overflow.

 Available space is distributed among other items.

Axes of Flexbox:
1. Main Axis: Direction of flex items (left-to-right, right-to-left, top-to-bottom, bottom-to-
top).

A) left to right

flex-direction: row

B) right to left

flex-direction: row-reverse

C) top to bottom

flex-direction: column

D) bottom to top
flex-direction: column

2. Cross Axis: Perpendicular to the main axis.

Flexbox Properties:
1. Parent Properties:

 display: Defines a flex container.

 flex-direction: Defines the main axis direction.

 flex-wrap: Allows items to wrap onto multiple lines.

 flex-flow: Shorthand for flex-direction and flex-wrap .

 justify-content: Aligns items along the main axis.

 align-content: Aligns items along the cross axis.

 align-items: Aligns multiple lines of items on the cross axis.

2. Children/Flex-items Properties:

 order: Changes the order of items without altering the source order.

 flex-grow: Allows an item to grow to fill available space.

 flex-shrink: Allows an item to shrink if there’s insufficient space.

 flex-basis: Defines the initial size of an item.

 flex: Shorthand for flex-grow , flex-shrink , and flex-basis .

 align-self: Aligns a single item within the flex container.

Example:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">

<style>
body {
display:flex;
align-items: center;
justify-content: center;
color: green;
font-size: 50;
}
h2 {
margin: 10px;
}
</style>
</head>

<body>
<h2>CSS Flexbox</h2>
<h2>and Its Properties</h2>
</body>
</html>

SS flex Property
Last Updated : 26 Aug, 2024



The CSS flex property allows setting the length of flexible items. This shorthand property
combines the flex-grow, flex-shrink, and flex-basis properties, making it more responsive and
mobile-friendly. It simplifies the positioning of child elements within the main container,
ensuring margins do not collapse with content margins. Additionally, it allows changing the
order of elements without modifying the HTML structure.

Syntax
/* flex: grow shrink basis|auto|initial|inherit; */
flex: 1 0 auto;

Property Values
Propert
Description
y

flex- A number specifying how much an item will grow relative to the
grow rest of the flexible items.

flex- A number specifying how much an item will shrink relative to the
shrink rest of the flexible items.

flex- Sets the initial main size of a flex item. Can be auto, inherit, or a
basis length value (e.g., 50%).
Propert
Description
y

flex- Controls whether flex items are forced onto a single line or can
wrap be wrapped onto multiple lines.

Example 1: Single Value Representation

In this example the CSS flex property creates a flexible container with equal-width items,
adjusting their sizes dynamically based on available space within a defined container.

<!DOCTYPE html>
<html>

<head>
<title> CSS flex Property </title>
<style>
#FEE {
width: 300px;
height: 200px;
border: 1px solid black;
display: flex;
}

#FEE div {
flex: 1;
}

.FEE1 {
background-color: green;
}

.FEE2 {
background-color: lightgreen;
}

.FEE3 {
background-color: darkgreen;
}
</style>
</head>

<body>
<h2>CSS flex Property</h2>
<div id="FEE">
<div class="FEE1">
GeeksforGeeks
</div>
<div class="FEE2">
Lite Content
</div>
<div class="FEE3">
Special Content
</div>
</div>
</body>
Example 2: Using flex-grow, flex-shrink, and flex-basis

This example describes the flex property with the help of the 3 values that represents the
flex-grow, flex-shrink & flex-basis properties.

<!DOCTYPE html>
<html>

<head>
<title> CSS flex Property </title>
<style>
#Geeks {
width: 300px;
height: 200px;
border: 1px solid black;
display: flex;
}

#Geeks div {
flex: 1 0 auto;
}

.GFG1 {
background-color: green;
}

.GFG2 {
background-color: lightgreen;
}

.GFG3 {
background-color: darkgreen;
}
</style>
</head>

<body>
<h2>CSS flex Property</h2>
<div id="Geeks">
<div class="GFG1">
GeeksforGeeks
</div>
<div class="GFG2">
Lite Content
</div>
<div class="GFG3">
Special Content
</div>
</div>
</body>

</html>
CSS flex-grow PropertyThe CSS flex-grow property
specifies how much the item will grow relative to the
rest of the flexible items inside the same container. It is
essential for responsive design, allowing elements to
expand based on available space, and ensuring a
dynamic and adaptable layout.
Note: If the item in the container is not flexible then the flex-grow property will not affect
that item.

Syntax
flex-grow: number| initial| inherit;

Default Value: 0

Property values
Property Value Description
A number that defines how the item will grow compared to other flexible
number
items.
initial It sets the value to its default value.
inherit It inherits the property from its parent elements.
Example 1: Basic Usage of flex-grow

In this example, we have a container with five div elements. The second div has a flex-grow
value of 2, which means it will grow twice as much as the other div elements.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Flex Grow Example</title>
<style>
.container {
display: flex;
width: 100%;
background-color: lightgray;
}

.container div {
background-color: cornflowerblue;
margin: 10px;
padding: 20px;
text-align: center;
color: white;
}
.grow {
flex-grow: 2;
}
</style>
</head>

<body>
<h2>CSS flex grow</h2>
<div class="container">
<div>1</div>
<div class="grow">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>

</html>

Example 2: Multiple Elements with Different flex-grow Values

This example demonstrates multiple div elements with different flex-grow values to show
how they grow relative to each other.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Flex Grow Multiple Values</title>
<style>
.container {
display: flex;
width: 100%;
background-color: lightgray;
}

.container div {
background-color: cornflowerblue;
margin: 10px;
padding: 20px;
text-align: center;
color: white;
}

.grow1 {
flex-grow: 1;
}

.grow2 {
flex-grow: 2;
}

.grow3 {
flex-grow: 3;
}
</style>
</head>

<body>
<h2>CSS flex grow</h2>
<div class="container">
<div class="grow1">1</div>
<div class="grow2">2</div>
<div class="grow3">3</div>
</div>
</body>

</html>

CSS flex-shrink Property




The CSS flex-shrink property specifies how the item will shrink relative to the remaining
flexible items inside the same container. It is essential for responsive design, allowing
elements to reduce their size based on available space. This property does not affect non-
flexible items.

Note: If the item in the container is not flexible then the flex-shrink property will not affect
that item.

Syntax
flex-shrink: number | initial | inherit;

Default Value: 1

Property values
Property Value Description
A number that defines how the item will shrink compared to other flexible
number
items.
initial It sets the value to its default value.
inherit It inherits the property from its parent elements.
Example: Basic Usage of flex-shrink

In this example, we demonstrate the flex-shrink property in a flex container with five div
elements, each styled to illustrate different aspects of flex-shrink behavior, such as default,
initial, and inherited values.

<!DOCTYPE html>
<html>

<head>
<title>
CSS flex-shrink Property
</title>
<style>
#main {
width: 450px;
height: 200px;
border: 1px solid black;
display: -webkit-flex;
display: flex;
color: white;
}

h1 {
color: #009900;
font-size: 42px;
margin-left: 50px;
}

h3 {
margin-top: -20px;
margin-left: 50px;
}

#main div {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
}

/* shrinking the 2nd div compare to others */


#main div:nth-of-type(2) {
flex-shrink: 4;
}
</style>
</head>

<body>
<h1>GeeksforGeeks</h1>

<h3>The flex-shrink:number</h3>

<!-- Making 5 divs in main -->


<div id="main">
<div style="background-color:#009900;">
<p>
A number specifying how much the item
will shrink relative to the rest of the
flexible items.
</p>
</div>

<div style="background-color:#00cc99;">
<p> Default value is 1</p>
</div>

<div style="background-color:#0066ff;">
<p>
Initial Sets this property to
its default value
</p>
</div>

<div style="background-color:#66ffff;;"></div>

<div style="background-color:#660066;">
<p>
Inherits this property from
its parent element
</p>
</div>
</div>
</body>

</html>

The CSS flex-shrink property specifies how the item will shrink relative to the remaining
flexible items inside the same container. It is essential for responsive design, allowing
elements to reduce their size based on available space. This property does not affect non-
flexible items.

Note: If the item in the container is not flexible then the flex-shrink property will not affect
that item.

Syntax
flex-shrink: number | initial | inherit;

Default Value: 1

Property values
Property Value Description
A number that defines how the item will shrink compared to other flexible
number
items.
initial It sets the value to its default value.
inherit It inherits the property from its parent elements.
Example: Basic Usage of flex-shrink

In this example, we demonstrate the flex-shrink property in a flex container with five div
elements, each styled to illustrate different aspects of flex-shrink behavior, such as default,
initial, and inherited values.

<!DOCTYPE html>
<html>

<head>
<title>
CSS flex-shrink Property
</title>
<style>
#main {
width: 450px;
height: 200px;
border: 1px solid black;
display: -webkit-flex;
display: flex;
color: white;
}

h1 {
color: #009900;
font-size: 42px;
margin-left: 50px;
}

h3 {
margin-top: -20px;
margin-left: 50px;
}

#main div {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
}

/* shrinking the 2nd div compare to others */


#main div:nth-of-type(2) {
flex-shrink: 4;
}
</style>
</head>

<body>
<h1>GeeksforGeeks</h1>

<h3>The flex-shrink:number</h3>

<!-- Making 5 divs in main -->


<div id="main">
<div style="background-color:#009900;">
<p>
A number specifying how much the item
will shrink relative to the rest of the
flexible items.
</p>
</div>

<div style="background-color:#00cc99;">
<p> Default value is 1</p>
</div>

<div style="background-color:#0066ff;">
<p>
Initial Sets this property to
its default value
</p>
</div>
<div style="background-color:#66ffff;;"></div>

<div style="background-color:#660066;">
<p>
Inherits this property from
its parent element
</p>
</div>
</div>
</body>

</html>

CSS flex-basis Property

The flex-basis property in CSS is used to specify the initial size of the flexible item. The flex
property is not used if the element is not flexible item.

Syntax:

flex-basis: number | auto | initial | inherit;

Default Value:

 auto

Property Values:
Property
Description
Value
number It is a length unit that define the initial length of that item.
It is the default value, if the length is not specified the length will be
auto
according to it’s content.
initial It sets the property to it’s default value.
inherit It specifies that a property should inherit its value from its parent element.

Different Examples of CSS Flex Basis Property


Example 1: In this example, we are using the CSS flex basis property.

<!DOCTYPE html>
<html>

<head>
<style>
.Geeks {
width: 385px;
height: 70px;
display: flex;
}

.Geeks div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 80px;

/* For Safari 6.1 and above browsers */


-webkit-flex-grow: 0;
-webkit-flex-shrink: 0;
-webkit-flex-basis: 80px;
}

.Geeks div:nth-of-type(2) {
flex-basis: 50%;
}
.Geeks div:nth-of-type(3) {
flex-basis: auto;
}
.Geeks div:nth-of-type(4) {
flex-basis: initial;
}
.Geeks div:nth-of-type(5) {
flex-basis: inherit;
}
</style>
</head>

<body>
<center>

<h1>
The flex-basis Property
</h1>

<div class = "Geeks">

<div style = "background-color:green;">


number 80px
</div>

<div style = "background-color:lightgreen;">


percentage
</div>

<div style = "background-color:green;">


auto
</div>

<div style = "background-color:lightgreen;">


initial
</div>

<div style = "background-color:green;">


inherit
</div>
</div>

</center>
</body>

</html>
CSS flex-wrap property
The CSS flex-wrap property is used to specify whether flex items are forced into a single
line or wrapped onto multiple lines. The flex-wrap property allows enabling the control
direction in which lines are stacked. It is used to designate a single line or multi-line format to
flex items inside the flex container.

Syntax:

flex-wrap: nowrap | wrap | wrap-reverse | initial;

Default Value: nowrap

1. Using CSS flex-wrap: wrap Property

wrap: This property is used to break the flex item into multiples lines. It makes flex items
wrap to multiple lines according to flex item width.

Syntax:

flex-wrap: wrap;

Example: In this example, we are using the CSS flex wrap property.

<!DOCTYPE html>
<html>

<head>
<title>flex-wrap property</title>
<style>
#main {
width: 400px;
height: 300px;
border: 5px solid black;
display: flex;
flex-wrap: wrap;
}

#main div {
width: 100px;
height: 50px;
}
h1 {
color:#009900;
font-size:42px;
margin-left:50px;
}
h3 {
margin-top:-20px;
margin-left:50px;
}
</style>
</head>

<body>
<h1>GeeksforGeeks</h1>
<h3>The flex-wrap:wrap property</h3>
<div id="main">
<div style="background-color:#009900;">1</div>
<div style="background-color:#00cc99;">2</div>
<div style="background-color:#0066ff;">3</div>
<div style="background-color:#66ffff;">4</div>
<div style="background-color:#660066;">5</div>
<div style="background-color:#663300;">6</div>
</div>
</body>

</html>

Potrebbero piacerti anche