此文轉載自：https://blog.csdn.net/weixin_45277161/article/details/110250532

學習前端的css過程中，我們經常設計網頁，其中最經典的原生設計就是flex和grip兩個設計模式，bootstrap就是基於grip這種網格佈局設計的，今天來說的是另外的一個flex佈局模式。
我們知道flex佈局模式中，宣告一個父級元素的display為flex之後，其後代的佈局方式可以通過justify-content和align-items分別調節橫向和縱向的佈局方式。現在要說的是當子代元素排列為row排列和column排列的屬性設定：
當flex-direction為row的時候，我們想設定橫向和縱向的排列方式時，可以通過設定justify-content和align-items的屬性來調節。
當flex-direction為column的時候，我們設定橫向和縱向的排列方式時，就要跟橫向排列設定的相反，要通過justify-content和align-items來調節縱向和橫向的屬性設定。
很繞是不是？這個屬性確實很難理解，而且橫向排列的時候可以設定align-items為strecth拉伸高度，但是一旦縱向排列就只能在子元素設定flex: 1 1 auto;