前言前端樣式開發時經常會遇到：當子 div 長度大於 父 div 中需要實現換行時，我們採取flex布局解決此問題。
**如下：
div>
開啟應用div>
div>
div>
開啟應用div>
div>
div>
開啟應用div>
div>
div>
開啟應用div>
div>
div>
開啟應用div>
div>
div>
div>
樣式**如下
width: 1100px;
height: 500px;
display: flex;
/* flex-flow是lex-direction和 flex-wrap的簡寫形式，如：row wrap|column wrap-reverse等。預設值為row nowrap，即橫向排列 不換行 */
/* ！！！！！ 該步驟實現 子 div 換行 ！！！！！*/
flex-flow: row wrap;
/* !當主軸沿水平方向時!justify-content,決定item在主軸上的對齊方式，可能的值有flex-start（預設），flex-end，center，space-between，space-around */
justify-content:center;
} margin-left: 170px;
width: 160px;
height: 170px;
position: relative;
} width: 125px;
height: 125px;
margin: 0 auto;
background-size: 100% 100%;
} width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 20px;
font-family: source han sans cn;
font-weight: 500;
color: rgba(255, 255, 255, 1);
}
CSS Flex彈性布局 筆記
flexbox 是 flexible box 的簡稱 注 意思是 靈活的盒子容器 是 css3 引入的新的布局模式。它決定了元素如何在頁面上排列，使它們能在不同的螢幕尺寸和裝置下可 地展現出來。它之所以被稱為 flexbox 是因為它能夠擴充套件和收縮 flex 容器內的元素，以最大限度地填充可用空...
css flex 彈性布局詳解
案例基礎布局 html 上面我給每個item 都設定了 不同的高度 和 line height 可以看到 容器為了讓文字對齊 而調整自己的位置 align content 定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。box 嘗試新增 align content flex end ...
css flex彈性盒模型布局
三 作用在子容器的樣式 flex特性 當多個div子元素寫在父容器，他們會併排在一行，父容器會自動調節子容器大小，使他們併排在一起，但不會容下無限個，會根據子容器中的內容決定，當內容多過父容器的大小時，其他的子容器會溢位在父容器外。這時，可以通過flex wrap對子容器進行換行。當父容器displ...