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;

<div id="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div></div>

#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

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

1. 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

1. 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

1. 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

1. align-items

• align-items: center
  

  

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

• align-items: flex-end
  

  

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

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

• align-content: flex-end
  

  

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

• align-content: center
  

  

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

  
  容器属性说完了，再来研究一下元素属性

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

  #box1 {    order: 100;
  }

子元素添加order属性.png

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

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

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

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

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

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

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

   

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

   
   

   

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

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

作者：NSO
链接：https://www.jianshu.com/p/9eb36117fabe