[TOC]
#### 簡介:
? Flex是Flexible Box的縮寫,意為"彈性布局"用來為盒狀模型提供最大的靈活性。
? 任何一個容器都可以指定為Flex布局。
? 采用Flex布局的元素,稱為Flex容器(flex container),簡稱"容器"。
? 它的所有子元素自動成為容器成員,稱為Flex項目(flex item),簡稱"項目"。
eg:
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
overflow: hidden;
border: 2px solid purple;
/*將外層容器轉換成彈性盒模型模式*/
display: flex;
}
ul li{
list-style: none;
width: 130px;
width: 300px;
height: 200px;
border: 2px solid dodgerblue;
background: yellow;
line-height: 200px;
text-align: center;
font-size: 30px;
}
</style>
<body>
<!--彈性盒模型容器中的項目默認在主軸上排列-->
<!--子元素默認都排列在主軸上,不換行-->
<!--如果項目總寬度小于容器寬度,就正常排列,按照設置的寬度-->
<!--如果項目總寬度大于容器寬度,那么子元素就均分容器寬度,設置寬度無效-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
#### flex-direction 設置主軸的方向
該屬性決定主軸的方向(即項目的排列方向)
? row(默認值):主軸為水平方向,起點在左端。
? row-reverse:主軸為水平方向,起點在右端。
? column:主軸為垂直方向,起點在上沿。
? column-reverse:主軸為垂直方向,起點在下沿。
eg:
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
overflow: hidden;
border: 2px solid purple;
/*將外層容器轉換成彈性盒模型模式*/
width: 1100px;
height: 550px;
margin: 30px auto;
display: flex;
/*設置主軸方向*/
/*flex-direction: row-reverse;*/
flex-direction: column-reverse;
}
ul li{
list-style: none;
width: 130px;
width: 300px;
height: 200px;
border: 2px solid dodgerblue;
background: yellow;
/*line-height: 200px;*/
text-align: center;
font-size: 30px;
}
</style>
<body>
<!--主軸和交叉軸永遠是垂直的-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
#### justify-content
? 定義了項目在主軸上的對齊方式
? flex-start(默認值):左對齊
? flex-end:右對齊
? center: 居中
? space-between:兩端對齊,項目之間的間隔都相等。
? space-around:每個項目兩側的間隔相等。所以,項目之間的間隔比項目與邊框的間隔大一倍。
ul{
overflow: hidden;
border: 2px solid purple;
width: 1100px;
height: 550px;
margin: 30px auto;
display: flex;
/*主軸上的排列方式*/
justify-content: space-between;
}
#### align-items
? 定義項目在交叉軸上如何對齊。
? flex-start:交叉軸的起點對齊。
? flex-end:交叉軸的終點對齊。
? center:交叉軸的中點對齊。
? baseline: 項目的第一行文字的基線對齊。
? stretch(默認值):如果項目未設置高度或設為auto,將占滿整個容器的高度。
ul{
overflow: hidden;
border: 2px solid purple;
width: 1100px;
height: 550px;
margin: 30px auto;
display: flex;
/*主軸上的排列方式*/
justify-content: space-between;
/*元素在交叉軸上的對齊方式*/
align-items: stretch;
}
<!--主軸和交叉軸永遠是垂直的-->
<ul>
<li style="height: 200px;">1</li>
<li style="height: 300px;">2</li>
<li style="height: auto;">3</li>
<li style="height: 260px;">4</li>
<li style="height: 320px;">5</li>
</ul>
#### flex-wrap:
? 默認情況下,項目都排在一條線(又稱"軸線")上。flex- wrap屬性定義,如果一條軸線排不下,如何換行。
? nowrap(默認):不換行。
? wrap:換行,第一行在上方。
? wrap-reverse:換行,第一行在下方。
eg:
ul{
overflow: hidden;
border: 2px solid purple;
width: 1100px;
height: 550px;
margin: 30px auto;
display: flex;
/*主軸上的排列方式*/
justify-content: space-between;
/*換行*/
/*如果子元素總寬度大于父級元素寬度,那么就一行能放多少就放多少,放不下的就被擠到下一行*/
/*flex-wrap: wrap-reverse;*/
flex-wrap: wrap;
}
<body>
<!--主軸和交叉軸永遠是垂直的-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
#### align-content
? 定義了多根軸線的對齊方式。如果項目只有一根軸線,該屬性不起作用。
? flex-start:與交叉軸的起點對齊。
? flex-end:與交叉軸的終點對齊。
? center:與交叉軸的中點對齊。
? space-between:與交叉軸兩端對齊,軸線之間的間隔平均分布。
? space-around:每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。
? stretch(默認值):軸線占滿整個交叉軸。
eg:
ul{
overflow: hidden;
border: 2px solid purple;
width: 1100px;
height: 550px;
margin: 30px auto;
display: flex;
/*主軸上的排列方式*/
justify-content: space-between;
/*換行*/
/*如果子元素總寬度大于父級元素寬度,那么就一行能放多少就放多少,放不下的就被擠到下一行*/
/*flex-wrap: wrap-reverse;*/
flex-wrap: wrap;
/*指定多行在交叉軸上的對齊方式*/
align-content: space-around;
}
<body>
<!--主軸和交叉軸永遠是垂直的-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
#### order
? 定義項目的排列順序。數值越小,排列越靠前,默認為0
eg:
<ul>
<li>1</li>
<li style="order: 5;">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li style="order: -5;">6</li>
<li>7</li>
</ul>
#### flex
設置比例:
<ul>
<li>1</li>
<li style="flex: 3;">2</li>
<li>3</li>
<li>4</li>
<li style="flex: 2;">5</li>
<li>6</li>
<li>7</li>
</ul>
- html&jquery網頁特效
- 標簽分類及特點
- 關于文字標簽
- 網頁定時跳轉
- css透明度和插件
- 0.前端常用工具
- 1.tab切換效果
- 2.tab切換效果多個代碼復用
- 3.百度新聞導航條效果
- 4.解決鼠標移入過快的問題
- 5.滾動條位置
- 6.元素尺寸
- 7.全選反選操作
- 8.固定定位
- 9.開關效果
- 10.節點操作
- 11.仿小米商品展示效果
- 12.仿小米商品展示效果復用
- 13.固定導航欄效果
- 14.凡客輪播圖效果
- 15.頂部下滑廣告效果
- 16.京東左右滑動輪播圖
- 17.京東左右滑動無縫輪播圖
- 18.選擇器
- 19.篩選
- 20.開關效果
- 21.滑動效果
- 22.小米商品效果css實現
- 23.元素水平垂直居中
- laravel5.6
- LARAVEL 介紹&安裝
- javascript & css 腳手架
- php常用工具類
- 安裝laravel-ide-helper增強代碼提示
- 使用migration創建表和數據填充
- 解決mysql5.7以下laravel不能執行數據遷移的問題
- 路由
- 登陸操作自定義模型
- 使用中間件middleware進行登錄權限驗證
- 進行表單驗證處理
- 使用laracasts-flash定制消息提示
- 資源路由
- 寶塔面板安裝fileinfo擴展
- laravel上傳處理與使用hdjs快速實現前端上傳組件
- thinkphp
- phpstorm
- phpstorm安裝插件
- 定義快捷鍵
- 關閉提示
- 將代碼實時同步到遠程服務器
- sublime
- composer
- git使用
- git安裝和配置作者信息
- git新建項目和維護項目
- git日志操作
- git別名操作
- git分支操作
- git生成發布壓縮包
- git系統別名
- gitrebase操作
- 使用SSH與GITHUB遠程服務器進行無密碼連接
- 本地版本庫主動使用remote與遠程GITHUB進行關聯
- 本地分支與GITHUB遠程分支同步
- 項目實戰-新入職員工參與項目開發時分支使用
- 自動部署
- ios開發
- linux
- 1.centos6.5 mysql忘記登入密碼
- html5
- 標簽
- 表單
- 音頻與視頻
- webstorage儲存
- canvas
- css3
- 01.CSS3布局
- 02.transition動畫
- 03.animation動畫
- 04.flex彈性盒模型
- Less
- gulpjs
- es6
- ES6模塊化
- let和const命令
- ES6函數擴展&解構賦值
- JavaScript之數據遍歷
- class類
- Set和Map數據結構
- Vue
- 1.創建第一個應用
- 2.屬性動態綁定
- 3.表達式
- 4.解決phpstorm不識別ECMASCRIPT6語法的問題
- 5.watch監聽屬性
- 6.使用object與array控制class
- 7.條件渲染
- 8.循環
- 9.變異方法
- 10.事件
- 11.表單
- 12.組件
- 13.css過渡動
- 14.js庫控制vue過渡動作
- 15.自定義指令directive
- 16.使用vue-cli初始化單頁面應用
- 17.Vue-router路由
- 18.vuex
- 19.vue-cli
- webpack
- zanui
- nodejs