flex布局使用详解

flex布局是一种新型的布局方式，目前已经得到了所有主流浏览器的支持。

1.flex布局的实现

任何一个容器都可以指定为flex布局。
这里以横向排列作为示例。

display: flex;
display: -webkit-flex;  

注：
①webkit内核的浏览器需要加上 -webkit前缀。
②设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

---

2.flex布局容器的属性

①flex-direction

flex-direction 规定了flex容器的子元素，在主轴上的排列方式。有四个属性值：row | row-reverse | column | column-reverse;

• row：主轴为水平方向，起点在左端（默认选项）。
  

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

• column：主轴为垂直方向，起点在上沿。
  

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

②flex-wrap

默认情况下，所有的子元素在主轴中是沿着主轴直线排列的，flex-wrap规定当子元素超出容器范围，如何换行。可取三个属性值：nowrap | wrap | wrap-reverse;

• nowrap ：默认、不换行
  
• wrap ：换行，第一行在上方，被换行的在下方
  
• wrap-reverse ：换行，第一行在下方，被换行的在上方
  

③flex-flow

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

flex-flow: row nowrap;

④justify-content

justify-content 定义了子元素在主轴上的 对齐方式，可取：flex-start | flex-end | center | space-between | space-around

• flex-start 头部对其（横向排列是左对齐，垂直排列是上对其）
  

• flex-end 尾部对其（横向排列为右）
  

• center 居中对齐
  

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

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

  ⑤align-items

  align-items定义了子元素在交叉轴上如何对齐。可取：flex-start | flex-end | center | baseline | stretch;

• flex-start：头部对齐,当子元素设置高度时，默认对齐方式
  

• flex-end：尾部对齐
  

• center：居中对齐
  

• baseline：与第一个子元素基线对齐
  

• stretch：子元素未设置高度或者设置的高度为auto时，拉伸元素填满父元素。
  

⑥.align-content

align-content定义了当子元素中存在多个基线时，每条基线在交叉轴上的对齐方式。可取：flex-start | flex-end | center | space-between | space-around | stretch;
注： 这里需要注意的是只有当存在多条基线时，这个属性才生效，只有一条基线时，这个属性不生效。

1. flex-start ：相对于基线头部对齐

   

2. flex-end ：相对于基线尾部对齐
   

3. center ：相对于基线，中部对齐
   

4. space-between：相对于基线 两端对齐
   

5. space-around：每个项目两侧的间隔相等
   

3.子元素的属性

• order
  order定义了子元素在主轴上的排列顺序。数值越小，排列越靠前，默认为0。

<div class="flex-box">
    <div class="flex-item" style="order:8">order:8</div>
    <div class="flex-item" style="order:5">order:5</div>
    <div class="flex-item" style="order:3">order:3</div>
    <div class="flex-item" style="order:7">order:7</div>
    <div class="flex-item" style="order:2">order:2</div>
    <div class="flex-item" style="order:4">order:4</div>
    <div class="flex-item" style="order:6">order:6</div>
    <div class="flex-item" style="order:1">order:1</div>
</div>

• flex-grow
  flex-grow定义当项目有剩余空间时的放大比例，默认为0，即如果存在剩余空间，也不放大。
  
  

• flex-shrink
  flex-shrink定义了当子元素在主轴上的排列超出父元素的范围时，子元素的缩小比例；值越大，缩小比例越大；0代表不缩小，负值无效；

• flex-basis
  flex-basis定义在子元素分配剩余空间之前，子元素所占的大小；支持百分比；

<div class="flex-box">
    <div class="flex-item" style="flex-basis: 50%;flex-shrink:0;">flex-basis:50%</div>
    <div class="flex-item" style="flex-shrink:1;">flex-shrink:0</div>
    <div class="flex-item" style="flex-shrink:1;">flex-shrink:0</div>
    <div class="flex-item" style="flex-shrink:1;">flex-shrink:0</div>
</div>

• flex
  flex属性是flex-grow, flex-shrink 和 flex-basis的简写；

• align-self
  align-self属性将脱离在父元素交叉轴上的对齐方式，允许自己有特殊的对齐方式。取值：auto | flex-start | flex-end | center | baseline | stretch;使用方法类似于父元素的 align-items。
  

---