布局方式：
可伸縮給父級元素新增display：flex，再給子元素新增flex：1（不加單位，表示該子元素佔1份）一般 配合min-width和max-width使用，如果不指定flex就不參與伸縮，可固定導航欄，讓兩邊伸縮
追加屬性flex-direction：column可以是子元素垂直排列
對其方式：水平對齊：在父元素上加justify-content:center水平對齊
justify-content:space-between子元素中間有均勻空隙
垂直對齊：align-items：center
剛開始學習使用部落格，先記錄一下工作中的知識點
頁面布局之flex布局
flex布局 flex布局也叫作彈性盒子布局，可以簡便 完整 響應式的實現各種頁面布局，同時也支援所有的瀏覽器。父級元素設定css樣式為 display flex。內容的位置用justify content來控制，常用的屬性有 space between space around center le...
前端布局之Flex布局
傳統布局方式基於盒模型，依賴display屬性 position屬性 float屬性。由於傳統布局一些操作複雜，2009年w3c提出了flex布局，可以簡便 響應式的實現各種布局，並且能夠相容所有瀏覽器。區別於傳統布局的 盒子 在flex布局中稱為 flex容器 flex container 其所有...
前端基礎 flex布局
父元素設為 flex 布局以後，子元素的float clear和vertical align屬性將失效。採用flex布局的元素，稱為 容器 所有子元素稱為 專案 容器預設存在兩根軸 水平的主軸 main axis 和垂直的交叉軸 cross axis 主軸的開始位置 與邊框的交叉點 叫做main s...