How Do I Right-Align a Flexbox Item?

How can I align one item right with flexbox?

In flexbox, you can set the margin-left: auto; property to align one item to the right.

The flexbox specification states:

"One use of auto margins in the main axis is to separate flex items
into distinct 'groups'. The following example shows how to use this to
reproduce a common UI pattern - a single bar of actions with some
aligned on the left and others aligned on the right."

Here's an updated code snippet:

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}

.wrap div:last-child {
  margin-left: auto;
}

.result {
  background: #ccc;
  margin-top: 20px;
}

.result:after {
  content: '';
  display: table;
  clear: both;
}

.result div {
  float: left;
}

.result div:last-child {
  float: right;
}

The updated fiddle below demonstrates the alignment:

[fiddle demo](https://jsfiddle.net/vhem8scs/)

The above is the detailed content of How Do I Right-Align a Flexbox Item?. For more information, please follow other related articles on the PHP Chinese website!