flex布局的認識
文獻種類：專題技術文獻；
一、 flex，意為「彈性布局」，是傳統盒狀模型的另一種形態的模式更加靈活。任何乙個容器都可以指定為flex布局。flex 布局的元素，稱為 flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 flex 專案（flex item），簡稱"專案"。如圖：我們在做彈性布局一定要先把這個文件引入進來，不然就算你設定了display-felx也不會有那個效果。
注意：設為flex布局以後，子元素的float、clear和vertical-align屬性將失效。
二、六大容器的屬性
flex-direction：屬性決定主軸的方向
flex-wrap：換行
flex-flow：屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
justify-content：屬性定義了專案在主軸上的對齊方式。
align-items：屬性定義專案在交叉軸上如何對齊。
align-content：屬性定義了多根軸線的對齊方式，如果專案只有一根軸線，該屬性不起作用。
從下圖我們可以清晰的看出來這個彈性布局的各種屬性而外面則是乙個大容器用來裝這些屬性
（註明：上圖來自老師）
效果圖：
不經壓縮的是這樣向右排列的不換行顯示
一壓縮後它就會換行顯示
flex布局 Flex布局
摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫，意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...
布局（flex布局）
彈性盒模型 display flex，排列方式根據主軸方向排列。子元素超出預設不換行，而是進行壓縮 flex direction 彈性盒模型主軸方向設定 row 預設 從左到右 側軸 從上到下 row reverse 從右到左 側軸 從上到下 column 從上到下 側軸 從左到右 column r...
flex 平鋪布局 Flex 布局教程
網頁布局 layout 是 css 的乙個重點應用。布局的傳統解決方案，基於盒狀模型，依賴 display 屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c 提出了一種新的方案 flex 布局，可以簡便 完整 響應式地實現各種頁...