【摘要】flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度、高度(甚至順序)，以最佳方式填充可用空間（主要是為了適應所有型別的顯示裝置和螢幕大小）。
【作者】星星
flex 是 flexible box 的縮寫，意為"彈性布局"，
flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度、高度(甚至順序)，以最佳方式填充可用空間（主要是為了適應所有型別的顯示裝置和螢幕大小）。flex容器會使子專案（伸縮專案）擴充套件來填滿可用空間，或縮小他們以防止溢位容器。最重要的是，flexbox布局方向不可預知，他不像常規的布局（塊就是從上到下，內聯就從左到右）。flex布局使盒狀模型具有最大的靈活性
一、屬性設定
主容器的屬性
子容器屬性
二、踩坑記錄
1、父元素設定了display:flex,子元素兩列排列，但是在子元素沒有設定寬度的時候，子元素內部的元素會將子元素撐開，如圖
這時候需要給子元素設定寬度
2、子元素設定的寬度無效
父元素設定了display:flex,第乙個子元素設定了寬度，第二個子元素設定了flex:1,第二個元素內容太多時會壓縮第乙個元素，使得設定的寬度無效
這時候需要給第乙個元素設定 flex-shrink: 0;
3、子元素換行後最後乙個會不安裝順序排列
這時候需要給父元素新增乙個偽元素，設定偽元素占用剩餘空間
.flex-wrap::after{
content: "";
flex-grow: 99999;
附件：flex經典布局附件文件
flex經典布局原始文件
參考：flex 布局教程：語法篇
**css3 flexbox屬性
理解flexbox：你需要知道的一切
深入理解 flex 布局以及計算
歡迎關注技術團隊的知乎賬號 我們憑團隊例項運作以下專欄， 必須乾貨！
網際網路創業專欄 (我們小夥伴的創業歷程)
網際網路產品研發管理 (我們公司對產品結構的管理思路)
產品君的案例庫（產品小夥伴深刻總結）
布局（flex布局）
彈性盒模型 display flex，排列方式根據主軸方向排列。子元素超出預設不換行，而是進行壓縮 flex direction 彈性盒模型主軸方向設定 row 預設 從左到右 側軸 從上到下 row reverse 從右到左 側軸 從上到下 column 從上到下 側軸 從左到右 column r...
flex 平鋪布局 Flex 布局教程
網頁布局 layout 是 css 的乙個重點應用。布局的傳統解決方案，基於盒狀模型，依賴 display 屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c 提出了一種新的方案 flex 布局，可以簡便 完整 響應式地實現各種頁...
flex 布局 flex教程
簡介 2009年，w3c提出了一種新的方案 flex布局，可以簡便 完整 響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支援，這意味著，現在就能很安全地使用這項功能。flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布...