flex布局：flex布局是彈性布局，用來為盒模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。但是，設定為flex布局後，子元素的float，clear，vertical-align屬性都會失效。
我們對於採用flex布局的元素，稱為容器，對於子元素，稱為專案。
布局原理：通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式。
justify-content：主軸上子元素的排列方式（在使用前要確定好主軸）
flex-wrap：子元素是否換行
align-items：側軸上元素的排列方式（子項為單項（單行）時使用）
align-content：側軸上元素的排列方式（子項為多項時使用）
flex-flow：他是flex-direction和flex-wrap的復合屬性，第乙個是flex-direction，第二個是flex-wrap
flex屬性是 flex-grow屬性、flex-shrink屬性、flex-basis屬性的簡寫。預設值為：0 1 auto；
定義子項分配到剩餘的空間，用flex表示佔多少份數
grid布局：指定乙個容器採用網格布局
// 九宮格布局
.container
CSS中的display屬性的flex布局
display flex flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。設為flex布局以後，子元素的float clear和vertical align屬性將失效。它即可以應用於容器中，也可以應用於行內元素。基本概念 採用flex布局的元素，稱為flex...
css布局 flex 響應式 grid
布局 原始布局方式，利用 的特性展示布局，沒有頁面邏輯且大量冗餘 現在幾乎不用 固定寬 常用960px，移動端縮放表現差，不友好 流式 使用float實現動態浮動，各解析度下樣式無法保證 flex彈性盒子 簡潔且強大，主流使用 css柵格布局 grid 將網頁分成一系列行和列，將對應內容放入對應區域...
css3中的display屬性 flex布局
1 container編譯之後的效果很明顯，介面的布局也很合理，看起來很清晰。那麼究竟這個屬性是幹嘛用的呢？flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。設為flex布局以後，子元素的float clear和vertical align屬性將失效。採用fl...