CSS3 伸縮佈局盒模型記

時間 2019-11-10

標籤 css3 css 伸縮佈局模型欄目 CSS 简体版

原文原文鏈接

CSS3 伸縮佈局盒模型

　　CSS3引入的佈局模式Flexbox佈局，主要思想是讓容器有能力讓其子項目可以改變其寬度，高度，以最佳方式填充可用空間。Flex容器使用Flex項目能夠自動放大與收縮，用來填補可用的空閒空間。
　　更重要的是，Flexbox佈局方向不可預知，不像常規的佈局(塊級從上到下，內聯從左到右)，而那些常規的適合頁面佈局，但對於支持大型或者複雜的應用程序就缺少靈活性。
　　若是常規佈局是基於塊和內聯文本流方向，那麼Flex佈局就是基於「Flex-flow」方向。先來了解一下伸縮盒模型的一些專用術語。css

　　主軸：Flex容器的主軸主要用來配置Flex項目。他不必定是水平的，這主要取決於fle-direction屬性。
　　主軸起點，主軸終點：Flex項目的配置從容器的主軸起點邊開始，往主軸終點邊結束。
　　主軸長度：Flex項目在主軸方向的寬度或高度就是項目的主軸長度，Flex項目的主軸長度屬性是width或height屬性，由哪個對着主軸方向決定。
　　側軸：與主軸垂直的軸稱做側軸，是側軸方向的延伸。
　　側軸起點，側軸終點：伸縮行的配置從容器的側軸起點邊開始，往側軸終點邊結束。
　　側軸長度：Flex項目在側軸方向的寬度或高度就是項目的側軸長度，Flex項目的側軸長度屬性是widht或height屬性，由哪個對着主軸方向決定。html

　　Flex佈局的語法規範通過幾年發生了很大的變化，也給Flexbox的使用帶來必定的侷限性，由於語法規範版本衆多，瀏覽器支持不一致，導致Flexbox佈局使用很少。Flexbox佈局語法規範主要分紅三種。css3

　　舊版本，2009年版本，是最先的伸縮佈局，各大主流瀏覽器對其支持性略有不一樣，惋惜的是，對Flexbox佈局的各屬性支持也不徹底，在使用時還需添加各瀏覽器的前綴。
　　混合版本，2011年版本，只有IE10支持。
　　最新版本,2012年版本,除了Safari瀏覽器不支持外，其餘最新瀏覽器都支持這個版本。web

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

flex-direction

　　定義Flex項目在Flex容器中放置的方向。flexbox

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相似，方向從下到上排列。spa

<!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;
}

　　align-content等於默認值stretch時，各行將沿着側軸方向伸展以佔用額外空間。

Flex項目屬性

order

　　默認狀況下，Flex項目是按照文檔流的結構順序排列，在Flexbox模型中，能夠經過order屬性來改變伸縮項目出如今文檔中的順序。

order:<number>;

　　number能夠是負值，Flexbox容器將根據各項目中order值的大小進行排列。

<!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:inline-flex;         
        flex-flow:row wrap; 
        align-items:flex-start;
    }
    .box div{
        min-width:100px;
        line-height:100px;
        border:1px solid;
        text-align:center;
        margin:10px;
    }       
    .box div:nth-child(1){
        order:2;
    }
    .box div:nth-child(2){
        order:1;
    }
    .box div:nth-child(3){
        order:3;
    }
</style>
</head>
<body>
<div class="box">
    <div>A</div>
    <div>B</div>
    <div>C</div>    
</div>   
</body>
</html>

flex-grow

　　定義一個Flex項目的擴大比例。

flex-grow:<number>

　　默認值爲0，不能取負值，沒有單位。

<!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;         
        flex-flow:row wrap; 
        align-items:flex-start;
    }
    .box div{
        min-width:100px;
        line-height:100px;
        border:1px solid;
        text-align:center;
        margin:10px;
    }       
    .box div:nth-child(1){
        flex-grow:1;
    }
    .box div:nth-child(2){
        flex-grow:2;
    }
    .box div:nth-child(3){
        flex-grow:1;
    }
