Skip to main content

Basics of Flex

The display: flex; value in CSS is used to enable the flexible box layout model, commonly known as Flexbox. Flexbox is a layout model that allows you to design complex layout structures with a more predictable and straightforward way than traditional models, especially when dealing with different screen sizes and dynamic content.

Characteristics​

  1. Flex Container: Setting an element's display property to flex makes it a flex container. Its children automatically become flex items.

  2. Direction Control: Flexbox allows you to control the direction in which flex items are laid out via the flex-direction property (row, row-reverse, column, column-reverse).

  3. Alignment and Justification: Flexbox provides properties like justify-content, align-items, and align-self to control how items are aligned both along the main axis and the cross axis.

  4. Ordering: The order property allows you to control the order in which flex items appear within the flex container, independent of their order in the DOM.

  5. Flexibility: The flex property controls how a flex item grows and shrinks relative to other flex items in the container.

  6. Wrapping: The flex-wrap property controls whether flex items are forced into a single line or can be wrapped onto multiple lines.

Example-I: Basic Usage​

HTML:

<div class="flex-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

CSS:

.flex-container {
  display: flex;
}

Example-II: Flex Direction and Wrapping​

CSS:

.flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

Example-III: Alignment and Justification​

CSS:

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Example-IV: Ordering and Flexibility​

CSS:

.flex-item {
  order: 1;
  flex: 1;
}

Best Practices​

  1. Use for Component Layout: Flexbox is excellent for laying out small-scale layouts like navigation bars, sidebars, and individual components.

  2. Fallbacks: Provide fallbacks for browsers that do not support Flexbox.

  3. Avoid Fixed Dimensions: Whenever possible, use flex properties instead of fixed dimensions to make your layout more flexible.

  4. Semantic Markup: Use Flexbox with semantic HTML elements when appropriate for better readability and accessibility.

  5. Debugging Tools: Modern browsers offer excellent debugging tools for Flexbox, making it easier to troubleshoot layout issues.

Understanding display: flex; and the Flexbox layout model can significantly improve your ability to create responsive, maintainable, and scalable layouts.