2. 程式人生 > >css3伸縮佈局盒模型

css3伸縮佈局盒模型

阿新 • • 發佈：2018-12-05


CSS3 伸縮佈局盒模型

CSS3引入的佈局模式Flexbox佈局，主要思想是讓容器有能力讓其子專案能夠改變其寬度，高度，以最佳方式填充可用空間。Flex容器使用Flex專案可以自動放大與收縮，用來填補可用的空閒空間。
　　更重要的是，Flexbox佈局方向不可預知，不像常規的佈局(塊級從上到下，內聯從左到右)，而那些常規的適合頁面佈局，但對於支援大型或者複雜的應用程式就缺乏靈活性。
　　如果常規佈局是基於塊和內聯文字流方向，那麼Flex佈局就是基於“Flex-flow”方向。先來了解一下伸縮盒模型的一些專用術語。
              
主軸：Flex容器的主軸主要用來配置Flex專案。他不一定是水平的，這主要取決於fle-direction屬性。
　　 主軸起點，主軸終點：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




相關推薦

css3伸縮佈局盒模型

CSS3 伸縮佈局盒模型 CSS3引入的佈局模式Flexbox佈局，主要思想是讓容器有能力讓其子專案能夠改變其寬度，高度，以最佳方式填充可用空間。Flex容器使用Flex專案可以自動放大與收縮，用來填補可用的空閒空間。 　　更重要的是，Flexbox佈局方向不可預知，不像

CSS3 Flex佈局（伸縮佈局盒模型）

轉自：http://www.xifengxx.com/web-front-end/1408.html   Flex伸縮佈局 CSS2定義了四種佈局：塊佈局、行內佈局、表格佈局盒定位佈局。 CSS3引入了一種新的佈局模式——Flexbox佈局，即伸縮佈局盒（Flexible

css3之彈性盒模型

什麼是彈性盒模型？ 彈性盒模型是指在父級改變大小的時候內部的自己元素也會相應的改變大小，即子集會按照父級的大小按比例自適應大小。 彈性盒模型的提出可以解決一些響應式佈局的需求 如何使用彈性盒模型？ 建立彈性盒模型： 給父級設定css屬性display: flex;

css3-顏色背景盒模型

顏色 rgba(255,0,0,0.1) 新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以設定顏色值的透明度，相較opacity，它們不具有繼承性，即不會影響子元素的透明度。 A 透明度 取值範圍0~1 背景 背景在CSS3中也

關於伸縮盒模型 Flexible Box 的佈局

這就是傳說中的伸縮盒模型：Flexible Box：display:flex或者display:inline-flex,對於相容IE：加-ms-字首，對於相容Safari：加-webkit-字首。 等下要演示的相關屬性有：flex,flex-basis,flex-direc

CSS3佈局樣式相關：Columns、column-width、column-count、column-gap、column-rule、column-span、盒子模型、伸縮佈局

CSS3引入了一種新的佈局模式——Flexbox佈局，即伸縮佈局盒模型（Flexible Box），用來提供一個更加有效的方式制定、調整和分佈一個容器裡專案佈局，即使它們的大小是未知或者動態的，這裡簡稱為Flex。 Flexbox佈局常用於設計比較複雜的頁面，可以輕鬆的實現螢幕和瀏覽器視窗大小發生變化時

CSS3伸縮盒Flexible Box

git 情況 ear 更多 group android 計算 zab 基礎 這是一種全新的布局，在移動端非常實用，IE對此布局的相關的兼容不是很好，Firefox、Chrome、Safrai等需要加瀏覽器前綴。 先說說這種布局的特點： 1）移動端由於屏幕寬度都不一樣，在布局

CSS3 盒模型

水平 方向 nbsp selected horizon css eve content baseline 1，彈性核模型 新版父級display:flex; // 水平 方向 flex-direction:row; // 豎直

彈性盒模型（伸縮布局）

技術 baseline 不換行 它的 gray lock gin ack 設置高度 一、彈性盒模型（伸縮布局） flxible box 前言： 彈性布局，用來為盒子提供靈活性。就像是當把瀏覽器縮小的的時候，不會像float屬性會依然往下掉，靈活性不好。而且當布局盒裝模型

CSS3彈性盒模型與布局

彈性盒一、彈性盒模型1、註意：在使用彈性盒模型的時候，父元素必須要加display:box 或 display:inline-box，同時要加瀏覽器內核前綴Box-orient 定義盒模型的布局方向Horizontal 水平顯示vertical 垂直方向box-direction 元素排列順序Normal 正

第7章 css3盒模型

情況 source 大小 但是 多行 即使 bottom 行內元素 顯示 diasplay:none;與visibility:hidden;的區別 diasplay:none;在瀏覽時保留位置，（為隱藏對象保留物理空間）visibility:hidden; 視為不存在，且不

css3彈性盒模型flex快速入門與上手1

nes -1 相互 title 布局 viewport alt 默認值 lin 一、什麽是flex? flex是css3中引入的一種布局方式，可以非常靈活高效控制元素的排列與對齊方式，大多數人稱之為彈性布局. 二、怎麽使用flex? 任何一個容器都可以指定為flex布

css display flew 伸縮盒模型

-a 模型 pat 垂直居中 direct play spa tween 底部 父級容器屬 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

css3中的彈性盒模型

css3中的彈性盒模型css3中的彈性盒模型註意：在使用彈性盒子模型的時候 父元素必須要加display：box和display：inline-box 現在我先寫上我的代碼註意！在使用盒子模型的時候要加display 這裏我前面還加了-webkit 這是瀏覽器內核兼容問題，加了display之後就會變成水平

css3基礎 box-sizing 設置盒模型(邊線與padding不改盒子的大小)

鍛煉 author har con ast 學習 tca padding set 禮悟：　　 公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。 虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。 　　

CSS3盒模型陰影屬性

set 表示 設置 color lur 垂直 -o 可選參數 投影 CSS3盒子陰影 屬性box-shadow也是CSS3新增的一個重要屬性，用來定義元素的盒子陰影。 inset： 陰影類型， 可選值。 如果不設置， 其默認的投影方式是外陰影； 如果取其唯一值“ inse

CSS3盒模型

http back css3 width -i 事先 color web 計算 CSS3盒模型CSS有一種基礎設計模式叫盒模型， 定義了Web頁面中的元素是如何看做盒子來解析的。 每一個盒子有不同的展示界面， 在 CSS 中 主要有以下幾種盒模型： inline、inlin

CSS - 盒模型佈局 - margin 陷阱（父子、兄弟）

目錄 margin 陷阱：內聯塊中對於相鄰快的影響 margin陷阱 - 兄弟佈局 margin陷阱 - 父子佈局 父子 - 解決方法一：固定父親（border-top） 父子 - 解決方法二：使用padding margin 陷阱：內聯塊中對於相鄰

盒模型佈局相關-基礎與語法

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 21.0px; font: 18.0px "Yuanti SC"; color: #000000; background-color: #ffffff } span.s1 { } 佈局相關屬性 p.p

【筆記】學習CSS佈局05——盒模型

在我們討論寬度的時候，我們應該講下與它相關的另外一個重點知識：盒模型。當你設定了元素的寬度，實際展現的元素卻超出你的設定：這是因為元素的邊框和內邊距會撐開元素。看下面的例子，兩個相同寬度的元素顯示的實際寬度卻不一樣。 .simple { width: 500px; margin: 20p