| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
Flexbox Overview
Flexbox is a CSS layout module designed to make it easier to design flexible responsive layout structures. It allows you to align and distribute space among items in a container, even when their size is unknown or dynamic.
Flex Container
A flex container is an element that holds flex items and defines the context for flex layout. To create a flex container, you set the ‘display‘ property to ‘flex‘ or ‘inline-flex‘.
Properties of Flex Container
display:
display: flex;creates a block-level flex container.display: inline-flex;creates an inline-level flex container.
flex-direction: Defines the direction of the main axis.
row(default): Items are placed horizontally.row-reverse: Items are placed horizontally in reverse order.column: Items are placed vertically.column-reverse: Items are placed vertically in reverse order.
flex-wrap: Defines whether the flex items should wrap or not.
nowrap(default): All items will be on one line.wrap: Items will wrap onto multiple lines.wrap-reverse: Items will wrap onto multiple lines in reverse order.
justify-content: Aligns items along the main axis.
flex-start(default): Items are packed toward the start of the flex container.flex-end: Items are packed toward the end of the flex container.center: Items are centered along the main axis.space-between: Items are evenly distributed; the first item is at the start, the last item is at the end.space-around: Items are evenly distributed with space around them.space-evenly: Items are evenly distributed with equal space between them.
align-items: Aligns items along the cross axis.
stretch(default): Items stretch to fill the container.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.
align-content: Aligns the flex lines when there is extra space in the cross axis.
stretch(default): Lines stretch to use the remaining space.flex-start: Lines are packed toward the start of the flex container.flex-end: Lines are packed toward the end of the flex container.center: Lines are centered.space-between: Lines are evenly distributed.space-around: Lines are evenly distributed with space around them.
Flex Items
Flex items are the direct children of a flex container. They can be manipulated independently of each other.
Properties of Flex Items
order: Defines the order of the flex items. Default is 0. Items with a lower order value will appear first.
flex-grow: Defines the ability for a flex item to grow if necessary. Default is 0.
flex-grow: 1;allows the item to grow to fill the container.
flex-shrink: Defines the ability for a flex item to shrink if necessary. Default is 1.
flex-shrink: 0;prevents the item from shrinking.
flex-basis: Defines the default size of an element before the remaining space is distributed. Can be a length value or
auto.align-self: Allows the default alignment (or the one specified by
align-items) to be overridden for individual flex items.auto(default): Inherits thealign-itemsvalue from the parent.flex-start: Aligns the item at the start of the cross axis.flex-end: Aligns the item at the end of the cross axis.center: Centers the item along the cross axis.baseline: Aligns the item such that its baseline aligns with the baseline of the parent.stretch: Stretches the item to fill the container.
Examples
Basic Flexbox Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example</title>
<style>
.container {
display: flex;
justify-content: space-around;
align-items: center;
height: 100vh;
}
.item {
background: lightblue;
padding: 20px;
margin: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
Flex Direction and Wrapping
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Direction and Wrap</title>
<style>
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 200px;
border: 2px solid #000;
}
.item {
background: lightgreen;
padding: 20px;
margin: 10px;
border: 1px solid #ccc;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
</div>
</body>
</html>
Aligning Items Individually
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Align Self Example</title>
<style>
.container {
display: flex;
height: 100vh;
justify-content: center;
align-items: stretch;
border: 2px solid #000;
}
.item {
background: lightcoral;
padding: 20px;
margin: 10px;
border: 1px solid #ccc;
}
.item:nth-child(1) {
align-self: flex-start;
}
.item:nth-child(2) {
align-self: center;
}
.item:nth-child(3) {
align-self: flex-end;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
These examples illustrate the basic use of flexbox properties to create flexible and responsive layouts. Flexbox simplifies the process of aligning and distributing space among items in a container, making it a powerful tool for modern web design.
