Flex布局

 

理解flex布局：首先先理解在整个布局中分为flex容器 ，和flex项目，这对之后的属性理解及使用非常关键。

 

定义一个flex容器非常简单，只要在CSS中添加  display:flex; 就行。在webkit内核的浏览器中必须加上-webkit前缀  display:-webkit-flex; 

 

理解项目在容器中应有的行为：

 

在这里flex-content是定义的一个flex容器，flex-item是定义的flex项目。容器及项目都有各自的属性。

<div class="flex-content">
      <div class="flex-item"></div>
      <div class="flex-item"></div>
      <div class="flex-item"></div>
</div>

.flex-content{
    display: flex;
    display: -webkit-flex;
}

.flex-item{
    width: 30%;
    height: 90%;
}

在这里，我们定义了一个flex容器以及三个flex项目（其他细节未给出详细代码），下面是效果图：

默认情况下：flex-item是横向从左到右排列在flex-content中的，不管item有多少项，未设置换行就只排列在一行中，不会换行。

下面是增加一个flex-item的效果：

在CSS中,flex-item的宽是设置了30%，但在此时失效了。因为flex-content的宽度不足以容纳第4个item。此时为了保持默认特性（不换行），只能将item平分容器的宽度，即我们所看到的。

 

理解了项目在容器中的默认特性后就可以跟容易理解容器属性及项目属性了

容器属性

顾名思义是定义在flex容器中的属性，容器属性定义了容器中所有的项目应有的行为及表现。有以下6个属性：

1.flex-direction

定义项目在容器中排列的方向，有4种属性值：row | row-reverse | column | column-reverse

.flex-content{flex-direction:row|row-reverse|column|column-reverse}

从前面我们可以了解到，item在容器中默认是横向从左到右排列的。除此之外，我们还可以将它设置为横向从右到左(row-reverse)、纵向从上到下(column)、纵向从下到上(column-reverse)

1.1 row（默认值） ,项目从左到右排列 .flex-content{flex-direction:row}

1.2 row-reverse,项目反向排列（从右到左） .flex-content{flex-direction:row-reverse} 

 

1.3 column,项目纵向排列，从上到下 .flex-content{flex-direction:column} 

1.4 column,项目从下到上排列 .flex-content{flex-direction:column-reverse} 

 

 

 

2.flex-wrap

定义了容器中的项目在容器宽度不足以容纳项目时是否换换行。

在这里我们给flex-item的宽定义为22%，即容器中在不改变item宽的以及不换行的情况下最多能容纳4个item：

2.1 nowrap(默认值)，item在容器中不换行,但item所设置的width可能失效。  .flex-content{flex-wrap:nowrap}  

可以看到，增加一个item后，若item不该变原来宽度(22%)时，容器将装不下item5。为了使item5能被容器装下且不换行，所有的item均分了容器的宽度。此时，item的width失效，不再是22%。

2.2 wrap,item宽度不改变，容纳不下新增item时，自动换行。 .flex-content{flex-wrap:wrap}  

 

此时item的width仍为22%。

2.3 wrap-reverse,反向换行，正常情况下换行是空间不够时向下换行，而wrap-reverse是空间不够时向上换行。 .flex-content{flex-wrap:wrap-reverse} 

 

3.flex-flow

是flex-direction与flex-wrap的简写形式 .flex-contetn{flex-flow:<flex-direction> <flex-wrap>} 

.flex-content{
    flex-flow:row wrap;
}

//相当于
.flex-content{
    flex-direction:row;
    flex-wrap:wrap;
}

 

4.justify-content

定义了项目的水平方向对齐方式，有5种属性值flex-start | flex-end | center | space-between | space-around

4.1 flex-start 项目左对齐  justify-content: flex-start 

4.2 flex-end 项目右对齐  justify-content: flex-end 

4.3 center 项目居中对齐  justify-content: center 

 

4.4 space-between 项目两端对齐  justify-content: space-between 

 

4.5 space-around 每一个项目的左右间隔都相等，相当于自动计算margin值  justify-content: space-around 

 

在这里每个item的左右margin值都是一样的，假设都是20px。则item1的左边到边框有20px的距离，item1与item2之间有40px的距离。

 

5.align-items

这个属性与justify-content恰好相反，align-items定义了项目的竖直方向对齐方式。其属性值有flex-start | flex-end | center | baseline | strectch

5.1 flex-start 项目顶端对齐  align-items: flex-start 

