關於flex佈局
flex佈局：
flex佈局中，一些屬性定義會失效，如float、clear等css
關於flex佈局的屬性：html
主軸和交叉軸
在flex佈局中，能夠想象爲在二維座標系中，主軸爲x軸，交叉軸爲y軸，而且交叉軸和主軸呈90度，flex-direction能夠設置主軸的方向瀏覽器
容器和項目：
在flex佈局中有兩種角色，容器能夠理解爲父元素，項目能夠理解爲子元素bash
容器：六個屬性
- flex-direction：決定主軸的方向
flex-direction：column佈局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
.container{
display: flex;
flex-direction: row;
}
.container>div{
background-color: yellow;
width: 40px;
height: 40px;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
複製代碼
flex-direction：row（默認）flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
.container{
display: flex;
flex-direction: column;
}
.container>div{
background-color: yellow;
width: 40px;
height: 40px;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
複製代碼
- flex-wrap：決定主軸裏的項目是否換行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
.container{
display: flex;
flex-direction: row;
width: 250px;
/*默認爲flex-wrap：nowrap*/
flex-wrap: wrap;
}
.container>div{
background-color: yellow;
width: 40px;
height: 40px;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
複製代碼
- flex-flow：flex-direction和flex-wrap的集合
- align-items：項目的對齊方式（交叉軸上的對齊）
align-items:flex-endui
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
.container{
display: flex;
flex-direction: row;
width: 600px;
height: 300px;
/*默認爲flex-wrap：nowrap*/
flex-wrap: wrap;
align-items: flex-end;
}
.container>div{
background-color: yellow;
width: 40px;
height: 40px;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
複製代碼
align-items:centerurl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
.container{
display: flex;
flex-direction: row;
width: 600px;
height: 300px;
/*默認爲flex-wrap：nowrap*/
flex-wrap: wrap;
align-items: center;
}
.container>div{
background-color: yellow;
width: 40px;
height: 40px;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
複製代碼
- justify-content：容器中項目的對齊方式（主軸軸上的對齊）
justify-content：flex-endspa
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
.container{
display: flex;
flex-direction: row;
width: 600px;
height: 300px;
/*默認爲flex-wrap：nowrap*/
flex-wrap: wrap;
align-items: center;
outline: 1px solid black;
justify-content: flex-end;
}
.container>div{
background-color: yellow;
width: 40px;
height: 40px;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div></div><div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>
</div>
</body>
</html>
複製代碼
justify-content: center3d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
.container{
display: flex;
flex-direction: row;
width: 600px;
height: 300px;
/*默認爲flex-wrap：nowrap*/
flex-wrap: wrap;
align-items: center;
outline: 1px solid black;
justify-content: center;
}
.container>div{
background-color: yellow;
width: 40px;
height: 40px;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div></div><div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>
</div>
</body>
</html>
複製代碼
- align-content：多根軸線的對齊方式(一根軸線無效)
align-content: flex-end
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
.container{
display: flex;
flex-direction: row;
width: 600px;
height: 300px;
/*默認爲flex-wrap：nowrap*/
flex-wrap: wrap;
align-items: center;
outline: 1px solid black;
justify-content: center;
align-content: flex-end;
}
.container>div{
background-color: yellow;
width: 40px;
height: 40px;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>
</div>
</body>
</html>
複製代碼
項目：六個屬性
- order：排列順序
先初始化一個頁面以下：
咱們將偶數的div排到前面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
.container{
display: flex;
flex-direction: row;
width: 600px;
height: 300px;
/*默認爲flex-wrap：nowrap*/
flex-wrap: wrap;
align-items: center;
outline: 1px solid black;
justify-content: center;
/*align-content: flex-end;*/
}
.container>div{
background-color: yellow;
width: 40px;
height: 40px;
margin: 10px;
}
.container>div:nth-child(2n+1){
order: 3;
}
</style>
</head>
<body>
<div class="container">
<div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div>
</div>
</body>
</html>
複製代碼
運行效果：
- flex-grow：有剩餘空間，決定是否擴張（默認：0）
未佔滿一個主軸時：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
.container{
display: flex;
flex-direction: row;
width: 600px;
height: 300px;
/*默認爲flex-wrap：nowrap*/
flex-wrap: nowrap;
align-items: center;
outline: 1px solid black;
justify-content: center;
/*align-content: flex-end;*/
}
.container>div{
background-color: yellow;
flex-basis: 40px;
margin: 10px;
flex-grow: 1;
/*flex-shrink: 0;*/
}
</style>
</head>
<body>
<div class="container">
<div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div>
</div>
</body>
</html>
複製代碼
- flex-shrink：太滿，決定是否縮小（默認：1）
未佔滿一個主軸時：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
.container{
display: flex;
flex-direction: row;
width: 600px;
height: 300px;
/*默認爲flex-wrap：nowrap*/
flex-wrap: nowrap;
align-items: center;
outline: 1px solid black;
justify-content: center;
/*align-content: flex-end;*/
}
.container>div{
background-color: yellow;
flex-basis: 40px;
margin: 10px;
/*flex-shrink: 0;*/
}
</style>
</head>
<body>
<div class="container">
<div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div>
</div>
</body>
</html>
複製代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
.container{
display: flex;
flex-direction: row;
width: 600px;
height: 300px;
/*默認爲flex-wrap：nowrap*/
flex-wrap: nowrap;
align-items: center;
outline: 1px solid black;
justify-content: center;
/*align-content: flex-end;*/
}
.container>div{
background-color: yellow;
flex-basis: 40px;
margin: 10px;
flex-shrink: 0;
}
</style>
</head>
<body>
<div class="container">
<div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div>
</div>
</body>
</html>
複製代碼
- flex-basis：項目的寬度
- flex：flex-grow，flex-shrink，flex-basis
- align-self：項目在交叉軸上的排列
關於雪碧圖
雪碧圖：background-position 響應式界面下：background-size：定位雪碧圖的大小 給定一張圖片，咱們想象是不少圖片的組合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
.container{
width: 50px;
height: 50px;
background-image: url("./test.png");
background-position: -60px 0px;
outline: 1px solid black;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
複製代碼
運行效果：
關於雪碧圖的兼容： 一、兼容部分老的IE瀏覽器：能夠使用background-position-x & background-position-y進行兼容 二、兼容部分老版瀏覽器：使用css hock技術
相關文章
- 1. 關於flex佈局兼容
- 2. 學習關於display ：flex 佈局問題！
- 3. 關於display的box和flex佈局
- 4. 關於自適應佈局box 與 flex
- 5. 關於flex佈局的應用
- 6. 關於css佈局的記錄(一) --table和flex佈局
- 7. Flex 佈局相關用法
- 8. Flex佈局和Grid佈局
- 9. CSS佈局之flex佈局
- 10. Flex佈局（彈性佈局）
- 更多相關文章...
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • ASP.NET MVC - 樣式和佈局 - ASP.NET 教程
- • NewSQL-TiDB相關
- • ☆基於Java Instrument的Agent實現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. js中 charCodeAt
- 2. Android中通過ViewHelper.setTranslationY實現View移動控制（NineOldAndroids開源項目）
- 3. 【Android】日常記錄：BottomNavigationView自定義樣式，修改點擊後圖片
- 4. maya 文件檢查 ui和數據分離 （一）
- 5. eclipse 修改項目的jdk版本
- 6. Android InputMethod設置
- 7. Simulink中Bus Selector出現很多? ? ?
- 8. 【Openfire筆記】啓動Mac版Openfire時提示「系統偏好設置錯誤」
- 9. AutoPLP在偏好標籤中的生產與應用
- 10. 數據庫關閉的四種方式
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 關於flex佈局兼容
- 2. 學習關於display ：flex 佈局問題！
- 3. 關於display的box和flex佈局
- 4. 關於自適應佈局box 與 flex
- 5. 關於flex佈局的應用
- 6. 關於css佈局的記錄(一) --table和flex佈局
- 7. Flex 佈局相關用法
- 8. Flex佈局和Grid佈局
- 9. CSS佈局之flex佈局
- 10. Flex佈局（彈性佈局）