/*
當軸線超過一條時,flex容器把多條軸線當做元素對待,可以進行對齊
stretch 預設 當元素寬度沒有設定,軸線可以拉伸
flex-start 向左對齊
flex-end 向右對齊
center 居中對齊
space-between 兩端對齊,元素之間空白等比切分
space-around 軸線兩邊空白等比切分
*/align-content
: space-around;
/*
order : 可以設定元素的優先順序,越小優先順序越高
flex-grow: 0; 預設是0 用於設定元素的放大比例
flex-shrink: ; 設定元素縮小比例 預設為1 ,當為0時不進行縮放
flex-basis 設定元素固定大小
align-self 重寫align-items父專案
*/
前端布局之Flex布局
傳統布局方式基於盒模型，依賴display屬性 position屬性 float屬性。由於傳統布局一些操作複雜，2009年w3c提出了flex布局，可以簡便 響應式的實現各種布局，並且能夠相容所有瀏覽器。區別於傳統布局的 盒子 在flex布局中稱為 flex容器 flex container 其所有...
web前端布局之flex布局
總的來說，flex布局的原理通過給父元素新增flex屬性，來控制子元素的位置和排列方式。採用flex布局的元素稱為flex容器。flex容器中存在兩條軸，分別為主軸和側軸，容器中的每個單元稱為flex專案。在容器上可以設定6個屬性 分別為 flex direction flex wrap flex ...
前端基礎 flex布局
父元素設為 flex 布局以後，子元素的float clear和vertical align屬性將失效。採用flex布局的元素，稱為 容器 所有子元素稱為 專案 容器預設存在兩根軸 水平的主軸 main axis 和垂直的交叉軸 cross axis 主軸的開始位置 與邊框的交叉點 叫做main s...