A Beginner's Guide to CSS Flexbox: A List of Properties and Practical Examples

CSS’sflexis a fundamental layout technique used to arrange elements side-by-side or vertically.div、ul、li、spanIt allows you to group elements like these while maintaining spacing and positioning, making it ideal for headers, navigation menus, card lists, and form layouts. In this article,display: flex; we’ll explain everything from the basicsjustify-content、align-items、flex-direction、flex-wrap、flex in the order they are most commonly used in real-world projects.

CSS Flex Basics

Flexbox works by specifyingdisplay: flex;, causing its child elements to align as flex items. The layout is based on the horizontal main axis and the vertical cross axis. To minimize configuration errors, start by separating the considerations of “which axis to align along” and “which position to align to.”

There was a time whendisplay: -webkit-box;, but in current practice,display: flex;is sufficient. It is more important to first learn how to use standard Flexbox correctly.

The Relationship Between Containers and Items

In Flexbox, the parent element is the container, and the child elements are the items. For examplewrapperinsidedivorli, the container determines the direction and positioning, while the items adjust their sizing and order. Thinking of these roles separately makes it easier to see which properties should be applied to which element.

Properties for the Container to Learn First

• `flex-direction` determines the direction of the layout.row、row-reverse、column、column-reverse Use them appropriately.
• `justify-content` determines the positioning along the main axis. It is used for left-aligned, centered, right-aligned, and evenly spaced layouts.
• align-items determines how items are aligned along the cross axis. It is useful when you want to align the heights of items or position them vertically centered.
• flex-wrap controls line breaks. In lists with many elements,wrap specifying this helps prevent layout breaks.
• align-content determines how the entire row is aligned when multiple rows are present. It has no effect when there is only one row.
• flex-flow flex-direction and flex-wrap .

Display Example: Direction and Wrapping

First, take a look at how the colored boxes are actually arranged.flex-direction and flex-wrap so you can see the difference at a glance.

If you just want to create a side-by-side layoutjustify-contentandalign-itemsis sufficient, but for a list with line breaks,flex-wrapandalign-content. Deciding in advance whether the layout is based on a single line or multiple lines makes it easier to organize the settings.

Display Example: Alignment and Center Alignment

justify-content and align-items can significantly change the visual impression. Arranging commonly used layouts in colored boxes makes the differences easier to understand.

Properties used on the item

• order changes the order of the items. Use this when you only want to swap their visual order.
• flex-grow determines how the remaining space is distributed.
• flex-shrink determines how items shrink when there isn’t enough space.
• flex-basis sets the baseline width for expansion and contraction.
• flex is flex-grow、flex-shrink、flex-basis is a shorthand property that specifies all of these together.
• align-self is used when you want to change the vertical position of specific items.

Example: Stretching and Order

flex Values for and order directly affect the visual width and order. Since differences in numerical values are directly reflected in the display, it’s easier to understand by looking at actual examples.

flex: 1; is convenient, but if you rely on it for everything, the layout may shrink in unintended ways. In particular, for elements containing long text,min-width: 0;, the layout may overflow because the element doesn’t shrink as much as expected.flex-basis Understanding the difference in the roles ofand width will make adjustments easier.

.container {
  display: flex;
  gap: 16px;
}
.item {
  flex: 1;
  min-width: 0;
}

CSS Flex in Practice

Arranging Navigation Horizontally

Header navigation is a classic use case for Flexbox.ulYou canliyou can center-align the menu items and arrange them with equal spacing. Even if the number of elements increases,flex-wrap combining these elements helps prevent layout breaks even on narrow screens.

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.nav li {
  list-style: none;
}

Align cards to the same height

In product lists or article lists, the layout looks unstable if the cards aren’t aligned in height. The colored boxes here are placeholder elements used in place of images or thumbnails. Card C is included as a comparison card with slightly longer body text. In Flexbox, thealign-items is stretch , so child elements tend to align in height by default. Here, we’ll demonstrate this behavior while also verifying thatalign-items: flex-start; we’ll also see how the heights become misaligned.

The example below showsalign-items: flex-start; . When you want to align the heights, use the default stretch or explicitly specify align-items: stretch; .

.cards {
  display: flex;
  gap: 20px;
  align-items: stretch;
}
.card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

Aligning form labels and input fields

dt and dd Flexbox works effectively even in definition lists that use ` ` or in forms where labels and input fields are placed side by side. By fixing the label width and making the input field width variable, it becomes easier to ensure both readability and usability.

.form-row {
  display: flex;
  gap: 12px;
}
.form-row .label {
  flex: 0 0 160px;
}
.form-row .field {
  flex: 1;
}

Common Pitfalls

• vertical-align does not work as expected in Flexbox. To adjust vertical positioning, use align-items or align-self .
• `height: 100%` does not work unless the parent element’s height is defined. What appears to be a Flexbox issue may actually be due to insufficient parent height.
• If you don’t include `min-width: 0;`, items containing long text strings won’t shrink and are likely to overflow horizontally.
• If you usealign-contentwithout distinguishing between single-line and multi-line items, it may appear to have no effect.
• There are also cases where WebKit or Safari quirks come into play. First, review the basic Flexbox settings; if the layout still breaks, please also check the workaround for Safari in a separate article.

As related supplementary notes, you may also find the differences between `flex-basis` and `width`, as well as methods for preventing layout shifts using `flex-shrink`, helpful. These are small differences, but they clearly affect the implementation results.

Choosing Between Flexbox and Grid

Flexbox excels at arranging elements along a single axis. On the other hand, if you want to precisely control both rows and columns, CSS Grid is more suitable. It’s most efficient to think of Flexbox as the go-to for navigation, groups of buttons, side-by-side cards, and auxiliary form layouts, while reserving Grid for table-like structures and complex two-dimensional layouts.

When in doubt, use this rule of thumb: “If you only need to align in one direction—either horizontally or vertically—use Flexbox; if you want to design both columns and rows simultaneously, use Grid.” This approach makes it much harder to make the wrong choice.

Summary

CSS Flex isdisplay: flex; andflex-direction、justify-content、align-items、flex-wrap and mastering just these concepts makes it quite practical to use. Furthermore,order、flex-grow、flex-shrink、flex-basis、align-self understanding up tomin-width: 0; or flex-flow as needed.