flex布局

flex布局已经是前端中常用的一种布局方式了，目前现代浏览器的支持也不错（IE较差）

各浏览器支持程度.png

下面就一起学习一下flex布局。
在做试验之前先看一个先导概念：

• Flex布局外层父容器称为Flex容器（flex container），简称”容器”
• 它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
• 子元素在父元素的主轴上排列，主轴为父元素的横向或纵向，可以自己定义
  示意图（来源：http://www.runoob.com/w3cnote/flex-grammar.html）：
  
  

  flex布局概念.png

理解完上面的概念后，我们通过在一个容器中试验相关属性来掌握flex布局
先画一个大框作为容器

原始图.png

接下来就在这个容器里各种试验

1. 先给大容器增加一个display: flex;

    
1
    
2
    
3

#container {
    width: 1000px;
    height: 600px;
    border: 1px solid crimson;
    margin-left: 100px;
    display: flex;  
}
.box {
    width: 100px;
    height: 100px;
    background-color: yellow;
}

容器添加display:flex属性.png

目前一切正常
接下来给容器添加一些属性

2. flex-direction

• flex-direction: row
  
  

  容器添加flex-direction属性.png
• flex-direction: row-reverse
  
  

  容器添加flex-direction: row-reverse属性.png
• flex-direction: column
  
  

  容器添加flex-direction: column属性.png
• flex-direction: column-reverse
  
  

  容器添加flex-direction: column-reverse属性.png

3. flex-wrap

• flex-wrap: nowrap
  这样会强制不换行，每个子元素会被压缩

#container {
  width: 1000px;
  height: 600px;
  border: 1px solid crimson;
  margin-left: 100px;
  display: flex;
  flex-wrap: nowrap;
}
.box {
  width: 300px;
  height: 100px;
  background-color: yellow;
}

容器添加flex-wrap: nowrap属性.png

• flex-wrap: wrap
  
  

  容器添加flex-wrap: wrap属性.png

4. justify-content
   搞明白子元素的排序，接下来看怎么控制每个子元素的对齐情况

• justify-content: flex-start
  
  

  容器添加justify-content: flex-start属性.png
• justify-content: flex-end
  
  

  容器添加justify-content: flex-end属性.png
• justify-content: space-around
  
  

  容器添加justify-content: space-around属性.png
• justify-content: space-between
  
  

  容器添加justify-content: space-between属性.png

5. align-items

• align-items: center
  
  

  容器添加align-items: center属性.png
• align-items: flex-end
  
  

  容器添加align-items: flex-end属性.png

6. align-content
   除了控制单个子元素的相对位置，所有轴线的相对位置也可控

• align-content: flex-end
  
  

  容器添加align-content: flex-end属性.png
• align-content: center
  
  

  容器添加align-content: center属性.png
  
  容器属性说完了，再来研究一下元素属性

7. order
order控制子元素的优先级

  #box1 {
    order: 100;
  }

子元素添加order属性.png

8. flex-grow/flex-shrink
flex-grow/flex-shrink控制子元素的大小，在空间足够的情况下会按数字比例扩大/缩小

#box1 {
  flex-grow: 2;
  background-color: coral;
}

子元素添加flex-grow属性.png

9. flex-basis
flex-basis控制单个子元素在主轴占据空间的大小

.box {
  width: 300px;
  height: 100px;
  background-color: yellow;
}
#box1 {
  flex-basis: 100px;
  background-color: coral;
}

子元素添加flex-basis属性.png

10. align-self
align-self可以控制单个子元素在主轴上的对齐位置
    
    

    子元素添加align-self: flex-end属性.png
    
    
    

    子元素添加align-self: center属性.png

至此，flex布局就全部介绍完了，完全理解这些属性后灵活搭配它们就可以在页面布局中使用啦。