CSS Display Property: Inner & Outer Values (Two-value Syntax)

CSS Display Module Level 3 เปิดตัว Two-value Syntax สำหรับ display property แยกระบุ Outer Display Type (Layout ใน Flow) และ Inner Display Type (Layout ของ Children) ทำให้ควบคุม Layout ได้ละเอียดขึ้น

Syntax

selector {
  display:  ;
}

Outer Display Types (Box Generation)

Value	Behavior
`block`	Block-level box (บรรทัดใหม่, กว้างเต็ม)
`inline`	Inline-level box (ต่อเนื่อง, ไม่รับ width/height)
`run-in`	Run-in box (Experimental)

Inner Display Types (Layout Mode)

Value	Behavior
`flow`	Block/Inline Layout (Normal Flow)
`flow-root`	สร้าง Block Formatting Context ใหม่ (BFC)
`table`	Table Layout
`flex`	Flexbox Layout
`grid`	Grid Layout
`ruby`	Ruby Layout (ภาษาเอเชีย)

Legacy Single-value ↔ Two-value Mapping

Legacy (Single)	Two-value Syntax
`block`	`block flow`
`inline`	`inline flow`
`inline-block`	`inline flow-root`
`flex`	`block flex`
`inline-flex`	`inline flex`
`grid`	`block grid`
`inline-grid`	`inline grid`
`table`	`block table`
`inline-table`	`inline table`

ตัวอย่างที่ 1: inline flow-root (แทน inline-block)

<!DOCTYPE html>
<html>
<head>
  <style>
    body, div, span {
      box-shadow: inset 0 0 12px lightgreen;
      border: 2px dotted gray;
    }
    span {
      padding: 2%;
      display: inline flow-root; /* ใหม่ */
      /* display: inline-block; */ /* เก่า */
    }
  </style>
</head>
<body>
  <div>
    <p>Aliquam non metus diam. Suspendisse ac euismod eros, quis feugiat lacus.</p>
    <img src="..." />
    <span>Inline Block</span> <span>Span</span>
    Quisque sit amet consequat sem. Morbi eleifend erat et orci faucibus lacinia.
  </div>
</body>
</html>

ความแตกต่าง: inline-block vs inline flow-root

inline-block: ไม่สร้าง BFC, Floats ภายนอกสามารถทับได้, Margins ไม่ Collapse
inline flow-root: สร้าง BFC ใหม่, Contain Floats, Margins Collapse ภายใน, รองรับ overflow ได้ดีกว่า

ตัวอย่างที่ 2: block flow (แทน block)

<!DOCTYPE html>
<html>
<head>
  <style>
    body, div, span {
      margin: 2%;
      box-shadow: inset 0 0 12px orange;
      border: 2px ridge cadetblue;
    }
    span {
      padding: 2%;
      display: block flow; /* ใหม่ */
      /* display: block; */ /* เก่า */
    }
  </style>
</head>
<body>
  <div>
    <p>Aliquam non metus diam. Suspendisse ac euismod eros, quis feugiat lacus.</p>
    <span>Block is now</span> <span>Block Flow</span>
    Quisque sit amet consequat sem. Morbi eleifend erat et orci faucibus lacinia.
  </div>
</body>
</html>

block flow = block (เหมือนกันทุกประการ)

แค่ Explicit ระบุ Inner Type ชัดเจน เหมาะสำหรับ Code Clarity และ Tooling

ประโยชน์ของ Two-value Syntax

Clarity: แยก "ตัวมันเป็นยังไงใน Flow" (Outer) กับ "ลูกๆจัดยังไง" (Inner)
Composability: ผสมผสานได้ เช่น inline flex, block grid
Teaching: สอนง่ายขึ้น เข้าใจแนวคิด Box Tree ชัดเจน
Future-proof: รองรับ Layout Mode ใหม่ๆ (Masonry, Grid Level 3, etc.)

Browser Support

Firefox 70+ (Full Support)
Chrome 89+ (Behind Flag → Stable)
Safari 15.4+
Edge 89+
ตรวจสอบ: Can I Use

Fallback Strategy

/* Progressive Enhancement */
.my-component {
  /* Fallback for old browsers */
  display: inline-block;
  
  /* Modern browsers */
  display: inline flow-root;
}

/* หรือใช้ @supports */
@supports (display: inline flow-root) {
  .my-component {
    display: inline flow-root;
  }
}

Real-world Use Cases

1. Inline Flex Container

.badge-group {
  display: inline flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

2. Grid Container ใน Inline Context

.icon-grid {
  display: inline grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
}

3. Flow-root สำหรับ Clearfix Alternative

.container {
  display: block flow-root; /* แทน ::after clearfix */
}