CSS Flex 弹性盒模型布局教程

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

flex布局就是给任何一个容器添加 display:flex

注：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

注：Safari 6.1+（前缀-webkit-） iOS 7.1+（前缀-webkit-）
最新flex 兼容性查看请点此处 最新Flex兼容性

Flex 容器 flex container 和 Flex 项目 flex item

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；

交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

前六个是容器属性，后面是项目属性。

1. flex-direction属性

flex-direction属性有四个值 row | row-reverse | column | column-reverse;

row（默认值）：主轴为水平方向，起点在左端。如下图

row-reverse：主轴为水平方向，起点在右端。

因没有给容器设置宽度，所以默认上一级父亲的宽度

.section-one-1{

display: flex;

flex-direction:row;

}

123456789

column：主轴为垂直方向，起点在上。如下图

column-reverse：主轴为垂直方向，起点在下。

.section-one-2{

display: flex;

flex-direction:column;

}

123

2.flex-wrap属性

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

flex-wrap属性有三个值 nowrap | wrap | wrap-reverse;

为nowrap值时，不换行。不管项目宽度值为多少，最大值也被均分在一行内

.section-two-1{

display: flex;

flex-wrap:nowrap;

}

.section-two-1 span{

width:400px;

}

123456789

为wrap值时，换行。第一行在最上面

.section-two-2{

display: flex;

flex-wrap:wrap;

}

.section-two-1 span{

width:400px;

}

123456789

为wrap-reverse值时，换行。第一行在最下面

.section-two-3{

display: flex;

flex-wrap:wrap-reverse;

}

.section-two-1 span{

width:400px;

}

123456789

3. flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.section-three-1{

display: flex;

flex-flow:column wrap-reverse;

}

123

4. justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

justify-content属性有四个值: flex-start | flex-end | center | space-between | space-around;

flex-start（默认值）：左对齐

flex-end右对齐

center： 居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

具体对齐方式与轴的方向有关。默认一般从左至右，下图是flex-direction: row-reverse;从右至左

.section-four-1{

display: flex;

justify-content:space-around;

flex-direction: row-reverse;

}

1234

5. align-items属性

align-items属性定义项目在交叉轴对齐方式

flex-start交叉轴的起点对齐

flex-end交叉轴的终点对齐

center交叉轴的中点对齐

baseline项目的第一行文字的基线对齐

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

.section-five-1{

display: flex;

align-items:stretch;

}

.section-five-1 .one{

height:200px;

line-height:50px;

}

.section-five-1 .two{

height:100px;

line-height:50px;

}.section-five-1 .three{

height:50px;

line-height:50px;

}

1234

.section-five-2{

display: flex;

align-items:baseline;

}

.section-five-2 .one{

height:200px;

line-height:50px;

}

.section-five-2 .two{

height:100px;

line-height:50px;

}.section-five-2 .three{

height:50px;

line-height:50px;

}

1234

6. align-content属性

align-content属性定义多根轴线的对齐方式。如果项目只有一根轴线，则属性不起作用

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

.section-six-1{

display: flex;

align-content:space-between;

height: 600px;

border: 1px solid #000;

flex-flow: wrap;

}

.section-six-1 span{

width:300px;

}

在运用 align-content时，要声明换行 flex-flow:wrap

123456789

7.order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.section-seven-1{

display: flex;

}

.section-seven-1>span:first-child{

order:0

}

.section-seven-1>span:nth-child(5){

order:1;

}

.section-seven-1>span:nth-child(4){

order:2;

}

123456789

8. flex-grow属性

flex-grow属性定义项目的放大比例，默认为0。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

.section-eight-1{

display: flex;

}

.section-eight-1>span:first-child{

flex-grow:1

}

.section-eight-1>span:nth-child(2){

flex-grow:1;

}

.section-eight-1>span:nth-child(4){

flex-grow:2;

}

.section-eight-1>span:nth-child(5){

flex-grow:1;

}

123456789

9. flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1.即若空间不足，该项目将缩小

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

.section-nine-1{display: flex;}

.section-nine-1 span{width:300px;}

.section-nine-1>span:first-child{flex-shrink:2;}

.section-nine-1>span:nth-child(2){flex-shrink:3;}

.section-nine-1>span:nth-child(4){flex-shrink:4;}

.section-nine-1>span:nth-child(5){flex-shrink:2;}

12345

实例解析：

flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

本例中显式定义了

.section-nine-1>span:first-child==>flex-shrink: 2;

.section-nine-1>span:nth-child(2)==>flex-shrink:3

.section-nine-1>span:nth-child(4)==>flex-shrink:4

.section-nine-1>span:nth-child(5)==>flex-shrink:5

