flex原理

• 能夠說出flex盒子的布局原理
• 能夠使用flex布局的常用屬性
• 能夠獨立完成攜程移動端首頁案例

flex布局體驗

flex布局原理

flex布局父項常見屬性

flex布局子項常見屬性

攜程網首頁案例制作

1.flex布局體驗

布局方便適合移動端

2.flex布局原理

flex彈性布局

3.常見父項屬性

flex-direction:設置主軸方向；justify-content:設置主軸上的子元素排列方式重點單行；flex-wrap:設置子元素是否換行

align-content:設置側軸上的子元素的排列方式多行;align-items設置側軸上的子元素排列方式；flex-flow:復合屬性

4.常見子項屬性

flex子項目占的份數；align-self控制子項自己在側軸的排列方式；order屬性定義子項的排列順序

rem布局

1.rem基礎

em是相對于父元素字體大小來說的

rem是一個單位，相對于HTML元素的字體大小，可以通過修改html中的文字大小來修改頁面元素的大小，整體控制

2.媒體查詢

@media mediatype and|not|only(media feature){css-code}

媒體查詢可以根據不同的屏幕尺寸改變不同的樣式

3.less基礎

為了維護css的弊端-css沒有計算能力

4.less變量

語法：@變量名：值；

5.less編譯

要將less轉換為css文件,下載easy less插件

6.less嵌套

子元素樣式直接寫在父元素里，偽類，交集選擇器，偽元素選擇器要加&符號

7.less運算

任何數字，顏色或者變量都可以參與運算；運算符左右有空格隔開

響應式布局

1.響應式開發

通過媒體查詢達到適配不同設備的目的：手機小于768px，設置寬度為100%，類前綴.col-xs-； 平板 768px~992px設置寬度750px，類前綴.col-sm-; 桌面顯示器 992px-1200px設置寬度970px類前綴.col-md-；寬屏顯示大于1200px寬度設置1170px類前綴.col-lg-

響應式布局需要一個父級作為布局容器

2.Bootstrap前端開發框架

1.創建文件夾結構，2.創建Html骨架結構，3.引入相關樣式文件，4.書寫內容

2.Bootstrap需要為頁面內容和柵格系統包裹一個.container容器

3.柵格系統中不僅有行也有列的概念class="col-lg-3"表示每個盒子占三份，先有容器再有行再有列

[class^="col"]選擇這些類的語法，一般分為12份

總結

以上是生活随笔為你收集整理的高级教程-flex的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。