flex原理

• 能夠說出flex盒子的布局原理
• 能夠使用flex布局的常用屬性
• 能夠獨(dú)立完成攜程移動(dòng)端首頁(yè)案例

flex布局體驗(yàn)

flex布局原理

flex布局父項(xiàng)常見屬性

flex布局子項(xiàng)常見屬性

攜程網(wǎng)首頁(yè)案例制作

1.flex布局體驗(yàn)

布局方便適合移動(dòng)端

2.flex布局原理

flex彈性布局

3.常見父項(xiàng)屬性

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

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

4.常見子項(xiàng)屬性

flex子項(xiàng)目占的份數(shù)；align-self控制子項(xiàng)自己在側(cè)軸的排列方式；order屬性定義子項(xiàng)的排列順序

rem布局

1.rem基礎(chǔ)

em是相對(duì)于父元素字體大小來說的

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

2.媒體查詢

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

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

3.less基礎(chǔ)

為了維護(hù)css的弊端-css沒有計(jì)算能力

4.less變量

語(yǔ)法：@變量名：值；

5.less編譯

要將less轉(zhuǎn)換為css文件,下載easy less插件

6.less嵌套

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

7.less運(yùn)算

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

響應(yīng)式布局

1.響應(yīng)式開發(fā)

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

響應(yīng)式布局需要一個(gè)父級(jí)作為布局容器

2.Bootstrap前端開發(fā)框架

1.創(chuàng)建文件夾結(jié)構(gòu)，2.創(chuàng)建Html骨架結(jié)構(gòu)，3.引入相關(guān)樣式文件，4.書寫內(nèi)容

2.Bootstrap需要為頁(yè)面內(nèi)容和柵格系統(tǒng)包裹一個(gè).container容器

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。