Css3彈性盒模型詳解
阿新 • • 發佈：2019-01-07
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>css</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <link rel="stylesheet" type="text/css" href=""> <style> .box{ height: 100px; border: 10px solid #000; padding: 10px; display: -webkit-box;/*橫向排列 預設*/ /* -webkit-box-orient:vertical; *//*垂直顯示*/ /* -webkit-box-direction:Reverse; *//*.box裡的內容倒序*/ font-size: 20px; color: #fff; -webkit-box-pack:center; -webkit-box-align:center; } .box div{ width: 100px; height: 100px; background: red; border: 1px solid #000; } .box div:nth-of-type(1){ /* -webkit-box-ordinal-group:2; *//*自定義排列順序*/ -webkit-box-flex:1;/*1/15*/ } .box div:nth-of-type(2){ /* -webkit-box-ordinal-group:5; */ -webkit-box-flex:2;/*2/15*/ } .box div:nth-of-type(3){ /* -webkit-box-ordinal-group:4; */ -webkit-box-flex:3;/*3/15*/ } .box div:nth-of-type(4){ /* -webkit-box-ordinal-group:1; */ -webkit-box-flex:4;/*4/15*/ } .box div:nth-of-type(5){ /*-webkit-box-ordinal-group:3;*/ -webkit-box-flex:5;/*5/15*/ /*子元素的尺寸 = 盒子的尺寸*子元素的box-flex屬性值/所有子元素的box-flex屬性值的和(這裡為15) 可以理解為： 子元素的尺寸 = {當前元素所處父級盒子/所有子元素的box-flex屬性值的和(這裡為15)}*當前子元素的box-flex屬性值 第一個子div的尺寸 = .box的尺寸*1/1+2+3+4+5 15 */ /* 對於多出來的水平空間管理(寫在父級)： -webkit-box-pack:start;父級下的子內容靠左 = float:left;預設 -webkit-box-pack:end;父級下的子內容靠右 = float:right; -webkit-box-pack:center;父級下的子內容水平居中; -webkit-box-pack:Justify;父級下的子內容平均分多餘的空隙 加了間距（相當於給圖片加了margin的效果）; 對於多出來的垂直空間管理(寫在父級)： -webkit-box-align:start; 父級下的子內容垂直頂部 -webkit-box-align:center; 父級下的子內容垂直居中 -webkit-box-align:end; 父級下的子內容垂直底部 如果要使內容水平垂直居中： -webkit-box-pack:center; -webkit-box-align:center;就這兩個一起。 */ } /*要把下面所有的div一排顯示兩個方法： .box{ width: 800px; height: 500px; border:10px solid pink; display: flex; flex-direction:row; justify-content:flex-end; flex-wrap:wrap; 換行 } .box .item{ width: 80px; height: 80px; background: red; border:1px solid #000; /*box-sizing:border-box; float:left; } 以下都為父級的設定: 1.div 加float:left; 但是如果他有邊框的話(超過父級寬度)就會被擠下去 所以要給他加 這兩句程式碼 float:left; box-sizing:border-box;就在一排顯示了，但是他超過父級寬度還是會擠下去。 2.彈性佈局 給父級加 display:flex; 無論排多少個div都只 在一排顯示 當子元素總數超過父級寬度 子元素大小自適應 還可以為下面的div加margin值 flex-direction:row(預設值 從左向右排);父級加 row-reverse 從右向左排 column 從上往下排 column-reverse 從下往上排 justify-content：主軸對齊（主要為X軸方向上的排列） flex-start (預設)= float:left;靠左 flex-end =float:right;靠右 中間子元素怎麼分佈: center 元素居中 平分左右兩側富裕空間 space-between 緊貼兩側、中間富裕空間平均分 space-around 兩側有空隙、中間富裕空間平均分 align-items:主要為Y軸方向上的排列 align-items:flex-start;（頂部） align-items:center;（居中） align-items:flex-end;（底部） flex-wrap 換行 nowrap 預設 wrap-reverse 倒排 flex-wrap:wrap; align-content 堆疊伸縮行 align-content 會更改 flex-wrap的行為 flex-start (預設)= float:left;左 flex-end =float:right;右 center 元素居中 平分左右兩側富裕空間 space-between 緊貼兩側、中間富裕空間平均分 space-around 兩側有空隙、中間富裕空間平均分 設定裡面的子元素垂直居中顯示：(給父級加) display:flex; justify-content:center; align-items:center; 或者: display:flex;(父級) margin:auto;(子元素) 以下為子元素設定: 子元素排列順序: .box .item:nth-of-type(1){ order:7;} 數字越大越靠後 支援負數 flex 伸縮性 flex:auto;佔幾份 flex:none; align-self 控制單獨子元素對齊方式 flex-start 左 flex-end 右 center 居中 */ </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </body> </html>