CSS display property: giá trị inner & outer (cập nhật mới)

CSS Display Module Level 3 cho phép cú pháp 2 giá trị: display: <outer> <inner> - tách biệt behavior bên ngoài và bên trong.

Cú pháp

selector { display: outer inner; }
/* outer: block, inline, run-in */
/* inner: flow, flow-root, flex, grid, table, ruby */

Ví dụ 1: inline flow-root

<!DOCTYPE html>
<html>
<head>
  <style>
    body, div, span {
      box-shadow: inset 0 0 12px lightgreen;
      border: 2px dotted gray;
      padding: 10px;
    }
    span {
      display: inline flow-root;  /* Inline outside, flow-root inside */
      padding: 2%;
    }
  </style>
</head>
<body>
  <div>
    <p>Aliquam non metus diam. Suspendisse ac euismod eros.</p>
    <img src="https://images.unsplash.com/photo-1611625618313-68b87aaa0626?w=128&h=128&fit=crop" />
    <span>Inline Block</span> <span>Span</span>
    Quisque sit amet consequat sem.
  </div>
</body>
</html>

Ví dụ 2: block flow

<style>
  body, div, span {
    margin: 2%;
    box-shadow: inset 0 0 12px orange;
    border: 2px ridge cadetblue;
  }
  span {
    display: block flow;  /* Block outside, flow inside */
    padding: 2%;
  }
</style>

Giải thích

Tương đương cũ

• inline flow-root ≈ inline-block (nhưng tạo BFC)
• block flow ≈ block
• block flex ≈ display: flex
• inline flex ≈ display: inline-flex