Flex布局

父元素属性

想要使用flex布局，首先需要给父元素指定为flex布局，这样容器内的元素才能实现flex布局： 这里有两种方式可以设置flex布局，使用display: flex;会生成一个块状的flex容器盒子，使用display: inline-flex;会生成一个行内的flex容器盒子。如果我们使用块状元素，比如div标签，就可以使用flex，如果使用行内元素，就可以使用inline-flex。 父元素（容器）可以设置以下六个属性：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

1. flex-direction

flex-direction：主轴方向，它决定了容器内元素排列方向，它有四个属性值：

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

• flex-direction: row：默认值，沿水平主轴从左到右排列，起点在左沿
  
• flex-direction: row-reverse：沿水平主轴从右到左排列，起点在右沿
  
• flex-direction: column：沿垂直主轴从上到下排列，起点在上沿
  
• flex-direction: column-reverse：沿垂直主轴从下到上排列，起点在下沿
  

2. flex-wrap

flex-wrap：容器内元素是否可以换行，它有三个属性值：

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

• flex-wrap: nowrap：默认值，不换行。当主轴的长度是固定并且空间不足时，项目尺寸会随之进行调整，而不会换行。
  
• flex-wrap: wrap：换行，第一行在上面
  
• flex-wrap: wrap-reverse：换行，第一行在下面
  

3. flex-flow

flex-flow 是 flex-direction 属性和flex-wrap属性的简写，默认为:flex-flow:row nowrap，用处不大，最好还是分开来写。该属性的书写格式如下：

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

4. justify-content

justify-content：元素在主轴的对齐方式，它有五个属性值

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

• justify-content : flex-start：默认值，元素在主轴上左对齐（上对齐）
  
• justify-content : flex-end：元素在主轴上右对齐（下对齐）
  
• justify-content : center ：元素在主轴上居中对齐
  
• justify-content : space-between：元素在主轴上两端对齐，元素之间间隔相等
  
• justify-content : space-around ：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
  

5. align-items

align-item：元素在交叉轴上的对齐方式，它有五个属性值：

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

这里以水平方向为主轴进行举例，即flex-direction: row。

• align-item：flex-start：交叉轴的起点对齐（上面或左边）。设置容器高度为 100px，项目高度分别为 20px、40px、60px、80px、100px，效果如图所示：
  
• align-item：flex-end：交叉轴的终点对齐（下面或右边）。设置容器高度为 100px，项目高度分别为 20px、40px、60px、80px、100px，效果如图所示：
  
• align-item：center：交叉轴的中点对齐。设置容器高度为 100px，项目高度分别为 20px、40px、60px、80px、100px，效果如图所示：
  
• align-item：stretch：默认值、如果元素未设置高度或设为auto，将占满整个容器的高度。假设容器高度设置为 100px，而项目没有设置高度，则项目的高度也为 100px：
  
• align-item：baseline：以元素的第一行文字的基线对齐
  

6. align-content

align-content：多根轴线对齐方式。如果元素只有一根轴线，该属性不起作用。它有六个属性值：

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

• align-content: stretch：默认值，轴线占满整个交叉轴。这里我们先设置每个项目都是固定宽度
  
• 下面就去掉每个项目的高度，它会占满整个交叉轴：
  
• align-content: flex-start：从交叉轴开始位置填充
  
• align-content: flex-end：从交叉轴结尾位置填充
  
• align-content: center：与交叉轴中点对齐
  
• align-content: space-between：与交叉轴两端对齐，轴线之前的间隔平均分布
  
• align-content: space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
  

子元素属性

子元素有以下六个属性：

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self