CSS căn chỉnh một mục đúng với flexbox

https://jsfiddle.net/vhem8scs/

Có thể có hai mục thẳng hàng trái và một mục thẳng hàng với flexbox? Các liên kết cho thấy nó rõ ràng hơn. Ví dụ cuối cùng là những gì tôi muốn đạt được.

Trong flexbox tôi có một khối mã. Với float tôi có bốn khối mã. Đó là một lý do tại sao tôi thích flexbox.

HTML

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->

<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

CSS

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

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

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

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

Để căn chỉnh một đứa trẻ flex sang bên phải, đặt nó vớimargin-left: auto;

Từ thông số kỹ thuật flex :

Một cách sử dụng lề tự động trong trục chính là tách các mục flex thành các "nhóm" riêng biệt. Ví dụ sau đây cho thấy cách sử dụng điều này để tái tạo một mẫu UI chung - một thanh hành động duy nhất với một số căn chỉnh ở bên trái và những cái khác được căn chỉnh ở bên phải.

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

Cập nhật fiddle

.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;
}

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->
<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

Ghi chú:

Bạn có thể đạt được hiệu ứng tương tự bằng cách đặt flex-grow: 1 trên mục flex giữa (hoặc tốc ký flex:1) sẽ đẩy mục cuối cùng sang bên phải. ( Bản trình diễn )

Tuy nhiên, sự khác biệt rõ ràng là vật phẩm ở giữa trở nên lớn hơn mức cần thiết. Thêm một đường viền cho các mục flex để thấy sự khác biệt.

Bản giới thiệu

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}
.wrap div {
  border: 3px solid tomato;
}
.margin div:last-child {
  margin-left: auto;
}
.grow div:nth-child(2) {
  flex: 1;
}
.result {
  background: #ccc;
  margin-top: 20px;
}
.result:after {
  content: '';
  display: table;
  clear: both;
}
.result div {
  float: left;
}
.result div:last-child {
  float: right;
}

<div class="wrap margin">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<div class="wrap grow">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->
<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

Đối với tùy chọn flexbox thuần túy, ngắn gọn, hãy nhóm các mục được căn trái và các mục được căn phải:

<div class="wrap">
  <div>
    <span>One</span>
    <span>Two</span>
  </div>
  <div>Three</div>
</div>

và sử dụng space-between:

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

Bằng cách này, bạn có thể nhóm nhiều mục ở bên phải (hoặc chỉ một mục).

https://jsfiddle.net/c9mkewwv/3/

Để căn chỉnh một số phần tử (headerEuity) ở giữa và phần tử cuối cùng bên phải (headerEnd).

.headerElement {
    margin-right: 5%;
    margin-left: 5%;
}
.headerEnd{
    margin-left: auto;
}