Examples

CSS Basic Layout

Creating a Basic Page Layout

CSS basic layout uses flexbox for simple, flexible page structure.

Introduction to Flexbox

CSS Flexbox, or the Flexible Box Module, is a powerful layout mechanism that allows you to design complex page structures with ease. It 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. This guide will walk you through the basics of using Flexbox to create simple, flexible layouts.

Setting Up a Flex Container

To begin using Flexbox, you need to define a flex container. This is done by setting the display property of an element to flex or inline-flex. All direct children of this container become flex items.

Flexbox Properties

Flexbox provides several properties to control the layout of the flex items. Here are some of the most common:

flex-direction: Defines the direction flex items are placed in the flex container. Values can be row, row-reverse, column, or column-reverse.
justify-content: Aligns flex items along the main axis. Common values include flex-start, flex-end, center, space-between, and space-around.
align-items: Aligns flex items along the cross axis. Options include stretch, flex-start, flex-end, and center.

Example: Creating a Simple Layout

Let's see an example of how to create a basic layout using Flexbox. We'll create a simple three-column layout:

Conclusion

Flexbox is a versatile tool for creating layouts in CSS. It simplifies the process of aligning and distributing space among items, making it an essential part of modern web design. By mastering these basic concepts, you can start building more complex and responsive layouts.

Examples

Previous: Masking
Next: Responsive Navbar