Show List
Tutorials > CSS > CSS Flexbox

CSS Flexbox

CSS Flexbox is a layout module that provides a flexible and efficient way to lay out, align, and distribute space among elements within a container. Flexbox allows elements to be arranged in any direction and adapts to different screen sizes and devices.

Here are some basic examples of using Flexbox:

  1. Aligning items along the main axis: The main axis is the primary direction in which the elements are arranged. By using the justify-content property, you can control the alignment of items along the main axis. For example:
.container {
   display: flex;
   justify-content: center;
}
  1. Aligning items along the cross axis: The cross axis is the axis perpendicular to the main axis. By using the align-items property, you can control the alignment of items along the cross axis. For example:
.container {
   display: flex;
   align-items: center;
}
  1. Wrapping items: By using the flex-wrap property, you can control whether items should wrap or not when they exceed the size of the container. For example:
.container {
   display: flex;
   flex-wrap: wrap;
}
  1. Defining the size of items: By using the flex-basis property, you can control the size of items in the main axis. For example:
.item {
   flex-basis: 200px;
}
  1. Ordering items: By using the order property, you can control the order of items within the container. For example:
.item:first-child {
   order: 2;
}

.item:last-child {
   order: 1;
}
These are just a few examples of using CSS Flexbox. You can use Flexbox in many different ways to achieve a variety of layouts for your web pages.


Next: CSS Grid

    Leave a Comment

  • captcha text