Flexbox — จัดของในกล่องให้อยู่ตรงที่ต้องการ

Google Chrome (headless) — วัดขนาดจริงด้วย getBoundingClientRect()
CSS Flexible Box Layout Module Level 1  /* มาตรฐานที่เบราว์เซอร์ทำตาม */

1 · ก่อนอื่น — ปัญหาที่ Flexbox มาแก้

ลองนึกถึงงานที่ง่ายที่สุดในโลกเว็บ: เอากล่องสามกล่องมาวางเรียงกันในแนวนอน
ฟังดูเหมือนควรจะง่าย แต่ถ้ายังไม่ใส่อะไรเลย <div> จะทำแบบนี้:

<style>
  .box > div { background: #4338ca; color: #fff; padding: 8px 14px; border-radius: 6px; }
</style>

<div class="box">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

สามกล่องซ้อนกันลงมาเป็นชั้น ๆ ไม่ใช่เรียงข้างกัน — เพราะ <div> เป็น block ซึ่งมีนิสัยว่า "ฉันกินความกว้างเต็มบรรทัด แล้วคนถัดไปไปขึ้นบรรทัดใหม่"

ทีนี้เติมบรรทัดเดียวเข้าไปที่กล่องแม่ (ไม่ใช่ที่กล่องลูก):

<style>
  .box { display: flex; }
  .box > div { background: #4338ca; color: #fff; padding: 8px 14px; border-radius: 6px; }
</style>

<div class="box">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

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

2 · แกนหลัก (main axis) กับแกนรอง (cross axis)

ทุกอย่างที่เหลือในบทนี้ตั้งอยู่บนแนวคิดเดียว และถ้าเข้าใจแนวคิดนี้ผิด จะผิดยาวไปทั้งบท:
กล่อง flex มีทิศทางอยู่สองทิศ ไม่ใช่ "แนวนอน" กับ "แนวตั้ง" แต่เป็น "ตามแถว" กับ "ขวางแถว"

• แกนหลัก — ทิศที่กล่องลูกเรียงต่อกันไป
• แกนรอง — ทิศที่ตั้งฉากกับแกนหลัก คือทิศ "ความหนา" ของแถว

สังเกตให้ดี: ภาพขวา แกนหลักชี้ลง ไม่ใช่ชี้ขวาแล้ว
และคำว่า "แกนหลัก" ไม่ได้ผูกกับ "แนวนอน" เลยแม้แต่นิดเดียว — มันผูกกับ ทิศที่ของเรียงต่อกัน ซึ่งเปลี่ยนได้ด้วย flex-direction

3 · flex-direction — ตัวที่ย้ายแกนหลัก

สไลด์หน้า 49 บอกไว้สั้น ๆ ว่า "Establishes the main-axis direction of content" ซึ่งแปลตรงตัวว่า "เป็นตัวตั้งว่าแกนหลักชี้ไปทางไหน" · มีสี่ค่าให้เลือก:

<style>
  .box { display: flex; gap: 6px; background: #eef2ff; border: 2px dashed #a5b4fc;
         padding: 6px; margin-bottom: 10px; }
  .box > div { background: #4338ca; color: #fff; padding: 6px 12px; border-radius: 6px; }
  .cap { margin: 0 0 3px; font: 13px monospace; color: #475569; }
</style>

<p class="cap">row (ค่าเริ่มต้น)</p>
<div class="box" style="flex-direction: row"><div>1</div><div>2</div><div>3</div></div>

<p class="cap">row-reverse</p>
<div class="box" style="flex-direction: row-reverse"><div>1</div><div>2</div><div>3</div></div>

<p class="cap">column</p>
<div class="box" style="flex-direction: column"><div>1</div><div>2</div><div>3</div></div>

<p class="cap">column-reverse</p>
<div class="box" style="flex-direction: column-reverse"><div>1</div><div>2</div><div>3</div></div>

สังเกตอย่างหนึ่งในสองกล่องล่าง: พอเป็น column แล้วกล่อง 1 2 3 กว้างเต็มแถบไปเลย ทั้งที่โค้ดไม่ได้สั่งความกว้างไว้เลยสักบรรทัด
นั่นไม่ใช่บั๊ก — มันคือ align-items ที่ทำงานเป็นค่าเริ่มต้นอยู่ และพอแกนรองหมุนมาเป็นแนวนอน "การยืดเต็มแกนรอง" ก็เลยกลายเป็น "ยืดเต็มความกว้าง"
รายละเอียดของเรื่องนี้อยู่ในหัวข้อ 5 · ตอนนี้แค่จำไว้ว่าคุณเห็นมันตั้งแต่ยังไม่ได้สั่งอะไร

4 · justify-content — จัดตำแหน่งตามแกนหลัก

สไลด์หน้า 51 เขียนว่า "Defines alignment along the main-axis" และเสริมว่ามันคือตัวที่ "ช่วยกระจายพื้นที่ว่างที่เหลือในบรรทัด"
พูดเป็นภาษาคน: เมื่อของทั้งหมดวางเสร็จแล้วยังมีที่ว่างเหลือ ที่ว่างนั้นไปอยู่ตรงไหน

<style>
  .box { display: flex; gap: 6px; background: #eef2ff; border: 2px dashed #a5b4fc;
         padding: 6px; margin-bottom: 10px; }
  .box > div { background: #4338ca; color: #fff; padding: 6px 12px; border-radius: 6px; }
  .cap { margin: 0 0 3px; font: 13px monospace; color: #475569; }
</style>

<p class="cap">flex-start (ค่าเริ่มต้น)</p>
<div class="box" style="justify-content: flex-start"><div>1</div><div>2</div><div>3</div></div>

<p class="cap">flex-end</p>
<div class="box" style="justify-content: flex-end"><div>1</div><div>2</div><div>3</div></div>

<p class="cap">center</p>
<div class="box" style="justify-content: center"><div>1</div><div>2</div><div>3</div></div>

<p class="cap">space-between</p>
<div class="box" style="justify-content: space-between"><div>1</div><div>2</div><div>3</div></div>

<p class="cap">space-around</p>
<div class="box" style="justify-content: space-around"><div>1</div><div>2</div><div>3</div></div>

<p class="cap">space-evenly</p>
<div class="box" style="justify-content: space-evenly"><div>1</div><div>2</div><div>3</div></div>

space-around กับ space-evenly คือคู่ที่คนสับสนบ่อยที่สุด เลื่อนกลับไปดูกล่องผลลัพธ์สองอันล่างสุดเทียบกัน จะเห็นว่า space-around ขอบซ้ายขวาบางกว่าช่องตรงกลาง เพราะแต่ละกล่องได้ที่ว่าง "ครึ่งหนึ่งต่อข้าง" แล้วช่องกลางเป็นครึ่งของสองกล่องมาบวกกัน

5 · align-items — จัดตำแหน่งตามแกนรอง

สไลด์หน้า 52 สรุปไว้ดีมากในบรรทัดเดียว: "Like justify-content in cross-axis version"
คือมันคือของอย่างเดียวกัน แค่คนละแกน · เริ่มจากค่าเริ่มต้นก่อน ซึ่งเป็นค่าที่คนไม่ค่อยรู้ว่ามันทำอะไร:

<style>
  .box { display: flex; gap: 6px; height: 80px; background: #eef2ff;
         border: 2px dashed #a5b4fc; padding: 6px; margin-bottom: 10px; }
  .box > div { background: #4338ca; color: #fff; padding: 6px 12px; border-radius: 6px; }
  .cap { margin: 0 0 3px; font: 13px monospace; color: #475569; }
</style>

<p class="cap">stretch (ค่าเริ่มต้น) — กล่องลูกยืดเต็มความสูงเอง</p>
<div class="box" style="align-items: stretch"><div>1</div><div>2</div><div>3</div></div>

<p class="cap">flex-start</p>
<div class="box" style="align-items: flex-start"><div>1</div><div>2</div><div>3</div></div>

กล่องแม่สูง 80px ส่วนกล่องลูกไม่ได้ตั้งความสูงไว้เลย
แต่ในกล่องบน ลูกทั้งสามสูงเต็ม 80px — นั่นคือ stretch ทำงานอยู่ โดยที่คุณไม่ได้สั่ง เพราะมันคือพฤติกรรมเริ่มต้น
พอสั่ง flex-start ลูกถึงจะยุบลงมาเหลือเท่าเนื้อหาของตัวเอง

ที่เหลืออีกสามค่า:

<style>
  .box { display: flex; gap: 6px; height: 80px; background: #eef2ff;
         border: 2px dashed #a5b4fc; padding: 6px; margin-bottom: 10px; }
  .box > div { background: #4338ca; color: #fff; padding: 6px 12px; border-radius: 6px; }
  .big { font-size: 28px; }
  .cap { margin: 0 0 3px; font: 13px monospace; color: #475569; }
</style>

<p class="cap">center</p>
<div class="box" style="align-items: center"><div>1</div><div class="big">2</div><div>3</div></div>

<p class="cap">flex-end</p>
<div class="box" style="align-items: flex-end"><div>1</div><div class="big">2</div><div>3</div></div>

<p class="cap">baseline — เส้นฐานตัวอักษรตรงกัน ไม่ใช่ขอบกล่องตรงกัน</p>
<div class="box" style="align-items: baseline"><div>1</div><div class="big">2</div><div>3</div></div>

6 · กับดักใหญ่ของบทนี้ — ค่าเดิมเป๊ะ แต่ row กับ column ให้ผลคนละเรื่อง

ถึงตรงนี้คนส่วนใหญ่จะจำแบบนี้: "justify-content = ซ้ายขวา · align-items = บนล่าง"
ซึ่งถูกครึ่งเดียว และครึ่งที่ผิดคือครึ่งที่จะกัดคุณตอนดึกที่สุด

.box {                  /* ทั้งสองกล่องใช้ก้อนนี้ร่วมกัน — flex-direction เป็น row ตามค่าเริ่มต้น */
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.col {                  /* กล่องขวาได้คลาสนี้เพิ่มมาคลาสเดียว */
  flex-direction: column;
}

ดูของจริงเทียบกัน — โค้ดชุดเดียว ต่างกันแค่คลาส col:

<style>
  .box { display: flex; justify-content: flex-end; align-items: center;
         gap: 8px; height: 180px; background: #eef2ff;
         border: 2px dashed #a5b4fc; padding: 8px; }
  .col { flex-direction: column; }
  .box > div { background: #4338ca; color: #fff; padding: 8px 14px; border-radius: 6px; }
  .pair { display: flex; gap: 12px; }
  .pair > div { flex: 1; }
  .cap { margin: 0 0 4px; font: 13px monospace; color: #475569; }
</style>

<div class="pair">
  <div>
    <p class="cap">flex-direction: row (ค่าเริ่มต้น)</p>
    <div class="box"><div>1</div><div>2</div><div>3</div></div>
  </div>
  <div>
    <p class="cap">flex-direction: column</p>
    <div class="box col"><div>1</div><div>2</div><div>3</div></div>
  </div>
</div>

7 · gap · row-gap · column-gap — ระยะห่างระหว่างกล่อง

สมัยก่อนถ้าอยากให้กล่องมีระยะห่างกัน ต้องไปใส่ margin ที่กล่องลูกทีละอัน แล้วมานั่งลบ margin ของอันสุดท้ายทิ้งเพราะมันเกินมา · gap มาแก้เรื่องนี้ทั้งหมด: สั่งครั้งเดียวที่กล่องแม่ ได้ช่องว่างระหว่างกล่องเท่านั้น ขอบนอกไม่โดน

<style>
  .box { display: flex; flex-wrap: wrap; width: 280px; gap: 8px 16px;
         background: #eef2ff; border: 2px dashed #a5b4fc; padding: 8px; }
  .box > div { width: 100px; text-align: center; background: #4338ca;
               color: #fff; padding: 8px 0; border-radius: 6px; }
</style>

<div class="box"><div>1</div><div>2</div><div>3</div><div>4</div></div>

โค้ดข้างบนเขียนว่า gap: 8px 16px; ซึ่งเป็นรูปย่อของสองค่าพร้อมกัน ลำดับคือ แถว ก่อน คอลัมน์:

8 · flex-wrap — ยอมขึ้นบรรทัดใหม่ไหม

สไลด์หน้า 50 บอกว่า "By default, items will fit onto one line" — ประโยคนี้สำคัญกว่าที่ตาเห็น เพราะคำว่า "fit onto one line" แปลว่า เบราว์เซอร์จะยัดทุกอย่างลงหนึ่งบรรทัดให้ได้ ไม่ว่าจะต้องบีบแค่ไหน

<style>
  .box { display: flex; width: 260px; gap: 8px; background: #eef2ff;
         border: 2px dashed #a5b4fc; padding: 8px; margin-bottom: 10px; }
  .box > div { width: 100px; text-align: center; background: #4338ca;
               color: #fff; padding: 8px 0; border-radius: 6px; }
  .cap { margin: 0 0 4px; font: 13px monospace; color: #475569; }
</style>

<p class="cap">nowrap (ค่าเริ่มต้น) — 4 กล่อง กล่องละ 100px ในที่ว่าง 260px</p>
<div class="box" style="flex-wrap: nowrap"><div>1</div><div>2</div><div>3</div><div>4</div></div>

<p class="cap">wrap</p>
<div class="box" style="flex-wrap: wrap"><div>1</div><div>2</div><div>3</div><div>4</div></div>

กล่องบนคือค่าเริ่มต้น nowrap — ผมสั่งให้ทุกกล่องกว้าง 100px ทั้งสี่กล่อง แต่ที่ว่างมีแค่ 260px
ผลจริงที่วัดได้: แต่ละกล่องเหลือ 59px ซึ่งมาจาก (260 − 8×3) ÷ 4 = 59 — คือเบราว์เซอร์บีบให้ทุกกล่องเท่ากัน แทนที่จะปล่อยให้ล้น
พอเติม flex-wrap: wrap; เข้าไป กล่องได้ 100px ตามที่สั่งจริง ๆ แล้วกล่องที่ไม่พอก็ตกไปบรรทัดใหม่

9 · flex-grow · flex-shrink · flex-basis — และ flex: 1 ย่อมาจากอะไร

สามตัวนี้ใส่ที่กล่องลูก (ต่างจากทุกตัวก่อนหน้าที่ใส่ที่แม่) และมันตอบคำถามคนละข้อ:

9.1 · flex-grow — แบ่ง "ที่ว่างที่เหลือ" ไม่ใช่แบ่งความกว้างทั้งหมด

<style>
  .box { display: flex; gap: 8px; background: #eef2ff; border: 2px dashed #a5b4fc;
         padding: 8px; margin-bottom: 10px; }
  .box > div { text-align: center; background: #4338ca; color: #fff;
               padding: 8px 0; border-radius: 6px; }
  .cap { margin: 0 0 4px; font: 13px monospace; color: #475569; }
</style>

<p class="cap">ทุกกล่อง flex-grow: 1</p>
<div class="box">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">1</div>
</div>

<p class="cap">กล่องกลาง flex-grow: 2</p>
<div class="box">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 2">2</div>
  <div style="flex-grow: 1">1</div>
</div>

กล่องบนคือ 1 : 1 : 1 ได้เท่ากันสามส่วน · กล่องล่างคือ 1 : 2 : 1 ตรงกับรูปในสไลด์หน้า 54 เป๊ะ
แต่ระวังคำว่า "เป็น 2 เท่า" — flex-grow: 2 ไม่ได้แปลว่า "กว้างเป็นสองเท่าของเพื่อน" มันแปลว่า "ได้ส่วนแบ่งจากที่ว่างที่เหลือ เป็นสองเท่า"
ในกล่องข้างบนเนื้อหาแต่ละกล่องเล็กมาก ที่ว่างที่เหลือจึงเกือบเท่ากับความกว้างทั้งหมด ผลเลยดูเหมือนสองเท่าพอดี · แต่พอเนื้อหายาวไม่เท่ากันเมื่อไหร่ ภาพจะเปลี่ยนทันที — ซึ่งคือเรื่องของหัวข้อ 9.3

9.2 · flex-shrink — ใครยอมหด ใครไม่ยอม

<style>
  .box { display: flex; width: 300px; gap: 8px; background: #eef2ff;
         border: 2px dashed #a5b4fc; padding: 8px; margin-bottom: 10px; }
  .box > div { width: 200px; text-align: center; background: #4338ca;
               color: #fff; padding: 8px 0; border-radius: 6px; }
  .cap { margin: 0 0 4px; font: 13px monospace; color: #475569; }
</style>

<p class="cap">ทั้งคู่ flex-shrink: 1 (ค่าเริ่มต้น) — ยอมหดเท่ากัน</p>
<div class="box">
  <div>shrink: 1</div>
  <div>shrink: 1</div>
</div>

<p class="cap">กล่องซ้าย flex-shrink: 0 — ไม่ยอมหด อีกกล่องเลยรับหดคนเดียว</p>
<div class="box">
  <div style="flex-shrink: 0">shrink: 0</div>
  <div>shrink: 1</div>
</div>

กล่องแม่กว้าง 300px ส่วนลูกสองกล่องขอ 200px คนละกล่อง — รวมเป็น 400px ซึ่งเกินมา
· กล่องบน ทั้งคู่ flex-shrink: 1 (ค่าเริ่มต้น) → วัดได้กล่องละ 146px เท่ากัน คือ (300 − 8) ÷ 2 ทั้งคู่ยอมหดเท่า ๆ กัน
· กล่องล่าง ซ้ายสั่ง flex-shrink: 0 → ซ้ายได้ 200px เต็มตามที่ขอ ส่วนขวาเหลือ 92px คือ 300 − 8 − 200 รับภาระหดไปคนเดียวทั้งหมด

สไลด์หน้า 55 มีหมายเหตุตัวเล็กว่า "Negative number is invalid" — แปลว่า ใส่ค่าติดลบไม่ได้ ทั้ง flex-grow และ flex-shrink ถ้าใส่ -1 เบราว์เซอร์จะทิ้งบรรทัดนั้นทั้งบรรทัด แล้วกลับไปใช้ค่าเริ่มต้น · ไม่มี error ขึ้นใน Console ให้เห็นเลย ที่เดียวที่จะเห็นคือแผง Styles ใน DevTools ซึ่งจะขีดฆ่าบรรทัดนั้นทิ้งไว้ให้ดู ถ้าไม่ได้เปิดดูก็จะไม่รู้เลยว่าบรรทัดที่เขียนไปไม่ได้ทำงาน

แล้วถ้าที่ไม่พอจริง ๆ มันหดได้ไม่จำกัดเลยหรือ? ลองดู:

<style>
  .box { display: flex; width: 240px; gap: 8px; background: #eef2ff;
         border: 2px dashed #a5b4fc; padding: 8px; }
  .box > div { background: #4338ca; color: #fff; padding: 8px 12px; border-radius: 6px; }
</style>

<div class="box">
  <div>Loooooooooooooooooong</div>
  <div>BBB</div>
</div>

ไม่ได้ · กล่องซ้ายหดลงไปได้ถึงระดับหนึ่งแล้วหยุด — คือหยุดที่ความกว้างของคำที่ ตัดบรรทัดไม่ได้ ("Loooo…" เป็นคำเดียวยาว ๆ ที่ไม่มีที่ให้ตัด)
พอหดต่อไม่ได้ ทั้งแถวก็เลยล้นทะลุกรอบเส้นประออกไป ซึ่งเป็นภาพที่คุณจะเจอบ่อยมากเวลาเอา URL ยาว ๆ หรือชื่อไฟล์ยาว ๆ ไปใส่ในการ์ด

9.3 · flex-basis และคำตอบว่า flex: 1 คืออะไร

สไลด์หน้า 56 บอกว่า flex-basis คือ "ขนาดตั้งต้นของกล่องก่อนที่ Flex Container จะคำนวณพื้นที่ที่เหลือ" — ตรงตัวเลย

<style>
  .box { display: flex; width: 400px; gap: 8px; background: #eef2ff;
         border: 2px dashed #a5b4fc; padding: 8px; margin-bottom: 10px; }
  .box > div { text-align: center; background: #4338ca; color: #fff;
               padding: 8px 0; border-radius: 6px; }
  .cap { margin: 0 0 4px; font: 13px monospace; color: #475569; }
</style>

<p class="cap">กล่องซ้าย flex-basis: 150px + flex-grow: 1</p>
<div class="box">
  <div style="flex-basis: 150px; flex-grow: 1">basis 150px</div>
  <div style="flex-grow: 1">grow 1</div>
</div>

<p class="cap">กล่องซ้าย flex-basis: 50% + flex-grow: 1</p>
<div class="box">
  <div style="flex-basis: 50%; flex-grow: 1">basis 50%</div>
  <div style="flex-grow: 1">grow 1</div>
</div>

กล่องซ้ายในทั้งสองแถวกว้างกว่ากล่องขวาชัดเจน ทั้งที่ทั้งคู่มี flex-grow: 1 เหมือนกัน เพราะกล่องซ้ายออกตัวจาก 150px (แถวบน) และ 50% ของกล่องแม่ (แถวล่าง) ก่อนที่จะเริ่มแบ่งที่ว่างที่เหลือกัน

ทีนี้มาถึงบรรทัดที่คุณจะพิมพ์บ่อยที่สุดในชีวิต — flex: 1

<style>
  .box { display: flex; width: 300px; gap: 8px; background: #eef2ff;
         border: 2px dashed #a5b4fc; padding: 8px; margin-bottom: 10px; }
  .box > div { background: #4338ca; color: #fff; padding: 8px 12px; border-radius: 6px; }
  .cap { margin: 0 0 4px; font: 13px monospace; color: #475569; }
</style>

<p class="cap">flex-grow: 1 เฉย ๆ (flex-basis ยังเป็น auto)</p>
<div class="box">
  <div style="flex-grow: 1">สั้น</div>
  <div style="flex-grow: 1">ยาวกว่ามาก</div>
</div>

<p class="cap">flex: 1 (= grow 1 · shrink 1 · basis 0)</p>
<div class="box">
  <div style="flex: 1">สั้น</div>
  <div style="flex: 1">ยาวกว่ามาก</div>
</div>

ความต่างทั้งหมดอยู่ที่ flex-basis ตัวเดียว เพราะ flex คือ รูปย่อของสาม property ที่เขียนติดกัน:

ตัวที่เซอร์ไพรส์คนมากที่สุดคือ flex-basis: 0% ที่แอบมากับ flex: 1
เขียน flex: 1 คุณกำลังบอกเบราว์เซอร์ว่า "ถือว่ากล่องนี้กว้างศูนย์นะ แล้วค่อยเอาที่ว่างทั้งหมดมาหาร" ซึ่งเป็นเหตุผลที่มันได้เท่ากันเป๊ะเสมอ
ถ้าคุณอยากได้ "แบ่งเท่ากัน" ให้ใช้ flex: 1 · ถ้าอยากได้ "เนื้อหาสั้นก็แคบหน่อย" ให้ใช้ flex: auto หรือ flex-grow: 1 เฉย ๆ

10 · สรุป — ตัวไหนใส่ที่แม่ ตัวไหนใส่ที่ลูก

นี่คือเส้นแบ่งที่ทำให้คน debug flexbox เป็นกับไม่เป็นต่างกัน: ถ้าใส่ผิดที่ มันจะไม่ error แต่จะไม่มีอะไรเกิดขึ้นเลย

10.1 · เอาทุกอย่างมารวมกัน — navbar ของจริง

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

<style>
  .bar { display: flex; align-items: center; gap: 12px;
         background: #1e293b; color: #fff; padding: 10px 16px; border-radius: 8px; }
  .brand { font-weight: 700; }
  .spacer { flex: 1; }
  .bar a { color: #cbd5e1; text-decoration: none; }
</style>

<div class="bar">
  <span class="brand">PEA DevPool</span>
  <a href="#">บทเรียน</a>
  <a href="#">สรุป</a>
  <span class="spacer"></span>
  <a href="#">เข้าสู่ระบบ</a>
</div>

หัวใจของมันคือ <span class="spacer"> ที่ไม่มีเนื้อหาอะไรเลย แต่ตั้ง flex: 1 ไว้
เพราะ flex: 1 คือ "ไม่สนขนาดเนื้อหา ขอที่ว่างที่เหลือทั้งหมด" (หัวข้อ 9.3) มันจึงพองออกจนเต็มช่องว่าง แล้วดันทุกอย่างที่อยู่หลังมันไปชิดขวาโดยปริยาย
ส่วน align-items: center คือตัวที่ทำให้ข้อความทุกชิ้นอยู่กลางแถบตามแนวตั้ง ไม่ว่าตัวอักษรจะสูงไม่เท่ากันแค่ไหน

.login { margin-left: auto; }  /* ที่ว่างที่เหลือไปกองข้างซ้ายของมันทั้งหมด */

เช็คความเข้าใจ

อ้างอิง

• MDN — Basic concepts of flexbox — อ่านหัวข้อ "The two axes of flexbox" ให้จบก่อนหัวข้ออื่น มันมีรูปแกนหลัก/แกนรองที่อธิบายกับดักในหัวข้อ 6 ของบทนี้ได้ในภาพเดียว
• MDN — flex (shorthand) — อ่านหัวข้อ "Constituent properties" กับตัวอย่าง flex: <number> ตรงนั้นเขียนไว้ชัดว่า flex: 1 ขยายเป็น 1 1 0%
• MDN — align-items — ดูบรรทัด Initial value ในตาราง Formal definition จะเห็นคำว่า normal ไม่ใช่ stretch ซึ่งคือรายละเอียดที่พูดถึงในหัวข้อ 5
• W3C — CSS Flexible Box Layout §7.1.1 flex — อ่านย่อหน้าที่ขึ้นต้นว่า "flex: <number>" นี่คือมาตรฐานตัวจริงที่เบราว์เซอร์ทำตาม ใช้อ้างอิงเวลาเถียงกันได้
• CSS-Tricks — A Complete Guide to Flexbox — ใช้เป็นแผ่นภาพ ไม่ใช่บทเรียน · เปิดค้างไว้ตอนทำภารกิจ แล้วเลื่อนหาภาพของ justify-content กับ align-items เทียบกับที่คุณเขียน