flex 基本概念
flex布局是w3c在2023年提出了一種彈性的自適應布局方案，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支援。
flex的核心概念是軸和容器。其中容器包裹在外層的是父容器，內層的是子容器。容器預設存在兩根軸：水平的主軸main axis和垂直的交叉軸cross axis。主軸的開始位置與邊框的交叉點是main start，結束位置是main end；交叉軸的開始位置是cross start，結束位置是cross end。子容器預設沿主軸排列。每個字容器佔據的主軸空間是main size，佔據的交叉軸空間是cross size。
使用flex實現水平垂直居中：
.container
display
: flex|inline-flex;
flex-direction
: row | row-reverse | column | column-reverse;
flex-wrap
: nowrap | wrap | wrap-reverse;
flex-flow
: || ;
justify-content
: flex-start | flex-end | center | space-between | space-around;
align-items
: flex-start | flex-end | center | baseline | stretch;
align-content
: flex-start | flex-end | center | space-between | space-around | stretch;
設定容器為flex布局模式，其中flex為塊級布局，inline-flex為行內布局。
.container
flex-direction屬性決定了主軸的方向。預設方向是row即是left to right。
flex-wrap屬性決定了當子元素沿軸線排列不下是否換行排列。
.container
flex-flow是屬性flex-direction和flex-wrap的簡寫形式。
.container
justify-content屬性決定了子元素沿主軸的對其方式。
.container
align-items屬性決定了子元素沿交叉軸的對其方式。
.container
align-content屬性決定了多根軸線的對齊方式。
.container
order:;
flex-grow:;
flex-shrink:;
flex-basis
:| auto;
flex
: none | [ ? || ];
align-self
: auto | flex-start | flex-end | center | baseline | stretch;
order是屬性決定了子元素的排列順序，數字越小的在前。
.item
flex-grow是屬性決定當有空餘空間時子元素的放大比例。
.item
flex-shrink是屬性決定當空間不足時子元素的縮小比例。
.item
flex-basis是屬性決定計算剩餘空間之前子元素預設的大小。
.item
flex-flow是屬性flex-grow、flex-shrink、flex-basis的簡寫形式。
.item
flex-self屬性決定了單個子元素與其他子元素的對齊方式。
.item
flex 布局 flex教程
簡介 2009年，w3c提出了一種新的方案 flex布局，可以簡便 完整 響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支援，這意味著，現在就能很安全地使用這項功能。flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布...
flex 平鋪布局 Flex 布局教程
網頁布局 layout 是 css 的乙個重點應用。布局的傳統解決方案，基於盒狀模型，依賴 display 屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c 提出了一種新的方案 flex 布局，可以簡便 完整 響應式地實現各種頁...
flex布局教程
1.歷史 2009年,w3c提出了一種新的方案 flex 布局，可以簡便 完整 響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支援，這意味著，現在就能很安全地使用這項功能。2.了解 採用 flex 布局的元素，稱為 flex 容器 flex container 簡稱 容器 它的所有子元素自...