flex布局简易教程

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。属性的兼容性不错。除了在Webkit 内核的浏览器，必须加上-webkit前缀。其他浏览器都无需处理兼容性问题。

属性说明

flex属性主要分两种：

1. 设置在容器上的
2. 设置在项目上的

设置在容器上的属性主要有 :

     1.display:flex;//这条属性并不是flex专有的属性，但是只有这样设置了容器和它的子元素才能支持flex相关的属性。设置flex的话子元素的float，clear，vertical-align属性将失效

1. .content{

2. display:flex;

3. display:-webkit-flex; /* Safari */

4. }

     2.flex-direction//这条属性设置子元素的排列方向，共有四个值：

• • • row （默认值）水平向左排列
    • row-reverse  水平向右排列
    • column 垂直向下排列
    •  column-reverse; 垂直向上排列

1. .content{

2. flex-direction: row ;

3. flex-direction: column;

4. flex-direction: column-reverse;

5. flex-direction: row-reverse;/*用的时候只写一条就行，以下同样*/

6. }

    3.flex-wrap//这条属性设置当子元素一排放不下了将如何排列，共有三个值 ：

• • • nowrap（默认）：不换行。
    • wrap：换行，第一行在上方。
    • wrap-reverse：换行，第一行在下方。

  

    4.flex-flow//属性是flex-direction属性和flex-wrap属性的简写形式

    5.justify-content//这条属性定义了子元素在它排列方向上的对齐方式，共有五个值 ：

• • • flex-start（默认）：左对齐。
    • flex-end：右对齐。
    • center：居中对齐。 
    • space-between：两端对齐，分散对齐。
    • space-around：分散对齐，与上条不同的是，子元素将平分剩余空间。

   6.align-items//这条属性定义了与排列方向相垂直的方向上的排列方式，共有五个值：

• • • flex-start：上对齐。
    • flex-end：底部对齐。
    • center：居中对齐。 
    • baseline：以子元素第一行文字的基线对齐。
    • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

   7.align-content//这条属性定义当子元素在排列方向上不只一排时，排之间的对齐方式，也就是与排列方向垂直的方向上的排列方式，共有六个值：

• • • flex-start：排列的垂直方向起点对齐。
    • flex-end：排列的垂直方向终点对齐。
    • center：居中对齐。 
    • space-between：两端对齐，分散对齐。
    • space-around：分散对齐，与上条不同的是，子元素将平分剩余空间。
    • stretch（默认值）：高度拉伸布满空间。

设置在子元素上的属性主要有 :

   1.order//这条属性的值为大于等于零的整数，属性定义子元素的排列顺序。数值越小，排列越靠前，默认为0。

1. .item{

2. order: 1;

3. }

   2.flex-grow//这条属性的值为大于等于零的整数，属性定义子元素的放大比例，默认为0，即如果存在剩余空间，也不放大。

1. .item{

2. flex-grow: 0;

3. }

 

   3.flex-shrink//这条属性的值为大于等于零的整数，属性定义了子元素的缩小比例，默认为1，即如果空间不足，该子元素将缩小，值为0时，该项目不缩小。

1. .item{

2. flex-shrink: 1;

3. }

   4.flex-basis//属性定义了在分配多余空间之前，子元素占据的排列方向上的空间（main size）。浏览器根据这个属性，计算排列方向是否有多余空间。它的默认值为auto，即子元素的本来大小。

1. .item{

2. flex-basis: 100px;

3. }

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

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

总结

这两天一直在编写公司官网，公司要求网站要适配pc站和移动站，应用了flex布局在响应式方面的适配程度异常的好。代码还需多写写多练。还要多感谢阮一峰大神的教程