Align Items in Row Using CSS

To align items in a row using CSS, you can use the display: flex; property and the justify-content property. The justify-content property specifies how the items in the flex container should be aligned along the main axis, which is the horizontal axis by default.

Align Items in a Row Example

Here is an example of how to align items in a row using CSS:

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

In this example, the justify-content property is set to space-between, which means that the items in the flex container will be evenly distributed in the row, with equal amounts of space between the items.

Here is an example of how the CSS might be used to align a list of items in a row:

<ul class="container">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

And here is an example of what the output might look like:

Item 1     Item 2     Item 3     Item 4

In this example, the items are evenly distributed in the row, with equal amounts of space between the items.

You can also use other values for the justify-content property to align the items in different ways. For example, you can use the center value to center the items in the row, or you can use the flex-end value to align the items to the right of the row.

Here is an example of how to center the items in a row using CSS:

.container {
  display: flex;
  justify-content: center;
}

And here is an example of how to align the items to the right of the row using CSS:

.container {
  display: flex;
  justify-content: flex-end;
}

Align Buttons in a Row Example

Here are some additional examples of how to align items in a row using CSS:

/* align buttons in a row with equal amounts of space between them */
button {
  display: flex;
  justify-content: space-between;
}

/* center divs in a row */
div {
  display: flex;
  justify-content: center;
}

/* align divs to the right of the row */
div {
  display: flex;
  justify-content: flex-end;
}

Here is an example of how the CSS might be used to align buttons in a row with equal amounts of space between them:

<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>

And here is an example of what the output might look like:

Button 1     Button 2     Button 3     Button 4

In this example, the buttons are evenly distributed in the row, with equal amounts of space between them.

Here are some frequently asked questions about aligning items in a row using CSS:

Related:

• Align Items in Center Using CSS