Lab

Flex Gap 实验

对比 gap 与旧式负 margin 间距，拖动滑块看间距变化。

← 返回实验页

间距 16px

<h2 class="lab-flex-heading">用 gap</h2>
<div class="lab-flex-row lab-flex-row--gap" id="lab-flex-with-gap">
  <div class="lab-flex-cell">A</div>
  <div class="lab-flex-cell">B</div>
  <div class="lab-flex-cell">C</div>
  <div class="lab-flex-cell">D</div>
</div>

<h2 class="lab-flex-heading">旧式 margin（近似）</h2>
<div class="lab-flex-row lab-flex-row--margin" id="lab-flex-with-margin">
  <div class="lab-flex-cell">A</div>
  <div class="lab-flex-cell">B</div>
  <div class="lab-flex-cell">C</div>
  <div class="lab-flex-cell">D</div>
</div>