彈性布局（Flexbox）是CSS3提供的一種新型布局方式，它能夠讓我們更加便捷地制作頁面布局。下面，我們通過使用Flexbox來制作一個八卦圖：
<div class="bagua"> <div class="yin"></div> <div class="yang"></div> </div>
通過上面的CSS代碼，我們設置了一個寬高為200px的div容器，并將它顯示為彈性（Flex）布局。接著，我們以Flex子元素的方式添加了兩個圓形
元素用來表示八卦圖的兩部分（一黑一白）。
我們使用justify-content: center和align-items: center兩個屬性將子元素居中對齊。同時，使用border-radius屬性讓容器和子元素的邊角變成圓弧形狀，以達到圓形效果。
最后，我們設置黑色子元素的背景顏色為黑色，白色子元素的背景顏色為白色且沿Y軸旋轉180度，以實現八卦圖的形態。