5.2 flex-end 项目底端对齐  align-items: flex-end 

5.3 center 项目居中对齐  align-items: center 

 

5.4 baseline 基于项目中第一行文字的基线对齐  align-items: baseline 

5.5 stretch 拉伸，占满整行高度  align-items: stretch 

项目高度被拉伸填充满flex容器的内容高度，注意，若项目被设置了固定高度，则不会被拉伸

 

6. align-content 定义了flex容器中有多行item时item的对齐方式。如果只有一行item，则此属性不起作用。

如之前说的，flex容器在没有显式地设置 flex-wrap:wrap; 时，默认是不换行的，即item只排列在一行。而align-content这个属性是要超过两行的item时才会生效。

6.1 flex-start 多行项目顶端对齐。 align-content:flex-start 

 

注意，换行后如果为声明  align-content:flex-start 的话行与行之间会有一个较大空隙。如下图

 

 

6.2  flex-end 多行项目底端对齐。 align-content:flex-end 

 

 

6.3 center 多行项目居中对齐。 align-content:center 

 

 

 

6.4 stretch 多行项目竖直方向均匀填充满flex容器。 align-content:stretch 

注意：如果给item设置了height则不会进行拉伸。

 

6.5 space-between 多行项目两端对齐。 align-content:space-between 

 

6.6 space-around 多行项目自动计算项目行间距。 align-content:space-around 

此处的间距都是自动计算的，并未设置任何margin值。

 

 

项目属性

项目属性作用于容器中的单个项目，可认为是个性化项目的一个属性

1.order 定义了项目的排列顺列，order的值越小，项目的排列位置越靠前。默认值为0。

 

.item1{    
    order:3; 
}

.item2{
    order:1;
}

.item3{
    order:2;
}

 

2. flex-grow 定义了项目的放大比例，默认值为0，表示不放大。

.item1{    
    flex-grow: 0;
}

.item2{
    flex-grow: 2;
}

.item3{
    flex-grow: 3;
}

在这里依次给item的flex-grow的值设置为0、2、3。其中0表示item的默认宽度，并没有放大。2、3表示将剩余的空间分为2+3=5份，其中item2占2/5份，item3占3/5份。

 

3. flex-shrink 定义了项目的缩小比例。默认值为1，表示当空间不足时将项目缩小至能被空间容纳

flex-shrink的值必须大于或等于0。当值为负数时，此值无效，相当于默认值。当值为0时，表示项目不缩放。值为1时，项目缩放。在这里，item的宽都被设置为50%，但是因为item1的flex-shrink值为0，所以不会被缩放，item2、item3的flex-shrink值为1，flex容器容纳不下时缩小了。

这里有个问题，当flex-shrink的值大于1时是怎样计算的呢，请看这里

.item1{    
    flex-shrink: 0;
}

.item2{
    flex-shrink: 1;
}

.item3{
    flex-shrink: 1;
}

 

 

4. flex-basis 定义了flex items 在被放进一个flex容器之前的大小(flex-basis含义)。默认值为auto。

通过flex-basis的含义可以很直观的感觉到flex-basis的作用跟width似乎一样。但是两者是有区别的，尽管两者都可以设置item的宽，但在flex容器中flex-basis的优先级高于width，即两者同时存在时，width会被屏蔽，无论代码中两者的先后顺序如何。

.item{
  flex-basis:150px;
  width:180px;    
}

可以看到，item的宽慰150px，即width被屏蔽。

有关flex-basis的更多，请参考这里

 

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

 

6. align-self 定义了单个项目的竖直方向对齐方式，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.flex-content{
  align-items:flex-start;  
}
.item2{
  align-self:flex-end;  
}

item1、item3未设置align-self，其默认值为auto，所以继承了父元素的flex-start保持顶端对齐。而item设置了align-self为flex-end，固item2是底端对齐的。

 

总结：

在理解记忆的时候，一定要按照容器属性以及项目属性的方向去思考

容器属性：

　　1.flex-direction（方向）

　　2.flex-wrap（换行）

　　3.flex-flow（方向、换行的简写）

　　4.justify-content（水平方向对齐）

　　5.align-items（竖直方向对齐）

　　6.align-content（多行对齐）

项目属性：

　　1.order（顺序）

　　2.flex-grow（放大）

　　3.flex-shrink（缩小）

　　4.flex-basis（宽）

　　5.flex（放大、缩小、宽的简写）

　　6.align-self  （单个竖直方向对齐）