3.1 Flexbox
Creating flexible layouts using Flexbox and Grid is a key technique in modern responsive web design. These technologies make it easy to control the positioning of elements on the page, ensuring they adapt to different screen sizes and devices.
Flexbox (Flexible Box Layout Module) is intended for one-dimensional layout of elements (either by row or by column). Flexbox simplifies the creation of flexible and responsive layouts.
Main Flexbox Concepts:
- Flex Container: an element to which the
display: flexproperty is applied - Flex Items: child elements of a flex container located within it
Flexbox Properties
Flex Container:
display: flex: defines an element as a flex containerflex-direction: sets the direction of the flex items (row,column,row-reverse,column-reverse)justify-content: controls alignment of flex items along the main axis (flex-start,flex-end,center,space-between,space-around)align-items: controls alignment of flex items along the cross axis (stretch,flex-start,flex-end,center,baseline)
Flex Items:
flex-grow: defines the ability of an item to grow when there is extra spaceflex-shrink: defines the ability of an item to shrink when there is a lack of spaceflex-basis: sets the initial size of an item before space distributionalign-self: overrides the alignment of an item along the cross axis set inalign-items
Example Using Flexbox
Let's create a layout with three columns that adapts to different screen sizes:
<!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>
.flex-container {
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
}
.flex-item {
flex: 1 1 200px;
margin: 10px;
padding: 20px;
background-color: #f4f4f4;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Column 1</div>
<div class="flex-item">Column 2</div>
<div class="flex-item">Column 3</div>
</div>
</body>
</html>
Code Explanation:
-
.flex-container: defines the container as a flex container, aligns items with equal spacing between them, and allows items to wrap to the next line when space is limited -
.flex-item: flex items that occupy equal space, have a minimum width of 200px, and are evenly distributed within the container
3.2 CSS Grid
CSS Grid Layout is a two-dimensional layout system that allows you to create complex layouts using rows and columns.
Main CSS Grid Concepts:
- Grid Container: an element to which the
display: gridproperty is applied - Grid Items: child elements of a grid container located in the grid
CSS Grid Properties
Grid Container:
display: grid: defines an element as a grid containergrid-template-columns: sets the number and sizes of columns in the gridgrid-template-rows: sets the number and sizes of rows in the gridgap: controls the spacing between rows and columnsjustify-items: controls the horizontal alignment of grid itemsalign-items: controls the vertical alignment of grid items
grid-column: defines how many columns an item will spangrid-row: defines how many rows an item will spanjustify-self: overrides the horizontal alignment of an itemalign-self: overrides the vertical alignment of an item
Grid Items:
Example Using CSS Grid
Let's create a layout with three columns and two rows that adapts to different screen sizes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
}
.grid-item {
padding: 20px;
background-color: #e4e4e4;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
</body>
</html>
Code Explanation:
.grid-container: defines the container as a grid container with three columns and two rows, each item occupying equal space.grid-item: grid items with consistent padding and background
GO TO FULL VERSION