今天整理下最近對flex的理解
flex是flexible box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。設為flex布局以後，子元素的float、clear和vertical-align屬性將失效。
它即可以應用於容器中，也可以應用於行內元素，2023年，w3c提出了一種新的方案----flex布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支援，這意味著，現在就能很安全地使用這項功能。
採用flex布局的元素，稱為flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為flex專案（flex item），簡稱"專案"。容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。
以下6個屬性設定在容器上：
flex-direction 容器內專案的排列方向(預設橫向排列)
flex-wrap 容器內專案換行方式
flex-flow 以上兩個屬性的簡寫方式
justify-content 專案在主軸上的對齊方式
align-items 專案在交叉軸上如何對齊
align-content 定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
flex-wrap1 .box
屬性可選值的範圍為nowrap(預設)不換行、wrap換行（第一行在上方）和wrap-reverse（***~）
flex-flow
1 .box
寫法屬性中，將上述兩種方法的值用||連線即可
justify-content
1 .box
專案在主軸上的對齊方式(主軸究竟是哪個軸要看屬性flex-direction的設定了)
flex-start：在主軸上由左或者上開始排列
flex-end：在主軸上由右或者下開始排列
center：在主軸上居中排列
space-between：在主軸上左右兩端或者上下兩端開始排列
space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
1 .box
這裡面直接上說明的更清楚一些
以上介紹完了容器中的屬性，下面說一下容器中專案的屬性：
order 專案的排列順序。數值越小，排列越靠前，預設為0。
flex-grow 專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
flex-shrink 專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
flex-basis 在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。
flex 是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
align-self 允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
1 .item1 .item1 .item1 .item1 .item1 .itemCSS3 Flex布局（容器）
item1 item2 item3 item4 item5 flex flow屬性是flex direction屬性和flex wrap屬性的簡寫形式，預設值為row nowrap。justify content屬性定義了專案在主軸上的對齊方式。align items屬性定義專案在交叉軸上如何對齊。...
css3 Flex 布局教程
flex教程 flex例項篇 聖杯布局的實現 上部 header 和下部 footer 各自占領螢幕所有寬度。上下部之間的部分 container 是乙個三欄布局。三欄布局兩側寬度不變，中間部分自動填充整個區域。中間部分的高度是三欄中最高的區域的高度。header left left content...
CSS3 flex彈性布局
css3的flex布局用法 任何乙個容器都可以指定為flex布局 行內元素也可以使用flex布局。box webkit核心的瀏覽器，必須加上 webkit字首 box 設為flex布局後，子元素的float clear 和vertical align屬性將失效。基本概念 採用css3 flex布局的...