壞掉的熱水器和濕盒教會了我關於彈性盒的知識。

我們的熱水器壞了。我走進車庫，聽到流水聲。檢查了家裡的水龍頭是否關閉，廁所沒有運行，檢查了外面。不，軟管關閉。重新檢查車庫仍然聽到水聲，也許只是燃氣加熱水時的噪音。走過去，地板上有水。

熱水器從頂部漏水。地板上和地毯上都有水坑。我們的地板上有一些舊地毯，所以它不是冷的裸露地板。現在有一條流穿過它。

地毯上存放的盒子裡有水。盒子又濕又濕。一些內容也是如此。那些盒子裡有幾本平裝書和一些侏羅紀公園的恐龍。這些書都被水損壞了，但大多數都會幹掉。

這些盒子不再堅固，而是靈活。

這些盒子=彈性盒子。這給了我一個類似 LinkedIn 的點擊誘餌標題和寫有關 Flexbox 的藉口。

彈性盒

在 CSS 中，flexbox 用於在行或列中水平或垂直排列項目。這些物品將彎曲以填充容器中的空間。

要開始使用 flex，請​​將 display:flex 加入到要保存子元素的父 Flex-container。

.flex-container {
  display: flex;
}

<flex-container>
  <div>



<p>Then decide if you want row or columns with flex-directionoptions are row, row-reverse, column, and column-reverse. Row lines things up left-to-right, row-reverse lines them right-to-left. You might guess Column and column-reverse are similar but top-to-bottom and bottom-to-top respectively.<br>
</p>

<pre class="brush:php;toolbar:false">.flex-container {
  display: flex;
  flex-direction: row;
}

<flex-container>
  <div>



<h2>
  
  
  Justify Content
</h2>

<p>So how to arrange things horizontally? Use justify-content: to align the books in your boxes. Here you have several options.</p>

<ul>
<li>justify-content: center - Aligns items in the center of the container.</li>
<li>justify-content: space-around - Places space at the front and end of the container plus in between each item.</li>
<li>justify-content: space-between - Pushes items to the front and end of the container and place space evenly between the items.</li>
<li>justify-content: flex-start (default) - Aligns at the start of the container.</li>
<li>justify-content: flex-end - Aligns at end of container.
</li>
</ul>

<pre class="brush:php;toolbar:false">.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center; 
}

此圖片顯示了盒子中央的書籍。

此圖片顯示了應用了空格的書籍。盒子的開頭和結尾之間有間隙。

此圖片顯示了應用了空格的書籍。書籍被推到盒子的前面、中間、末端，之間有空間。

此圖片顯示了 Flex-Start。所有的書都被推到盒子的開頭或左邊。

此影像顯示了 Flex-End。所有的書都被推到盒子的末端或右側。

結盟

使用align-items 垂直對齊父容器內的內容。

• align-items: flex-start - 在容器頂部對齊
• align-items: flex-end - 在容器底部對齊
• align-items: center - 將物品放在垂直中心
• align-items:基線 - 沿著每個項目內的基線對齊。
• align-items:stretch（預設）- 拉伸項目以填滿容器的高度。

.flex-container {
  display: flex;
}

用 CSS 進行插圖。這些圖像是使用 CSS 製作的。

結論

這只是 Flexbox 的介紹，請查看 Wes Bos 的 What the Flex Box 或 MDN Web Docs 以獲取更深入的解釋。