Flex 是 Flexible Box 的縮寫，意為“彈性佈局”，用來為盒狀模型提供最大的靈活性。是一種現代的css佈局方式，現在已被大多數主流瀏覽器所支援。
有關 flex 佈局的更多資料，可以自行查閱，本文不做詳細說明。本文假設你已經知道了 flex 佈局的基本用法。
接下來，請大家看一張圖片
請大家注意紅色方框選中的位置，這個區域跟左側的圖片是水平對齊的。而且裡面包含兩部分內容，分別處於頂部和底部。如果只用 flex 佈局，能不能做到這樣的效果呢？
接下來我給大家稍作提示
flex 的 justify-content 屬性
看到這個圖，我們很快就可以想到，最接近這個效果的是 space-between ，可上面圖片中的這些都是橫向排列的，我們希望的效果是豎向排列的，接下來，我再為大家稍作提示：
flex 的 flex-direction 屬性
我們知道，flex 佈局的預設排列方向是從左到右的，如果我們把它的排列方向改成從上到下，然後再借助上面的 space-between 屬性，是不是就達到我們的目的了呢？
。right-content{ display： flex； flex-direction： column； justify-content： space-between；}
答案是肯定的。
最後
有沒有感覺這樣寫，比之前用絕對定位要簡單的多呢，如果覺得不錯，就收藏起來吧，如果覺得我說的東西比較有用，還可以加個關注