隐式定义.section-nine-1>span:nth-child(3)==>flex-shrink:1

所以计算出来总共将剩余空间分成了 12 份，即2:3:1:4:2

我们可以看到父容器继承宽度为 1200px，子项被定义为 300px，子项相加之后即为 1500 px，超出父容器 300px。

那么超出的 300px 需要被 五个盒子消化通过收缩因子，所以加权综合可得 300*2+300*3+300*1+300*4+300*5=3600px。

于是我们可以计算 五个盒子 将被移除的溢出量是多少：

1 被移除溢出量：(300*2/3600)*300，即等于50px

2 被移除溢出量：(300*3/3600)*300，即等于75px

3 被移除溢出量：(300*1/3600)*300，即等于25px

4 被移除溢出量：(300*4/3600)*300，即等于100px

5 被移除溢出量：(300*2/3600)*300，即等于50px

最后1、2、3、4、5的实际宽度分别为：300-50=250px, 300-75=225px, 300-25=275px, 300-100=200px,300-50=250px，此外，这个宽度是包含边框的。

10.1 flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。

浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

10.2 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

10.3 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

属性取值五个值：auto | flex-start | flex-end | center | baseline | stretch; 其作用和align-items 的作用一样。

放上css代码

  1. header{
  2.     margin:20px 0;
  3.     text-align: center;
  4.     font-size: 30px;
  5.     color:#2ecc71;
  6. }
  7. .one{
  8.     /*width:100px;*/
  9.     /*height:100px;*/
  10.     background: #1abc9c;
  11.     color:#fff;
  12.     font-size: 40px;
  13.     text-align: center;
  14.     line-height:100px;
  15. }
  16. .two{
  17.     /*width:100px;*/
  18.     /*height:100px;*/
  19.     background: #2ecc71;
  20.     color:#fff;
  21.     font-size: 40px;
  22.     text-align: center;
  23.     line-height:100px;
  24. }
  25. .three{
  26.     /*width:100px;*/
  27.     /*height:100px;*/
  28.     background: #3498db;
  29.     color:#fff;
  30.     font-size: 40px;
  31.     text-align: center;
  32.     line-height:100px;
  33. }
  34. .four{
  35.     /*width:100px;*/
  36.     /*height:100px;*/
  37.     background: #9b59b6;
  38.     color:#fff;
  39.     font-size: 40px;
  40.     text-align: center;
  41.     line-height:100px;
  42. }
  43. .five{
  44.     /*width:100px;*/
  45.     /*height:100px;*/
  46.     background:#34495e;
  47.     color:#fff;
  48.     font-size: 40px;
  49.     text-align: center;
  50.     line-height:100px;
  51. }
  52. .six{
  53.     /*width:100px;*/
  54.     /*height:100px;*/
  55.     background:#ff9966;
  56.     color:#fff;
  57.     font-size: 40px;
  58.     text-align: center;
  59.     line-height:100px;
  60. }
  61. .seven{
  62.     /*width:100px;*/
  63.     /*height:100px;*/
  64.     background:#f1c40f;
  65.     color:#fff;
  66.     font-size: 40px;
  67.     text-align: center;
  68.     line-height:100px;
  69. }
  70. .eight{
  71.     /*width:100px;*/
  72.     /*height:100px;*/
  73.     background: #e67e22;
  74.     color:#fff;
  75.     font-size: 40px;
  76.     text-align: center;
  77.     line-height:100px;
  78. }
  79. .nine{
  80.     /*width:100px;*/
  81.     /*height:100px;*/
  82.     background: #e74c3c;
  83.     color:#fff;
  84.     font-size: 40px;
  85.     text-align: center;
  86.     line-height:100px;
  87. }
  88. .section-1{
  89.     margin:20px 0;
  90.  
  91. }
  92. .section-one-1{
  93.     display: flex;
  94.     flex-direction:row;
  95. }
  96. .section-one-2{
  97.     display: flex;
  98.     flex-direction:column;
  99. }
  100. .section-two-1{
  101.     display: flex;
  102.     flex-wrap:nowrap;
  103. }
  104. .section-two-1 span{
  105.     width:400px;
  106. }
  107. .section-two-2{
  108.      display: flex;
  109.      flex-wrap:wrap;
  110.  }
  111. .section-two-2 span{
  112.     width:400px;
  113. }
  114. .section-two-3{
  115.     display: flex;
  116.     flex-wrap:wrap-reverse;
  117. }
  118. .section-two-3 span{
  119.     width:400px;
  120. }
  121.  
  122. .section-three-1{
  123.     display: flex;
  124.     flex-flow:column wrap-reverse;
  125. }
  126. .section-four-1{
  127.     display: flex;
  128.     justify-content: space-around;
  129.     flex-direction: row-reverse;
  130. }
  131. .section-four-1 .one{
  132.     width:200px;
  133. }
  134. .section-four-1 .two{
  135.     width:100px;
  136. }.section-four-1 .three{
  137.      width:400px;
  138.  }
  139. .section-five-1{
  140.     display: flex;
  141.     align-items:stretch;
  142. }
  143. .section-five-1 .one{
  144.     height:200px;
  145.     line-height:50px;
  146. }
  147. .section-five-1 .two{
  148.     height:100px;
  149.     line-height:50px;
  150. }.section-five-1 .three{
  151.      height:50px;
  152.      line-height:50px;
  153.  }
  154.  
  155. .section-five-2{
  156.     display: flex;
  157.     align-items:baseline;
  158. }
  159. .section-five-2 .one{
  160.     height:200px;
  161.     line-height:50px;
  162. }
  163. .section-five-2 .two{
  164.     height:100px;
  165.     line-height:50px;
  166. }.section-five-2 .three{
  167.      height:50px;
  168.      line-height:50px;
  169.  }
  170. .section-six-1{
  171.     display: flex;
  172.     align-content: space-between;
  173.     height: 600px;
  174.     border: 1px solid #000;
  175.     flex-flow: wrap;
  176. }
  177.  .section-six-1 span{
  178.      width:300px;
  179.  }
  180.  .section-seven-1{
  181.      display: flex;
  182.  }
  183. .section-seven-1>span:first-child{
  184.     order:0;
  185. }
  186. .section-seven-1>span:nth-child(5){
  187.     order:1;
  188. }
  189. .section-seven-1>span:nth-child(4){
  190.     order:2;
  191. }
  192. .section-eight-1{
  193.     display: flex;
  194. }
  195. .section-eight-1>span:first-child{
  196.     flex-grow:1;
  197. }
  198. .section-eight-1>span:nth-child(2){
  199.     flex-grow:1;
  200. }
  201. .section-eight-1>span:nth-child(4){
  202.      flex-grow:2;
  203.  }
  204. .section-eight-1>span:nth-child(5){
  205.     flex-grow:1;
  206. }
  207.  
  208. .section-nine-1{
  209.     display: flex;
  210. }
  211. .section-nine-1 span{
  212.     width:300px;
  213. }
  214. .section-nine-1>span:first-child{
  215.     flex-shrink:2;
  216. }
  217. .section-nine-1>span:nth-child(2){
  218.     flex-shrink:3;
  219. }
  220. .section-nine-1>span:nth-child(4){
  221.     flex-shrink:4;
  222. }
  223. .section-nine-1>span:nth-child(5){
  224.     flex-shrink:2;
  225. }

　　

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>CSS Flex 弹性盒模型布局教程</title>
  9.     <link rel="stylesheet" href="/css/public.css">
  10.     <link rel="stylesheet" href="/css/flex.css">
  11. </head>
  12. <body class="container-1200">
  13. <section>
  14.     <header>CSS Flex 弹性盒模型布局教程</header>
  15.     <p>Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。</p>
  16.     <p>flex布局就是给任何一个容器添加 <code>display:flex</code></p>
  17.     <p><b>注：</b>设为 Flex 布局以后，子元素的<code>float</code>、<code>clear</code>和<code>vertical-align</code>属性将失效。</p>
  18.     <blockquote>
  19.     <h1><p style="width:50%;    float: left;"><b>注：</b>Safari 6.1+（前缀-webkit-） iOS 7.1+（前缀-webkit-）<br>
  20.         最新flex 兼容性查看请点此处 <a style="color:red;font-weight:800;" href="https://caniuse.com/#search=flex">最新Flex兼容性</a></p>
  21.         <p style="width:50%;    float: left;">Flex 容器 <code>flex container</code> 和 Flex 项目 <code>flex item</code> </p></h1>
  22.         <h1 style="display: -webkit-inline-flex"><img style="width:50%;" src="/image/flex/one.jpg" alt="">
  23.  
  24.             <img style="width:50%;" src="/image/flex/two.png" alt=""></h1>
  25.     </blockquote>
  26.  
  27.     <p>容器默认存在两根轴：水平的主轴<code>（main axis）</code>和垂直的交叉轴<code>（cross axis）</code>。</p>
  28.     <p>主轴的开始位置（与边框的交叉点）叫做<code>main start</code>，结束位置叫做<code>main end</code>；</p>
  29.     <p>交叉轴的开始位置叫做<code>cross start</code>，结束位置叫做<code>cross end</code>。</p>
  30.     <p>项目默认沿主轴排列。单个项目占据的主轴空间叫做<code>main size</code>，占据的交叉轴空间叫做<code>cross size</code>。</p>
  31.     <p><code>前六个是容器属性，后面是项目属性</code>。</p>
  32. </section>
  33. <section class="section-1">
  34.     <h1>1. <code>flex-direction</code>属性</h1>
  35.     <p><code>flex-direction</code>属性有四个值 <code>row | row-reverse | column | column-reverse</code>;</p>
  36.     <p>row（默认值）：主轴为水平方向，起点在左端。如下图</p>
  37.     <p>row-reverse：主轴为水平方向，起点在右端。</p>
  38.     <p>因没有给容器设置宽度，所以默认上一级父亲的宽度</p>
  39.     <blockquote>
  40.         <div>
  41.             <p>.section-one-1{</p>
  42.             <p> display: flex;</p>
  43.             <p>flex-direction:row;</p>
  44.             <p>}</p>
  45.         </div>
  46.             <img  style="width: 61%;" src="/image/flex/1-1.png" alt="">
  47.             <img style="width: 61%;" src="/image/flex/1-2.png" alt="">
  48.     </blockquote>
  49.     <div class="section-one-1">
  50.         <span class="one">1</span>
  51.         <span class="two">2</span>
  52.         <span class="three">3</span>
  53.         <span class="four">4</span>
  54.         <span class="five">5</span>
  55.         <span class="six">6</span>
  56.         <span class="seven">7</span>
  57.         <span class="eight">8</span>
  58.         <span class="nine">9</span>
  59.     </div>
  60.     <p>column：主轴为垂直方向，起点在上。如下图</p>
  61.     <p>column-reverse：主轴为垂直方向，起点在下。</p>
  62.     <blockquote>
  63.         <div>
  64.             <p>.section-one-2{</p>
  65.             <p> display: flex;</p>
  66.             <p>flex-direction:column;</p>
  67.             <p>}</p>
  68.         </div>
  69.         <img src="/image/flex/1-3.png" alt="">
  70.         <img src="/image/flex/1-4.png" alt="">
  71.     </blockquote>
  72.     <div class="section-one-2">
  73.         <span class="one">1</span>
  74.         <span class="two">2</span>
  75.         <span class="three">3</span>
  76.     </div>
  77. </section>
  78. <section class="section-1">
  79.     <h1>2.<code>flex-wrap</code>属性</h1>
  80.     <p>默认情况下，项目都排在一条线（又称"轴线"）上。<code>flex-wrap</code>属性定义，如果一条轴线排不下，如何换行。</p>
  81.     <p><code>flex-wrap</code>属性有三个值 <code>nowrap | wrap | wrap-reverse</code>;</p>
  82.     <p>为<code>nowrap</code>值时，不换行。不管项目宽度值为多少，最大值也被均分在一行内</p>
  83.     <blockquote>
  84.         <div>
  85.             <p>.section-two-1{</p>
  86.             <p> display: flex;</p>
  87.             <p>flex-wrap:<code>nowrap</code>;</p>
  88.             <p>}</p>
  89.             <p>.section-two-1 span{</p>
  90.             <p>width:400px;</p>
  91.             <p> }</p>
  92.         </div>
  93.  
  94.         <img  style="width: 61%;" src="/image/flex/2-1.png" alt="">
  95.     </blockquote>
  96.  
  97.     <div class="section-two-1">
  98.         <span class="one">1</span>
  99.         <span class="two">2</span>
  100.         <span class="three">3</span>
  101.         <span class="four">4</span>
  102.         <span class="five">5</span>
  103.         <span class="six">6</span>
  104.         <span class="seven">7</span>
  105.         <span class="eight">8</span>
  106.         <span class="nine">9</span>
  107.     </div>
  108.     <p>为<code>wrap</code>值时，换行。第一行在最上面</p>
  109.     <blockquote>
  110.         <div>
  111.             <p>.section-two-2{</p>
  112.             <p> display: flex;</p>
  113.             <p>flex-wrap:<code>wrap</code>;</p>
  114.             <p>}</p>
  115.             <p>.section-two-1 span{</p>
  116.             <p>width:400px;</p>
  117.             <p> }</p>
  118.         </div>
  119.  
  120.         <img  style="width: 61%;" src="/image/flex/2-2.png" alt="">
  121.     </blockquote>
  122.  
  123.     <div class="section-two-2">
  124.         <span class="one">1</span>
  125.         <span class="two">2</span>
  126.         <span class="three">3</span>
  127.         <span class="four">4</span>
  128.         <span class="five">5</span>
  129.         <span class="six">6</span>
  130.         <span class="seven">7</span>
  131.         <span class="eight">8</span>
  132.         <span class="nine">9</span>
  133.     </div>
  134.     <p>为<code>wrap-reverse</code>值时，换行。第一行在最下面</p>
  135.     <blockquote>
  136.         <div>
  137.             <p>.section-two-3{</p>
  138.             <p> display: flex;</p>
  139.             <p>flex-wrap:<code>wrap-reverse</code>;</p>
  140.             <p>}</p>
  141.             <p>.section-two-1 span{</p>
  142.             <p>width:400px;</p>
  143.             <p> }</p>
  144.         </div>
  145.  
  146.         <img  style="width: 61%;" src="/image/flex/2-3.png" alt="">
  147.     </blockquote>
  148.  
  149.     <div class="section-two-3">
  150.         <span class="one">1</span>
  151.         <span class="two">2</span>
  152.         <span class="three">3</span>
  153.         <span class="four">4</span>
  154.         <span class="five">5</span>
  155.         <span class="six">6</span>
  156.         <span class="seven">7</span>
  157.         <span class="eight">8</span>
  158.         <span class="nine">9</span>
  159.     </div>
  160. </section>
  161. <section class="section-1">
  162. <h1>3. <code>flex-flow</code>属性</h1>
  163.     <p><code>flex-flow</code>属性是<code>flex-direction</code>属性和<code>flex-wrap</code>属性的简写形式，默认值为<code>row nowrap</code>。</p>
  164.     <blockquote>
  165.         <div>
  166.             <p>.section-three-1{</p>
  167.             <p> display: flex;</p>
  168.             <p>flex-flow:<code>column wrap-reverse</code>;</p>
  169.             <p> }</p>
  170.         </div>
  171.  
  172.         <img  style="width: 61%;" src="/image/flex/3.png" alt="">
  173.     </blockquote>
  174.  
  175.     <div class="section-three-1">
  176.         <span class="one">1</span>
  177.         <span class="two">2</span>
  178.         <span class="three">3</span>
  179.     </div>
  180. </section>
  181. <section class="section-1">
  182. <h1>4. <code>justify-content</code>属性</h1>
  183.     <p><code>justify-content</code>属性定义了项目在主轴上的对齐方式。</p>
  184.     <p><code>justify-content</code>属性有四个值: <code>flex-start | flex-end | center | space-between | space-around</code>;</p>
  185.     <p><code>flex-start</code>（默认值）：左对齐</p>
  186.     <p><code>flex-end</code>右对齐</p>
  187.     <p><code>center</code>： 居中</p>
  188.     <p><code>space-between</code>：两端对齐，项目之间的间隔都相等。</p>
  189.     <p><code>space-around</code>：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</p>
  190.     <p>具体对齐方式与轴的方向有关。默认一般从左至右，下图是<code> flex-direction: row-reverse;</code>从右至左</p>
  191.     <blockquote>
  192.         <div>
  193.             <p>.section-four-1{</p>
  194.             <p> display: flex;</p>
  195.             <p>justify-content:<code>space-around</code>;</p>
  196.             <p>    flex-direction: row-reverse;</p>
  197.             <p> }</p>
  198.         </div>
  199.  
  200.         <img  style="width: 61%;" src="/image/flex/4.png" alt="">
  201.     </blockquote>
  202.     <div class="section-four-1">
  203.         <span class="one">1</span>
  204.         <span class="two">2</span>
  205.         <span class="three">3</span>
  206.         <span class="four">4</span>
  207.     </div>
  208. </section>
  209. <section class="section-1">
  210.     <h1>5. <code>align-items</code>属性</h1>
  211.     <p><code>align-items</code>属性定义项目在交叉轴对齐方式</p>
  212.     <p><code>flex-start</code>交叉轴的起点对齐</p>
  213.     <p><code>flex-end</code>交叉轴的终点对齐 </p>
  214.     <p><code>center</code>交叉轴的中点对齐 </p>
  215.     <p><code>baseline</code>项目的第一行文字的基线对齐 </p>
  216.     <p><code>stretch</code>（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度</p>
  217.     <blockquote>
  218.     <div>
  219.         <p>.section-five-1{</p>
  220.         <p> display: flex;</p>
  221.         <p>align-items:<code>stretch</code>;</p>
  222.         <p> }</p>
  223.         <p>.section-five-1 .one{</p>
  224.         <p>height:200px;</p>
  225.         <p>line-height:50px;</p>
  226.         <p>}</p>
  227.         <p>.section-five-1 .two{</p>
  228.         <p>height:100px;</p>
  229.         <p>line-height:50px;</p>
  230.         <p>}.section-five-1 .three{</p>
  231.         <p>height:50px;</p>
  232.         <p>line-height:50px;</p>
  233.         <p>}</p>
  234.     </div>
  235.  
  236.     <img  style="width: 61%;" src="/image/flex/5-1.png" alt="">
  237. </blockquote>
  238.     <div class="section-five-1">
  239.         <span class="one">1</span>
  240.         <span class="two">2</span>
  241.         <span class="three">3</span>
  242.         <span class="four">4</span>
  243.     </div>
  244.     <blockquote>
  245.         <div>
  246.             <p>.section-five-2{</p>
  247.             <p> display: flex;</p>
  248.             <p>align-items:<code>baseline</code>;</p>
  249.             <p> }</p>
  250.             <p>.section-five-2 .one{</p>
  251.             <p>height:200px;</p>
  252.             <p>line-height:50px;</p>
  253.             <p>}</p>
  254.             <p>.section-five-2 .two{</p>
  255.             <p>height:100px;</p>
  256.             <p>line-height:50px;</p>
  257.             <p>}.section-five-2 .three{</p>
  258.             <p>height:50px;</p>
  259.             <p>line-height:50px;</p>
  260.             <p>}</p>
  261.         </div>
  262.  
  263.         <img  style="width: 61%;" src="/image/flex/5-2.png" alt="">
  264.     </blockquote>
  265.     <div class="section-five-2">
  266.         <span class="one">1</span>
  267.         <span class="two">2</span>
  268.         <span class="three">3</span>
  269.         <span class="four">4</span>
  270.     </div>
  271. </section>
  272. <section class="section-1">
  273. <h1>6. <code>align-content</code>属性</h1>
  274.     <p><code>align-content</code>属性定义多根轴线的对齐方式。如果项目只有一根轴线，则属性不起作用</p>
  275.     <p><code>flex-start</code>：与交叉轴的起点对齐。</p>
  276.     <p><code>flex-end</code>：与交叉轴的终点对齐。</p>
  277.     <p><code>center</code>：与交叉轴的中点对齐。</p>
  278.     <p><code>space-between</code>：与交叉轴两端对齐，轴线之间的间隔平均分布。</p>
  279.     <p><code>space-around</code>：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。</p>
  280.     <p><code>stretch</code>（默认值）：轴线占满整个交叉轴。</p>
  281. </section>
  282. <blockquote>
  283.     <div>
  284.         <p>.section-six-1{</p>
  285.         <p> display: flex;</p>
  286.         <p>align-content:<code>space-between</code>;</p>
  287.         <p> height: 600px;</p>
  288.         <p>border: 1px solid #000;</p>
  289.         <p>flex-flow: wrap;</p>
  290.         <p>}</p>
  291.         <p>.section-six-1 span{</p>
  292.         <p>width:300px;</p>
  293.         <p>}</p>
  294.     </div>
  295.  
  296.     <img  style="width: 61%;" src="/image/flex/6.png" alt="">
  297. </blockquote>
  298. <p>在运用 <code>align-content</code>时，要声明换行 <code>flex-flow:wrap</code></p>
  299. <div class="section-six-1">
  300.     <span class="one">1</span>
  301.     <span class="two">2</span>
  302.     <span class="three">3</span>
  303.     <span class="four">4</span>
  304.     <span class="five">5</span>
  305.     <span class="six">6</span>
  306.     <span class="seven">7</span>
  307.     <span class="eight">8</span>
  308.     <span class="nine">9</span>
  309. </div>
  310. <section class="section-1">
  311.     <h1>7.<code>order</code>属性</h1>
  312.   <p><code>order</code>属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。</p>
  313.     <blockquote>
  314.         <div>
  315.             <p>.section-seven-1{</p>
  316.             <p> display: flex;</p>
  317.             <p>}</p>
  318.             <p>.section-seven-1>span:first-child{</p>
  319.             <p>order:0</p>
  320.             <p>}</p>
  321.             <p>.section-seven-1>span:nth-child(5){</p>
  322.             <p>order:1;</p>
  323.             <p>}</p>
  324.             <p>.section-seven-1>span:nth-child(4){</p>
  325.             <p>order:2;</p>
  326.             <p>}</p>
  327.         </div>
  328.  
  329.         <img  style="width: 61%;" src="/image/flex/7.png" alt="">
  330.     </blockquote>
  331.     <div class="section-seven-1">
  332.         <span class="one">1</span>
  333.         <span class="two">2</span>
  334.         <span class="three">3</span>
  335.         <span class="four">4</span>
  336.         <span class="five">5</span>
  337.         <span class="six">6</span>
  338.         <span class="seven">7</span>
  339.         <span class="eight">8</span>
  340.         <span class="nine">9</span>
  341.     </div>
  342. </section>
  343. <section class="section-1">
  344.     <h1>8. <code>flex-grow</code>属性</h1>
  345.     <p><code>flex-grow</code>属性定义项目的放大比例，默认为0。</p>
  346.     <p>如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。</p>
  347.     <blockquote>
  348.         <div>
  349.             <p>.section-eight-1{</p>
  350.             <p> display: flex;</p>
  351.             <p>}</p>
  352.             <p>.section-eight-1>span:first-child{</p>
  353.             <p>flex-grow:1</p>
  354.             <p>}</p>
  355.             <p>.section-eight-1>span:nth-child(2){</p>
  356.             <p>flex-grow:1;</p>
  357.             <p>}</p>
  358.             <p>.section-eight-1>span:nth-child(4){</p>
  359.             <p>flex-grow:2;</p>
  360.             <p>}</p>
  361.             <p>.section-eight-1>span:nth-child(5){</p>
  362.             <p>flex-grow:1;</p>
  363.             <p>}</p>
  364.         </div>
  365.  
  366.         <img  style="width: 61%;" src="/image/flex/8.png" alt="">
  367.     </blockquote>
  368.     <div class="section-eight-1">
  369.         <span class="one">1</span>
  370.         <span class="two">2</span>
  371.         <span class="three">3</span>
  372.         <span class="four">4</span>
  373.         <span class="five">5</span>
  374.         <span class="six">6</span>
  375.         <span class="seven">7</span>
  376.         <span class="eight">8</span>
  377.         <span class="nine">9</span>
  378.     </div>
  379. </section>
  380. <section class="section-1">
  381.     <h1>9. <code>flex-shrink</code>属性</h1>
  382.     <p><code>flex-shrink</code>属性定义了项目的缩小比例，默认为1.即若空间不足，该项目将缩小</p>
  383.     <p>如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。</p>
  384.     <p>负值对该属性无效。</p>
  385.     <blockquote>
  386.         <p>.section-nine-1{display: flex;}</p>
  387.         <p>.section-nine-1 span{width:300px;}</p>
  388.         <p>.section-nine-1>span:first-child{flex-shrink:2;}</p>
  389.         <p>.section-nine-1>span:nth-child(2){flex-shrink:3;}</p>
  390.         <p>.section-nine-1>span:nth-child(4){flex-shrink:4;}</p>
  391.         <p>.section-nine-1>span:nth-child(5){flex-shrink:2;}</p>
  392.     </blockquote>
  393.     <div class="section-nine-1">
  394.         <span class="one">1</span>
  395.         <span class="two">2</span>
  396.         <span class="three">3</span>
  397.         <span class="four">4</span>
  398.         <span class="five">5</span>
  399.     </div>
  400.     <blockquote>
  401.         <p>实例解析：</p>
  402.         <p>flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。</p>
  403.         <p>本例中<b>显式定义</b>了</p>
  404.         <p>.section-nine-1>span:first-child==>flex-shrink: 2;</p>
  405.         <p>.section-nine-1>span:nth-child(2)==>flex-shrink:3</p>
  406.         <p>.section-nine-1>span:nth-child(4)==>flex-shrink:4</p>
  407.         <p>.section-nine-1>span:nth-child(5)==>flex-shrink:5</p>
  408.         <p><b>隐式定义</b>.section-nine-1>span:nth-child(3)==>flex-shrink:1</p>
  409.         <p>所以计算出来总共将剩余空间分成了 12 份，即2:3:1:4:2</p>
  410.         <p>我们可以看到父容器继承宽度为 1200px，子项被定义为 300px，子项相加之后即为 1500 px，超出父容器 300px。</p>
  411.         <p>那么超出的 300px 需要被 五个盒子消化通过收缩因子，所以加权综合可得 300*2+300*3+300*1+300*4+300*5=3600px。</p>
  412.         <p>于是我们可以计算 五个盒子 将被移除的溢出量是多少：</p>
  413.         <p>1 被移除溢出量：(300*2/3600)*300，即等于50px</p>
  414.         <p>2 被移除溢出量：(300*3/3600)*300，即等于75px</p>
  415.         <p>3 被移除溢出量：(300*1/3600)*300，即等于25px</p>
  416.         <p>4 被移除溢出量：(300*4/3600)*300，即等于100px</p>
  417.         <p>5 被移除溢出量：(300*2/3600)*300，即等于50px</p>
  418.         <p>最后1、2、3、4、5的实际宽度分别为：300-50=250px, 300-75=225px, 300-25=275px, 300-100=200px,300-50=250px，此外，这个宽度是包含边框的。</p>
  419.     </blockquote>
  420. </section>
  421. <section class="section-1">
  422.     <h1>10.1 <code> flex-basis</code>属性</h1>
  423.     <p><code> flex-basis</code>属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。</p>
  424.     <p>浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。</p>
  425.     <p>它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。</p>
  426.     <h1>10.2 <code>flex</code>属性</h1>
  427.     <p><code>flex</code>属性是<code>flex-grow</code>, <code>flex-shrink</code> 和 <code>flex-basis</code>的简写，默认值为0 1 auto。后两个属性可选。</p>
  428.     <p>该属性有两个快捷值：<code>auto (1 1 auto)</code> 和 <code>none (0 0 auto)</code>。</p>
  429.     <p> 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。</p>
  430.     <h1>10.3 <code>align-self</code>属性</h1>
  431.     <p><code>align-self</code>属性允许单个项目有与其他项目不一样的对齐方式，可覆盖<code>align-items</code>属性。默认值为auto，表示继承父元素的<code>align-items</code>属性，如果没有父元素，则等同于stretch。</p>
  432.     <p>属性取值五个值：auto | flex-start | flex-end | center | baseline | stretch; 其作用和align-items 的作用一样。</p>
  433. </section>
  434. </body>
  435. </html>

　　

