css3伸縮佈局盒模型
阿新 • • 發佈:2018-12-05
CSS3 伸縮佈局盒模型
CSS3引入的佈局模式Flexbox佈局,主要思想是讓容器有能力讓其子專案能夠改變其寬度,高度,以最佳方式填充可用空間。Flex容器使用Flex專案可以自動放大與收縮,用來填補可用的空閒空間。更重要的是,Flexbox佈局方向不可預知,不像常規的佈局(塊級從上到下,內聯從左到右),而那些常規的適合頁面佈局,但對於支援大型或者複雜的應用程式就缺乏靈活性。
如果常規佈局是基於塊和內聯文字流方向,那麼Flex佈局就是基於“Flex-flow”方向。先來了解一下伸縮盒模型的一些專用術語。
主軸起點,主軸終點:Flex專案的配置從容器的主軸起點邊開始,往主軸終點邊結束。
主軸長度:Flex專案在主軸方向的寬度或高度就是專案的主軸長度,Flex專案的主軸長度屬性是width或height屬性,由哪一個對著主軸方向決定。
側軸:與主軸垂直的軸稱作側軸,是側軸方向的延伸。
側軸起點,側軸終點:伸縮行的配置從容器的側軸起點邊開始,往側軸終點邊結束。
側軸長度:Flex專案在側軸方向的寬度或高度就是專案的側軸長度,Flex專案的側軸長度屬性是widht或height屬性,由哪一個對著主軸方向決定。
Flex佈局的語法規範經過幾年發生了很大的變化,也給Flexbox的使用帶來一定的侷限性,因為語法規範版本眾多,瀏覽器支援不一致,致使Flexbox佈局使用不多。Flexbox佈局語法規範主要分成三種。
舊版本,2009年版本,是最早的伸縮佈局,各大主流瀏覽器對其支援性略有不同,可惜的是,對Flexbox佈局的各屬性支援也不完全,在使用時還需新增各瀏覽器的字首。
混合版本,2011年版本,只有IE10支援。
最新版本,2012年版本,除了Safari瀏覽器不支援外,其他最新瀏覽器都支援這個版本。
Flex容器屬性
display
要改變元素的模式為伸縮容器,需要使用display屬性。 display:flex | inline-flex
flex:設定為塊級伸縮容器。
inline-flex:設定為內聯級伸縮容器。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin:0;
padding:0;
}
div>div{
width:100px;
height:100px;
line-height:100px;
border:1px solid;
text-align:center;
margin:10px;
}
#box{
display:-moz-box;
display:-webkit-box;
display:-ms-flexbox;
display:-webkit-flex;
display:flex;
border:1px solid;
margin:20px;
}
#inline{
display:-moz-inline-box;
display:-webkit-inline-box;
display:-ms-inline-flexbox;
display:-webkit-inline-flexbox;
display:inline-flex;
border:1px solid;
margin:20px;
}
</style>
</head>
<body>
<div id="box">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
<div id="inline">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
</body>
</html>
塊級伸縮容器與內聯級伸縮容器類似,預設都是從左往右排列,唯一不同的是塊級伸縮容器獨佔一行,而內聯級伸縮容器隨著內容改變。
Flex容器不是塊容器,因此有些設計用來控制塊佈局的屬性在伸縮佈局中不適用。浮動無法影響伸縮容器,而且伸縮容器的margin與其內容的margin不會重疊。如果內聯伸縮容器設定了浮動,元素將會以塊級伸縮容器顯示。
flex-direction
定義Flex專案在Flex容器中放置的方向。
flex-direction:row | row-reverse | column | column-reverse
row:預設值,如果書寫方式是ltr,那麼Flex專案從左向右排列;如果書寫方式是rtl,那麼Flex專案從右向左排列。
row-reverse:如果書寫方式是ltr,那麼Flex專案從右向左排列;如果書寫方式是rtl,那麼Flex專案從左向右排列。
column:和row類似,方向從上到下排列。
column-reverse:和row-reverse類似,方向從下到上排列。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin:0;
padding:0;
}
div>div{
width:100px;
height:100px;
line-height:100px;
border:1px solid;
text-align:center;
margin:10px;
}
.box{
display:-moz-box;
display:-webkit-box;
display:-ms-flexbox;
display:-webkit-flexbox;
display:flex;
border:1px solid;
margin:20px;
}
.box1{
/*定義Flex專案在Flex容器中放置的方向,從左往右。*/
-moz-box-orient:block-axis;
-moz-box-direction:normal;
-webkit-box-orient:block-axis;
-webkit-box-direction:normal;
flex-direction:row;
}
.box2{
/*定義Flex專案在Flex容器中放置的方向,從右往左。*/
-moz-box-orient:block-axis;
-moz-box-direction:reverse;
-webkit-box-orient:block-axis;
-webkit-box-direction:reverse;
flex-direction:row-reverse;
}
.box3{
/*定義Flex專案在Flex容器中放置的方向,從上往下。*/
-moz-box-orient:inline-axis;
-moz-box-direction:normal;
-webkit-box-orient:inline-axis;
-webkit-box-direction:normal;
flex-direction:column;
}
.box4{
/*定義Flex專案在Flex容器中放置的方向,從下往上。*/
-moz-box-orient:inline-axis;
-moz-box-direction:reverse;
-webkit-box-orient:inline-axis;
-webkit-box-direction:reverse;
flex-direction:column-reverse;
}
</style>
</head>
<body>
<div class="box box1">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
<div class="box box2">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
<div class="box box3">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
<div class="box box4">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
</body>
</html>
預設值flex-direction等於row時,Flex專案從左往右排列。
預設值flex-direction等於row-reverse時,Flex專案從右往排左列。
flex-direction等於column時,Flex專案從上往下排列。
flex-direction等於column-reverse時,Flex專案從下往上排列。
flex-wrap
預設情況下,Flex專案都儘可能在一行顯示,你可以根據flex-wrap的屬性值來改變,讓Flex專案多行顯示。
flex-wrap:nowrap | wrap | wrap-reverse
nowrap:預設值,單行顯示,如果書寫方式是ltr,Flex專案從左往右排列;如果書寫方式是trl,Flex專案從右往左排列。
wrap:多行顯示,如果書寫方式是ltr,Flex專案從左往右排列;如果書寫方式是trl,Flex專案從右往左排列。
wrap-reverse:多行顯示,如果書寫方式是ltr,Flex專案從右往左排列;如果書寫方式是trl,Flex專案從左往右排列。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin:0;
padding:0;
}
.box{
display:-moz-box;
display:-webkit-box;
display:-ms-flexbox;
display:-webkit-flexbox;
display:flex;
border:1px solid;
margin:20px;
-moz-box-lines:multiple;
/*定義伸縮換行屬性為nowrap(預設值)*/
flex-wrap:nowrap;
}
.box div{
width:100px;
height:100px;
line-height:100px;
border:1px solid;
text-align:center;
margin:10px;
}
</style>
</head>
<body>
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
<div>H</div>
<div>I</div>
<div>J</div>
<div>K</div>
<div>L</div>
</div>
</body>
</html>
因為預設值nowrap不準換行,伸縮容器容納不下伸縮專案時,各伸縮專案會根據預設的收縮比例進行縮小以適應伸縮容器的寬度。
.box{
...
flex-wrap:wrap;
}
flex-wrap等於wrap時,伸縮容器容不下伸縮專案時自動換行了。
.box{
...
flex-wrap:wrap-reverse;
}
flex-wrap等於wrap-reverse時,伸縮容器容不下伸縮專案時換行了。不同的是換行的方向相反。
flex-flow
這是flex-direction和flex-wrap兩個屬性的縮寫,預設值是row nowrap。
flex-flow:flex-direction || flex-wrap
justify-content
用來設定伸縮專案在主軸上的對齊方式。指定如何在伸縮專案之間分佈伸縮容器額外空間。當一行上的所有伸縮專案不能伸縮或可伸縮但是已達到最大長度時,這一屬性才會對伸縮容器額外空間進行分配。當伸縮專案溢位某一行時,這一屬性也會在專案的對齊上施加一些控制。
justify-content:flex-start | flex-end | center | space-between | space-around
flex-start:預設值,伸縮專案向一行的起始位置靠齊。伸縮容器沿著佈局軸方向的所有額外空間都被置於佈局軸的末尾。
flex-end:和flex-start相反,伸縮專案向一行的結束位置靠齊。伸縮容器沿著佈局軸方向的所有額外空間都被置於佈局軸的開始。
center:伸縮專案向一行的中間位置靠齊。伸縮容器的所有額外空間平均分佈在第一伸縮專案前面和最後一個伸縮專案的後面。
space-between:伸縮專案會平均分佈在行裡。伸縮容器的所有額外空間平均分佈在所有伸縮專案之間,但是在第一個伸縮專案之前和最後一個伸縮專案之後不分配空間,也就是說,第一個伸縮專案靠齊開始位置,最後一個伸縮專案靠齊結束位置。
space-around:伸縮專案會品均分佈在行裡。伸縮容器的所有額外空間品均分佈在所有伸縮專案之間,但是第一個伸縮專案之前與最後一個伸縮專案之後只分配其他位置得到額外空間的一半。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin:0;
padding:0;
}
.box{
width:500px;
height:500px;
border:1px solid;
margin:20px;
display:flex;
justify-content:flex-start;
}
body>div:first-child{
flex-flow:row nowrap;
}
body>div:last-child{
flex-flow:column nowrap;
}
.box div{
width:100px;
height:100px;
line-height:100px;
border:1px solid;
text-align:center;
margin:10px;
}
</style>
</head>
<body>
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
</body>
</html>
justify-content等於預設值flex-start時,伸縮專案在主軸起點處對齊,所有額外空間在最後一個伸縮專案的後面。
.box{
...
justify-content:flex-end;
}
justify-content等於flex-end時,伸縮專案在主軸結束處對齊,所有額外空間在第一個伸縮專案前面。
.box{
...
justify-content:center;
}
justify-content等於center時,所有專案在容器主軸中間處對齊,額外空間在第一個前面和最後一個後面。
.box{
...
justify-content:space-between;
}
justity-content等於space-between時,第一個專案在主軸開始處,最後一個專案在主軸結束處,所有額外空間被其他專案平分。
.box{
...
justify-content:space-around;
}
justify-content等於space-around時,類似於space-between,但是第一個專案前面與最後一個專案後面分配了其他專案擁有額外空間一半的空間。
align-items
align-items屬性和justify-content同樣是用來管理伸縮容器額外空間,不同的是,justify-content是用來管理伸縮容器主軸方向的額外空間,而align-items是用來管理伸縮容器側軸方向的額外空間。
align-items:flex-start | flex-end | center | baseline | stretch
flex-start:伸縮專案在側軸起點邊的外邊距緊靠住該行在側軸起始的邊。
flex-end:伸縮專案在側軸終點邊的外邊距靠住該行在側軸終點的邊。
center:伸縮專案的外邊距盒在該行的側軸上居中放置。
baseline:如果伸縮專案的行內軸與側軸為同一條,則該值和flex-start等效。其它情況下,該值將參與基線對齊。所有參與該對齊方式的伸縮專案將按下列方式排列:首先將這些伸縮專案的基線進行對齊,隨後其中基線至側軸起點邊的外邊距距離最長的那個專案將緊靠住該行在側軸起點的邊。
stretch:如果側軸長度屬性的值為auto,則此值會使專案的外邊距盒的尺寸在遵照min/max-width/height屬性的限制下儘可能接近所在行的尺寸。
.box{
...
align-items:flex-start;
}
align-items等於flex-start時,伸縮專案在側軸起點處對齊,額外空間在側軸終點處。
.box{
...
align-items:flex-end;
}
align-items等於flex-end時,伸縮專案在側軸結束處對齊,額外空間在側軸起點處。
.box{
...
align-items:center;
}
align-items等於center時,伸縮專案在側軸中間處對齊,額外空間在側軸兩端。
.box{
...
align-items:baseline;
}
align-items等於baseline時,如果伸縮專案的行內軸與側軸為同一條,則該值和flex-start等效,那麼額外空間在側軸結束處。
.box{
...
align-items:stretch;
}
align-items等於stretch時,伸縮專案往側軸方向拉伸以佔用額外空間。
align-content
是伸縮專案佔多行時在側軸方向的對齊屬性,這個屬性將對每一行起作用而不是每個伸縮專案。
align-content:flex-start | flex-end | center | space-between | space-around | stretch
flex-start:各行向伸縮容器的起點位置堆疊。
flex-end:各行向伸縮容器的結束位置堆疊。
center:各行向伸縮容器的中間位置堆疊。
space-between:各行在伸縮容器中平均分佈。
space-around:各行在伸縮容器中品均分佈,在兩邊各有一半空間。
stretch:預設值,各行將會伸展以佔用額外空間。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin:0;
padding:0;
}
.box{
border:1px solid;
margin:20px;
display:flex;
align-content:flex-start;
height:500px;
width:500px;
}
body>div:first-child{
flex-flow:row wrap;
}
body>div:last-child{
flex-flow:column wrap;
}
.box div{
min-width:100px;
line-height:100px;
border:1px solid;
text-align:center;
margin:10px;
}
</style>
</head>
<body>
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
<div>A</div>
<div>B</div>
<div>C</div>
<div>A</div>
<div>B</div>
<div>C</div>
<div>A</div>
<div>B</div>
</div>
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
<div>A</div>
<div>B</div>
<div>C</div>
<div>A</div>
<div>B</div>
<div>C</div>
<div>A</div>
<div>B</div>
</div>
</body>
</html>
align-content等於flex-start時,各行向側軸起點處對齊,額外空間在側軸終點處。
.box{
...
align-content:flex-end;
}
align-content等於flex-end時,各行向側軸終點處對齊,額外空間在側軸開始處。
.box{
...
align-content:center;
}
align-content等於center時,各行向側軸中間處對齊,額外空間在側軸兩端。
.box{
...
align-content:space-between;
}
align-content等於space-between時,第一行向側軸起點處對齊,最後一行向側軸終點處對齊,額外空間被除了第一行與最後一行處平分。
.box{
...
align-content:space-around;
}
align-content等於space-around時,第一行向側軸起點處對齊,最後一行向側軸終點處對齊,第一行與最後一行的額外空間是其他處額外空間的一半。
.box{
...
align-content:stretch;
}
<完>
本文轉載自:http://www.cnblogs.com/fxycm/p/4649648.html