CSS bir öğeyi sağa flexbox ile hizala

https://jsfiddle.net/vhem8scs/

İki öğenin sola, bir öğenin sağa flexbox ile hizalanması mümkün müdür? Bağlantı daha net gösterir. Son örnek, elde etmek istediğim şey.

Flexbox'ta bir kod bloğum var. Şamandıra ile dört kod bloğum var. Flexbox'ı tercih etmemin bir nedeni bu.

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

Bir esnek çocuğu sağa hizalamak içinmargin-left: auto;

Flex spec itibaren :

Ana eksende otomatik kenar boşluklarının bir kullanımı, esnek öğeleri farklı "gruplara" ayırmaktır. Aşağıdaki örnekte, ortak bir kullanıcı arabirimi deseni oluşturmak için bunun nasıl kullanılacağı gösterilmektedir - bazıları solda hizalanmış, diğerleri sağda hizalanmış tek bir işlem çubuğu.

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

Güncellenmiş keman

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

Not:

Esnek büyümeyi ayarlayarak benzer bir etki elde edebilirsiniz: 1 orta esnek öğede (veya stenoda flex:1) son öğeyi sağa doğru iter. ( Demo )

Ancak bariz fark, orta öğenin olması gerekenden daha büyük hale gelmesidir. Farkı görmek için esnek öğelere bir kenarlık ekleyin.

gösteri

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

Kısa, saf bir flexbox seçeneği için, sola hizalanmış öğeleri ve sağa hizalanmış öğeleri gruplandırın:

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

ve kullanın space-between:

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

Bu şekilde birden fazla öğeyi sağa (veya yalnızca bir tanesine) gruplayabilirsiniz.

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

Ortadaki ve son öğedeki bazı öğeleri (headerElement) sağa (headerEnd) hizalamak için.

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