前端布局-flex

1. 简介

Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。
flex是一种一维的布局，一次只能处理一行或一列。作为对比的是grid布局，它是二维布局，可以同时处理行和列上的布局（稍后会写另一篇笔记）。
任何一个容器都可以指定为 Flex 布局。设为 Flex 布局以后，容器中的直系子元素就会变成flex元素。flex元素的float、clear和vertical-align属性将失效。

  
item1
  
item2

2.属性介绍

2.1 容器属性

.flex {
  display: flex | inline-flex;
  flex-direction: row | row-reverse | column | column-reverse; /*决定主轴的方向（即项目的排列方向），默认为row*/
  flex-wrap: nowrap | wrap | wrap-reverse;/*如果一条轴线排不下，如何换行，默认为nowrap*/
  flex-flow:   || ;/*flex-direction和flex-wrap的简写，默认为row nowrap*/
  justify-content: flex-start | flex-end | center | space-between | space-around;/*项目在主轴上的对齐方式，默认flex-start*/
  align-items: flex-start | flex-end | center | baseline | stretch;/*项目在交叉轴上的对齐方式，默认stretch*/
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;/*多根主轴的对齐方式。若只有一根主轴，属性无效，默认stretch*/
}

2.2 子元素属性

.item {
  order: ; /*项目的排列顺序。数值越小，排列越靠前，默认为0*/
  flex-grow: ; /* 项目的放大比例，默认为0，即如果存在剩余空间，也不放大*/
  flex-shrink: ; /*项目的缩小比例，默认为1，即如果空间不足，该项目将缩小*/
  flex-basis:  | auto;/*在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目内容的尺寸。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间*/
  flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]; /*是flex-grow，flex-shrink，flex-basis的简写，默认是0 1 auto。none等同于0 0 auto，auto等同于1 1 auto*/
  align-self: auto | flex-start | flex-end | center | baseline | stretch;/*设置单个项目的对齐方式，可覆盖align-items属性，默认为auto，表示继承父元素的align-items属性，若没有父元素，则等同于stretch*/
}

flex元素默认行为即：

• 元素排列为一行（flex-direction为row)
• 元素从主轴的起始线开始（justify-content为flex-start)
• 元素不会在主维度方向拉伸，但是可以缩小（flex-grow为0，flex-shrink为1）
• 元素被拉伸来填充交叉轴大小（align-items为stretch）
• flex-basis为auto
• flex-wrap为nowrap

3.常用效果实现

左侧宽固定，右侧弹性，高度不固定

  
left fix 50px
  
right auto

上下左右居中

  
上下左右居中

导航条

  

    

        
项目1
        
项目2
        
个人中心
        
帮助
    
  

圣杯布局

  
header
  

    
content
    
left
    
right
  
  

    
center
  

骰子

示例代码

参考：阮一峰老师的教程：
Flex 布局教程：语法篇
Flex 布局教程：实例篇
使用自动的外边距在主轴上对齐