CSS จัดรายการหนึ่งรายการให้ตรงกับ flexbox

https://jsfiddle.net/vhem8scs/

เป็นไปได้หรือไม่ที่จะจัดแนวรายการสองรายการไว้ทางซ้าย ลิงก์แสดงอย่างชัดเจนยิ่งขึ้น ตัวอย่างสุดท้ายคือสิ่งที่ฉันต้องการบรรลุ

ใน flexbox ฉันมีหนึ่งบล็อคของโค้ด ด้วย float ฉันมีโค้ดสี่บล็อก นั่นเป็นเหตุผลหนึ่งว่าทำไมฉันถึงชอบ 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;
}

ในการจัดตำแหน่งเด็กงอหนึ่งชุดให้อยู่ทางขวาmargin-left: auto;

จากข้อมูลจำเพาะดิ้น :

การใช้ระยะขอบอัตโนมัติหนึ่งครั้งในแกนหลักคือการแยกรายการเฟล็กซ์ออกเป็น "กลุ่ม" ที่แตกต่างกัน ตัวอย่างต่อไปนี้แสดงวิธีใช้สิ่งนี้เพื่อสร้างรูปแบบ UI ทั่วไป - แถบการกระทำเดียวที่มีการจัดตำแหน่งทางซ้ายและแนวอื่นทางด้านขวา

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

อัพเดทซอ

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

บันทึก:

คุณสามารถบรรลุผลที่คล้ายกันได้โดยการตั้งค่า flex-grow: 1 บนไอเท็มเฟล็กกลาง (หรือชวเลขflex:1) ซึ่งจะผลักไอเท็มสุดท้ายไปทางขวา ( สาธิต )

ความแตกต่างที่เห็นได้ชัดคือรายการกลางนั้นใหญ่กว่าที่จำเป็นต้องมี เพิ่มเส้นขอบให้กับรายการ flex เพื่อดูความแตกต่าง

การสาธิต

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

สำหรับตัวเลือกเฟล็กบ็อกซ์แบบสั้น ๆ ให้จัดกลุ่มรายการที่จัดชิดซ้ายและรายการที่จัดชิดขวา:

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

และใช้space-between:

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

วิธีนี้คุณสามารถจัดกลุ่มหลายรายการทางด้านขวา (หรือเพียงรายการเดียว)

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

เพื่อจัดองค์ประกอบบางอย่าง (headerElement) ในศูนย์และองค์ประกอบสุดท้ายไปทางขวา (headerEnd)

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