伸縮布局
參考鏈接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex
以前在網頁開發程序中，布局一直是不可或缺的，從最早的表格布局，到后來的DIV+CSS布局，現在再到CSS3的伸縮布局，
CSS3在布局方面做了非常大的改進，使得我們對塊級元素的布局排列變得十分靈活，適應性非常強，其強大的伸縮性，在回應式開中可以發揮極大的作用，
主軸：Flex容器的主軸主要用來配置Flex專案，默認是水平方向
側軸：與主軸垂直的軸稱作側軸，默認是垂直方向的
方向：默認主軸從左向右，側軸默認從上到下
主軸和側軸并不是固定不變的，通過flex-direction可以互換，
?
使用說明
- 指定一個父盒子為伸縮盒子，即指定：
display: flex - 明確你需要的主側軸方向，并設定
flex-direction默認是row ，縱向是column - 設定父盒子的屬性來調整子元素的布局，例如
align-items - 設定子盒子的寬高或者比例，完成具體的子元素在父盒子中的布局
各個屬性介紹
flex-direction調整主軸方向（默認為水平方向）justify-content調整主軸對齊align-items調整側軸對齊（子元素可以使用align-self覆寫）flex-wrap控制是否換行align-content堆疊（由flex-wrap產生的獨立行）對齊flex-flow是flex-direction+flex-wrap的簡寫形式flex是子專案在主軸的縮放比例，不指定flex屬性，則不參與伸縮分配order控制子專案的排列順序，正序方式排序，從小到大
寫在最后面！！！~~
這有一些代碼關于flex
歡迎歡迎~~~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/90113.html
標籤：Html/Css
下一篇：彈性盒子中的order