The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Creating Layouts with Flexbox

Next ►
►

In this lesson, we will delve into creating layouts using Flexbox. Flexbox is a powerful layout module that allows you to design complex layouts with ease. By the end of this lesson, you will be able to create flexible and responsive layouts using Flexbox properties.

Key Concepts

  1. Flex Container: The parent element that holds the flex items.
  2. Flex Items: The child elements inside the flex container.
  3. Main Axis and Cross Axis: The main axis is the primary axis along which flex items are laid out, and the cross axis is perpendicular to the main axis.
  4. Flex Properties: Properties that can be applied to the flex container and flex items to control the layout.

Flex Container Properties

Display Flex

To create a flex container, you need to set the display property to flex or inline-flex.

.container {
  display: flex;
}

Flex Direction

The flex-direction property defines the direction in which the flex items are placed in the flex container.

.container {
  display: flex;
  flex-direction: row; /* row, row-reverse, column, column-reverse */
}

Justify Content

The justify-content property aligns the flex items along the main axis.

.container {
  display: flex;
  justify-content: center; /* flex-start, flex-end, center, space-between, space-around, space-evenly */
}

Align Items

The align-items property aligns the flex items along the cross axis.

.container {
  display: flex;
  align-items: center; /* flex-start, flex-end, center, baseline, stretch */
}

Align Content

The align-content property aligns the flex lines when there is extra space in the cross axis.

.container {
  display: flex;
  align-content: center; /* flex-start, flex-end, center, space-between, space-around, stretch */
}

Flex Item Properties

Order

The order property controls the order in which the flex items appear in the flex container.

.item {
  order: 1; /* default is 0 */
}

Flex Grow

The flex-grow property defines the ability of a flex item to grow if necessary.

.item {
  flex-grow: 1; /* default is 0 */
}

Flex Shrink

The flex-shrink property defines the ability of a flex item to shrink if necessary.

.item {
  flex-shrink: 1; /* default is 1 */
}

Flex Basis

The flex-basis property defines the initial size of a flex item before any space distribution.

.item {
  flex-basis: 100px; /* default is auto */
}

Align Self

The align-self property allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.

.item {
  align-self: center; /* auto, flex-start, flex-end, center, baseline, stretch */
}

Practical Example

Let's create a simple layout using Flexbox. We'll create a header, main content area, and a footer.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Layout</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <header class="header">Header</header>
    <main class="main">Main Content</main>
    <footer class="footer">Footer</footer>
  </div>
</body>
</html>

CSS

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header, .footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 20px;
}

.main {
  background-color: #f4f4f4;
  flex-grow: 1;
  padding: 20px;
}

Explanation

  1. HTML Structure: We have a container with three child elements: header, main, and footer.
  2. CSS Styling:
    • The container is set to display: flex and flex-direction: column to stack the child elements vertically.
    • The header and footer have fixed heights and background colors.
    • The main content area uses flex-grow: 1 to take up the remaining space.

Exercises

Exercise 1: Two-Column Layout

Create a two-column layout with a sidebar and main content area.

HTML

<div class="container">
  <aside class="sidebar">Sidebar</aside>
  <main class="main">Main Content</main>
</div>

CSS

.container {
  display: flex;
}

.sidebar {
  background-color: #333;
  color: white;
  width: 200px;
  padding: 20px;
}

.main {
  background-color: #f4f4f4;
  flex-grow: 1;
  padding: 20px;
}

Exercise 2: Responsive Navbar

Create a responsive navbar that changes layout based on screen size.

HTML

<nav class="navbar">
  <div class="logo">Logo</div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: white;
  padding: 10px 20px;
}

.nav-links {
  display: flex;
  list-style: none;
}

.nav-links li {
  margin-left: 20px;
}

.nav-links a {
  color: white;
  text-decoration: none;
}

/* Responsive Design */
@media (max-width: 600px) {
  .navbar {
    flex-direction: column;
  }

  .nav-links {
    flex-direction: column;
    align-items: center;
  }

  .nav-links li {
    margin: 10px 0;
  }
}

Conclusion

In this lesson, we explored how to create layouts using Flexbox. We covered the key properties of flex containers and flex items, and we applied these properties in practical examples. Flexbox is a versatile tool that simplifies the process of creating responsive and flexible layouts. In the next module, we will dive into CSS Grid, another powerful layout system.

◄ Previous
◄
Next ►
►

CSS Mastery: From Beginner to Advanced

Module 1: Introduction to CSS

Module 2: Text and Font Styling

Module 3: Box Model and Layout

Module 4: Positioning and Floating

Module 5: Flexbox

Module 6: CSS Grid

Module 7: Advanced CSS Techniques

Module 8: Responsive Design

Module 9: Preprocessors and Frameworks

Module 10: Best Practices and Optimization

Module 11: Project: Building a Responsive Website

The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved