Flex css 佈局

Flex css 佈局

注意給 flex 容器明確的寬高

垂直高度佈局

注意 自動佔據位置的子容器，沒法直接繼承100%寬高.

<div style="display: flex; flex-direction:column; justify-content: flex-start; width: 100%; height: 100%;">
  <div style="flex-shrink: 0; flex-grow: 0; width: 100%; height: 40px;">
    1 號容器 固定寬高，不隨接受壓縮 shrink 與擴大 grow
  </div>
  <div style="flex:1; width: 100%; position: relative;">
    2 號容器自動佔據 1 份高度 ,這一級，沒法自動繼承寬高100%
    < !-- 爲了解決，沒法自動獲取 寬高 100% 的問題，須要添加以下層級--!>
      <div style="position: absolute; width: 100%; height: 100%;">
        <div style="width: 100%; height: 100%;">
           該容器，才能繼承 2 號 自動寬高的 100%
        </div>
      </div>
    </!-->
  </div>
</div>