css3 彈性佈局和多列布局
彈性盒子基礎
彈性盒子(Flexible Box)是css3中盒子模型的彈性佈局，在傳統的佈局方式上增長了不少靈活性。css
定義一個彈性盒子
在父盒子上定義display屬性：html
#box{
display: -webkit-flex; //webkit內核瀏覽器的兼容設置，下同
display: flex;
}
固然還有行內佈局的彈性盒子css3
#box{
display: -webkit-inline-flex;
display: inline-flex;
}
注意，設爲Flex佈局之後，子元素的float、clear和vertical-align屬性將失效。web
彈性盒子兼容狀況
- Chrome 29+
- Firefox 28+
- Internet Explorer 11+
- Opera 17+
- Safari 6.1+ (prefixed with -webkit-)
- Android 4.4+
- iOS 7.1+ (prefixed with -webkit-)
彈性盒子概念
彈性盒子兩個軸如圖：瀏覽器
- 主軸(橫軸, main axis)
- 交叉軸(縱軸, cross axis)
彈性盒子屬性
在研究具體屬性前，先創建一個基本模板，必要時修改一下部分參數：佈局
<!-- html部分 -->
<div id="flex-box">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
</div>
<!-- css部分 -->
#flex-box{
width: 200px;
height: 200px;
border: 1px solid #06f;
display: flex;
display: -webkit-flex;
}
.flex-item{
height: 30px;
width: 30px;
color: #f00;
font-size: 20px;
line-height: 30px;
text-align: center;
background-color: #8f0;
border: 1px solid #f00;
}
- flex-direction
排列方向設置flex
#flex-box{
flex-direction: row | row-reverse | column | column-reverse;
/* @value row 從左到右(默認)*/
/* @value row-reverse 從右到左*/
/* @value column 從上到下*/
/* @value column-reverse 從下到上*/
}
- flex-wrap
換行設置spa
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
/* @value nowrap 不換行(默認)*/
/* @value wrap 換行*/
/* @value wrap-reverse 換行 層倒序*/
}
- flex-flow
flex-direction和flex-wrap的縮寫屬性code
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
- justify-content
水平方向上對齊htm
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
/* value flex-start 左對齊(默認)*/
/* value flex-end：右對齊*/
/* value center： 居中*/
/* value space-between：兩端對齊，項目之間的間隔都相等*/
/* value space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍*/
- align-items
垂直方向上對齊
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
/* value flex-start 交叉軸的起點對齊*/
/* value flex-end 交叉軸的終點對齊*/
/* value center 交叉軸的中點對齊*/
/* value baseline 項目的第一行文字的基線對齊*/
/* value stretch 若是項目未設置高度或設爲auto，將佔滿整個容器的高度(默認)*/
- align-content
多根軸線的對齊方式
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
/* value flex-start 與交叉軸的起點對齊*/
/* value flex-end 與交叉軸的終點對齊*/
/* value center 與交叉軸的中點對齊*/
/* value space-between 與交叉軸兩端對齊，軸線之間的間隔平均分佈*/
/* value space-around 每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍*/
/* value stretch 軸線佔滿整個交叉軸(默認值)*/
子元素屬性
- order: 屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0
- flex-grow: 屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大
- flex-shrink: 屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。
- flex-basis: 屬性定義了在分配多餘空間以前，項目佔據的主軸空間它的默認值爲auto，即項目的原本大小。
- flex: 屬性是flex-grow, flex-shrink和flex-basis的簡寫。
- align-self: 屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。
多列
- column-count 規定元素應該被分隔的列數
- column-fill 規定如何填充列
- column-gap 規定列之間的間隔
- column-rule 設置全部column-rule-*屬性的簡寫屬性
- column-rule-color 規定列之間規則的顏色
- column-rule-style 規定列之間規則的樣式
- column-rule-width 規定列之間規則的寬度
- column-span 規定元素應該橫跨的列數
- column-width 規定列的寬度
- columns 規定設置column-width和column-count的簡寫屬性
實例
骰子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>9 faces Dice</title>
</head>
<style>
body{
padding: 0;
margin: 0;
}
#demo{
display: flex;
background-color: #444;
}
.dice{
width: 90px;
height: 90px;
border-radius: 22px;
margin: 20px;
padding: 10px;
box-sizing: border-box;
border: 2px solid #aaa;
background-color: #eee;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.dot{
width: 20px;
height: 20px;
background-color: #222;
border-top: 2px solid #000;
box-sizing: border-box;
/*box-shadow: 0px 0px 2px #000;*/
border-radius: 20px;
}
.line{
display: flex;
justify-content: space-between;
}
#one{
justify-content: center;
align-items: center;
}
#two{
align-items: center;
}
#three .line:nth-of-type(2){
justify-content: center;
}
#three .line:nth-of-type(3){
justify-content: flex-end;
}
#five .line:nth-of-type(2){
justify-content: center;
}
</style>
<body>
<div id="demo">
<div id="one" class="dice">
<div class="line">
<div class="dot"></div>
</div>
</div>
<div id="two" class="dice">
<div class="line">
<div class="dot"></div>
</div>
<div class="line">
<div class="dot"></div>
</div>
</div>
<div id="three" class="dice">
<div class="line">
<div class="dot"></div>
</div>
<div class="line">
<div class="dot"></div>
</div>
<div class="line">
<div class="dot"></div>
</div>
</div>
<div id="four" class="dice">
<div class="line">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="line">
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div id="five" class="dice">
<div class="line">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="line">
<div class="dot"></div>
</div>
<div class="line">
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div id="six" class="dice">
<div class="line">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="line">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="line">
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div id="seven" class="dice">
<div class="line">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="line">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="line">
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div id="eight" class="dice">
<div class="line">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="line">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="line">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div id="nine" class="dice">
<div class="line">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="line">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="line">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</div>
</body>
</html>
瀑布流圖
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
ul{
width: 1000px;
margin: 0 auto;
padding: 0;
columns: 4;
list-style: none;
column-gap: 2px;
column-fill: balance;
}
ul li {
margin: 4px 0;
}
ul li img{
width:240px;
}
</style>
</head>
<body>
<ul>
<li><img src="img/1.jpeg" alt=""></li>
<li><img src="img/2.jpeg" alt=""></li>
<li><img src="img/3.jpeg" alt=""></li>
<li><img src="img/4.jpeg" alt=""></li>
<li><img src="img/5.jpeg" alt=""></li>
<li><img src="img/6.jpeg" alt=""></li>
<li><img src="img/7.jpeg" alt=""></li>
<li><img src="img/8.jpeg" alt=""></li>
<li><img src="img/9.jpeg" alt=""></li>
<li><img src="img/10.jpeg" alt=""></li>
<li><img src="img/11.jpeg" alt=""></li>
<li><img src="img/12.jpeg" alt=""></li>
<li><img src="img/13.jpeg" alt=""></li>
<li><img src="img/14.jpeg" alt=""></li>
<li><img src="img/15.jpeg" alt=""></li>
</ul>
</body>
</html>
柵格
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
#grid-demo{
width: 1000px;
margin: 0 auto;
}
.grid{
display: flex;
margin: 20px 0;
height: 60px;
}
.grid .grid-item{
flex-grow: 1;
background-color: #eee;
height: 60px;
line-height: 60px;
font-size: 26px;
width: 5%;
text-align: center;
margin: 0 10px;
}
.grid .col-10{
flex-basis: 83.3333%
}
.grid .col-8{
flex-basis: 66.6666%;
}
.grid .col-6{
flex-basis: 50%;
}
.grid .col-4{
flex-basis: 33.3333%;
}
.grid .col-3{
flex-basis: 25%;
}
.grid .col-2{
flex-basis: 16.6667%;
}
</style>
</head>
<body>
<div id="grid-demo">
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">1</div>
<div class="grid-item">1</div>
<div class="grid-item">1</div>
<div class="grid-item">1</div>
<div class="grid-item">1</div>
<div class="grid-item">1</div>
<div class="grid-item">1</div>
<div class="grid-item">1</div>
<div class="grid-item">1</div>
<div class="grid-item">1</div>
<div class="grid-item">1</div>
</div>
<div class="grid">
<div class="grid-item">2</div>
<div class="grid-item">2</div>
<div class="grid-item">2</div>
<div class="grid-item">2</div>
<div class="grid-item">2</div>
<div class="grid-item">2</div>
</div>
<div class="grid">
<div class="grid-item">3</div>
<div class="grid-item">3</div>
<div class="grid-item">3</div>
<div class="grid-item">3</div>
</div>
<div class="grid">
<div class="grid-item">4</div>
<div class="grid-item">4</div>
<div class="grid-item">4</div>
</div>
<div class="grid">
<div class="grid-item">6</div>
<div class="grid-item">6</div>
</div>
<div class="grid">
<div class="grid-item col-8">8</div>
<div class="grid-item col-4">4</div>
</div>
<div class="grid">
<div class="grid-item">12</div>
</div>
</div>
</body>
</html>
固定底欄
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
body{
margin: 0;
padding: 0;
}
#demo{
display: flex;
flex-direction: column;
min-height: 100vh;
}
header, footer{
height: 100px;
background-color: darkblue;
color: white;
text-align: center;
line-height: 100px;
}
.flex-body{
flex-grow: 1;
}
</style>
</head>
<body>
<div id="demo">
<header>I am header!</header>
<div class="flex-body">I am body!</div>
<footer>I am footer!</footer>
</div>
</body>
</html>
相關文章
- 1. css3 彈性佈局
- 2. css3多列布局
- 3. css3 FlexBox 彈性佈局
- 4. CSS3 —— Flex 彈性佈局
- 5. CSS3彈性盒佈局
- 6. CSS3彈性盒子佈局
- 7. css3——flex 彈性佈局
- 8. CSS3之彈性佈局
- 9. CSS3 彈性盒子佈局
- 10. css3彈性盒子佈局
- 更多相關文章...
- • ASP.NET MVC - 樣式和佈局 - ASP.NET 教程
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • JDK13 GA發佈：5大特性解讀
- • 再有人問你分佈式事務，把這篇扔給他
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. css3 彈性佈局
- 2. css3多列布局
- 3. css3 FlexBox 彈性佈局
- 4. CSS3 —— Flex 彈性佈局
- 5. CSS3彈性盒佈局
- 6. CSS3彈性盒子佈局
- 7. css3——flex 彈性佈局
- 8. CSS3之彈性佈局
- 9. CSS3 彈性盒子佈局
- 10. css3彈性盒子佈局