87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）的更多相关文章

  1. 彻底搞懂flex弹性盒模型布局

    为什么要用flex 基于css3简单方便,更优雅的实现,浏览器兼容性好,传统的css实现一个div居中布局要写一堆代码,而现在几行代码就搞定了,没有理由不用flex. 兼容性: Base Browse ...

  2. flex弹性盒模型布局

    容器属性:1.flex-direction:项目的排列方向(1)row 主轴方向排列(2)row-reverse 主轴反方向排列(3)column 纵向排列(4)column-reverse 纵向反方 ...

  3. CSS3弹性盒模型布局模块介绍

    来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...

  4. 【css】弹性盒模型

    弹性盒模型flexBox 弹性盒模型是c3的一种新的布局模式 它是指一种当页面需要适应不同屏幕大小以及设备类型时,确保元素有恰当行为的布局方式. 引入弹性盒模型布局的目的是提供一种更有效的方法来对一个 ...

  5. Flex 弹性盒模型

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Web的Flex弹性盒模型

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. css之弹性盒模型

    弹性盒子(Flexible Box/filebox)是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式.引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子 ...

  8. box flex 弹性盒模型（转载）

    css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...

  9. columns分栏与flex弹性盒模型

    columns  分栏 值:column-width:设置每列的宽度        column-count:设置列数   例:columns{200px 3}   列数和宽度固定        co ...

