flex布局属性介绍

标签：

flex布局为弹性布局，在布局方便提供很大的便利。

flex布局的定义
 　　Flex是Flexible Box的缩写，意为"弹性布局"，任何一个容器都可以指定为Flex布局。　

.box{
       display:flex | inline-flex;
       display: -webkit-flex | -webkit-inline-flex;   
}

ps：设置为flex后，子元素的float，vertical-align,clear属性会失效。

flex父元素属性

　1.　flex-direction：指定项目排列方式。

.box{
      flex-direction: row | row-reverse | column | column-reverse;       
}

-row:默认值，水平排列，起点在左端。

-row-reverse:水平排列，起点在右端。

-column:垂直排列，起点在上端。

-column-reverse:垂直排列，起点在下端。

   2.　flex-wrap:如果一行排不下，指定换行方式。

.box{
       flex-wrap: nowrap | wrap | wrap-reverse;
} 

-nowrap:默认值，不换行。

-wrap:换行，第一行在上方。

-wrap-reverse:换行，第一行在下方。

   3.　flex-flow:是flex-direction和flex-wrap的简写形式。

.box {
       flex-flow: <flex-direction> || <flex-wrap>;
}

默认值为row || nowrap。

   3.justify-content:项目对齐方式。

.box {
      justify-content: flex-start | flex-end | center | space-between | space-around;
}

-flex-start:默认值，左对齐。

-flex-end:右对齐。

-center：居中。

-space-between:两端对齐，各个项目间隔都相等。

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

  4.align-items:定义项目对齐方式。

.box {
      align-items: flex-start | flex-end | center | baseline | stretch;
}

-stretch:默认值，若未设置高度或者高度为auto，则占满整个高度。

-flex-start:起点对齐。

-flex-end:终点对齐。

-center:中点对齐。

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

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

 .box {
      align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

-stretch:默认值，轴线占满整个交叉轴。

-flex-start:起点对齐。

-flex-end:终点对齐。

-center:中点对齐。

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

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

flex子元素属性

   1.order：定义项目排列顺序，数字越小，排列越靠前，默认值为0。

.item {
      order: <integer>; 
}

2.flex-grow：项目放大比例，默认值为0，即为存在剩余空间值也不放大。

    .item {
      flex-grow: <number>; 
    }

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

   3.flex-shrink：定义项目缩小比例，默认为1，即为空间不足，项目将缩小。

    .item {
      flex-shrink: <number>; 
    }

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

  4.flex-basis：在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。默认值为auto，即为项目本来大小。

    .item {
      flex-basis: <length> | auto; 
    }

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

.item {
  flex: none | [ <‘flex-grow‘> <‘flex-shrink‘>? || <‘flex-basis‘> ]
}

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

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

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

    .item {
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }

该属性除了auto，其他与align-item属性完全一致。

flex布局属性介绍

标签：

原文地址：http://www.cnblogs.com/hesuy/p/5430133.html