</style>
</head>
<body>
<div class="box">
    <div>A</div>
    <div>B</div>
    <div>C</div>    
</div>   

</body>
</html>

　　若是伸縮項目的flex-grow設置爲1，每一個伸縮項目將設置一個大小相等的額外空間。若是給其中一個伸縮項目設置flex-grow設置爲2，這個伸縮項目所佔的額外空間是其餘伸縮項目所佔額外空間的2倍。
　　也能夠這樣理解，把上例各項目的flex-grow值加起來等於4，就是把額外空間分紅4份，比例爲1的佔1份，比例爲2的佔2份。

flex-shrink

　　定義一個Flex項目的縮小比例。

flex-shrink:<number>

　　默認值爲1。

<!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:200px;
        border:1px solid;
        margin:20px;
        display:flex;         
        flex-flow:row nowrap; 
    }
    .box div{
        width:100px;
        line-height:100px;
        border:1px solid;
        text-align:center;
        margin:10px;
    }       
    .box div:nth-child(1){
        flex-shrink:1;
    }
    .box div:nth-child(2){
        flex-shrink:2;
    }
    .box div:nth-child(3){
        flex-shrink:1;
    }
</style>
</head>
<body>
<div class="box">
    <div>A</div>
    <div>B</div>
    <div>C</div>    
</div>   
</body>
</html>

　　與flex-grow相似，也是處理伸縮容器額外空間的屬性，不一樣的是，flex-grow處理的是伸縮容器內部剩下的額外空間，而flex-shrink處理的是伸縮容器外部溢出的額外空間。上例中將溢出的額外空間分紅4份，收縮比例爲1的佔1份，收縮比例爲2的佔2份，若是不設置收縮比例，默認的比例爲1。

flex-basis

　　定義了Flex項目在分配Flex容器剩餘空間以前的一個默認尺寸。

flex-basis:<length> | auto

<!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;
        border:1px solid;
        margin:20px;
        display:flex;         
        flex-flow:row nowrap; 
    }
    .box div{
        width:100px;
        line-height:100px;
        border:1px solid;
        text-align:center;
        margin:10px;
    }       
    .box div:nth-child(1){
        flex-basis:150px;
    }
    .box div:nth-child(2){
        flex-basis:200px;
    }
    .box div:nth-child(3){
        flex-basis:50px;
    }
</style>
</head>
<body>
<div class="box">
    <div>A</div>
    <div>B</div>
    <div>C</div>    
</div>   
</body>
</html>

　　flex-basis相似於width，用來設置flex-basis長度並指定伸縮基準值，也就是根據可伸縮比例計算出額外空間的分佈以前，伸縮項目主軸長度的起始數值。
　　若是設置爲0，內容不在考慮周圍額外空間。若是設置爲auto，額外空間會基於flex-grow值作分佈。以下所示：

flex

　　flex是flex-grow，flex-shrink，flex-basis三個屬性的縮寫。第二個和第三個參數是可選值。默認值是0 1 auto。

flex: none | [<flex-grow> <flex-shrink>? || <flex-basis>]

　　建議使用縮寫屬性。若是flex取值爲none，等於0 0 auto。

align-self

　　用來在單獨的伸縮項目上覆寫默認的對齊方式。

align-self:auto | flex-start | flex-end | center | baseline | stretch

　　align-self的值與align-items同樣。
　

<!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:400px;
        border:1px solid;
        margin:20px;
        display:flex;         
        flex-flow:column wrap; 
    }
    .box div{
        width:100px;
        line-height:100px;
        border:1px solid;
        text-align:center;
        margin:10px;
    }       
    .box div:nth-child(1){  
        align-self:flex-start;    
    }
    .box div:nth-child(2){
        align-self:center;
    }
    .box div:nth-child(3){
        align-self:flex-end;
    }
</style>
</head>
<body>
<div class="box">
    <div>A</div>
    <div>B</div>
    <div>C</div>    
</div>   
</body>
</html>

CSS3 Flexbox完。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。