随机推荐

  1. Eslint 允许使用双等号

    资料 网址 ESlint: Expected !== and instead saw != https://stackoverflow.com/questions/48375316/eslint-ex ...

  2. 01-C#笔记-hello_world

    /* * 主文件是 xxx.cs * 基本的 hello world 程序如下: */ using System; using System.Collections.Generic; using Sy ...

  3. python基础之二：占位符、格式化输出、while else 、逻辑运算

    1.占位符和格式化输出 示例代码 #格式化输出 # % s d # name = input('请输入姓名') # age = input('请输入年龄') # height = input('请输入 ...

  4. 10-day03-注释

    Python注释 msg = “我爱你中国!” #单行注释使用 ''''''多行注释使用 print(msg) #this code is for >>>> ‘’‘print( ...

  5. 博客索引and题目列表

    目录 笔记整理 计划 要学的东西 缺省源 要做的题 搜索 高斯消元 矩阵 排列组合 2019.7.9 2019.7.10 kmp ac自动机 2019.7.11 2019.7.15 笔记整理 1.同余 ...

  6. linux常用命令-nginx常用命令

    1.ctrl+alt+f2切换到命令界面 2.ifconfig查看IP 或者IP ADDR(en33 inter) 3.使用putty终端进行交互式操作 4.shell:提供用户输入的命令解释器 常用 ...

  7. BurpSuite pro v2.0 使用入门教程

    BurpSuite简介 BurpSuite是进行Web应用安全测试集成平台.它将各种安全工具无缝地融合在一起,以支持整个测试过程中,从最初的映射和应用程序的攻击面分析,到发现和利用安全漏洞.Burps ...

  8. win10系统:VMware无法在Windows运行该怎么办?

     出现的问题: 解决方法: 点击“检查更新”或去官网下载最新版本 Vmware15.5.0(经过测试发现,Windows 10上面可以运行Vmware15.5.0 ) VMware Workstati ...

  9. 2-3-4树（jdk8的TreeMap的红黑树）

    2-3树:插入变成2个节点正常插,变成3个节点就要提升中间节点和分裂子节点,满足:要么没有子节点,要么2个子节点,要么3个子节点. 2-3-4树:插入变成2个不动,插入变成3个不动,插入变成4个提升原 ...

  10. StringToKenizer和Scanner的区别

    相同点: StringToKenizer类和Scanner类都可用于分解字符序列中的单词! 不同点: StringToKenizer类把分解出的全部字符串都存放到StringToKenizer对象的实 ...