注意：主轴不一定是水平方向
容器的属性（flex contanier）
1. flex-driection：表示水平轴的方向
flex-direction: row | row-reverse | column | column-reverse;复制代码
属性值：
row：水平方向，起点在左（默认值） row-reverse：水平方向，起点在右 column：垂直方向，起点在上 column-reverse：垂直方向，起点在下2. flex-wrap：项目（flex item）所在的一条线成为轴线，flex-wrap设置项目如何换行
flex-wrap: nowrap | wrap | wrap-reverse;复制代码
属性值：
nowrap：不换行（默认值） wrap：换行 ， 从上至下排列 wrap-reverse：换行，从下至上排列注：flex-direction 与 flex-wrap 可以合并成 flex-flow 属性
flex-flow:|| ;复制代码
3. justify-content：定义了项目在主轴上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;复制代码
属性值：
flex-start：左对齐（默认值） flex-end：右对齐 center：居中 space-between：两端对齐，项目之间的间隔都相等 space-around：项目间距相等，边缘项目与边缘距离是项目与项目距离的一半图示：
4.align-items：定义了项目在交叉轴上的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch;复制代码
属性值：
stretch：如果项目未设置高度或设为auto，将占满整个容器的高度（默认值） flex-start：交叉轴起点对齐 (即图1：cross star) flex-end：交叉轴终点对齐 (即图1：cross end) center：交叉轴的中点对齐 baseline：项目的第一行文字的基线对齐图示：
5. align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用，即常与flex-wrap联合使用
align-content: flex-start | flex-end | center | space-between | space-around | stretch;复制代码
属性值：
stretch：轴线占满交叉轴（默认值） flex-start：与交叉轴的起点对齐 (即图1：cross star) flex-end：与交叉轴的终点对齐(即图1：cross end) center：与交叉轴的中点对齐 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布 space-around：项目间距相等，边缘项目与边缘距离是项目与项目距离的一半（垂直方 向）图示：
总结：
flew-direction决定主轴方向 flew-wrap决定交叉轴换行 flew-flow是上面两者合并 justify-content 主轴对齐方式 align-items 交叉轴对齐方式 align-content 多个交叉轴对齐方式项目的属性（flex item）
1. order：项目的排列顺序，越小越靠前，默认值0
order:;复制代码
2. flex-grow：项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-grow:; /* default 0 */复制代码
注：如果项目（item）的flex-grow都为1 ，它们将等分剩余区域
3. flex-shrink：项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-shrink:; /* default 1 */复制代码
注：如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小
4.flex-basis：在分配多余空间之前，项目占据的主轴空间（即图1：main size）
flex-basis:| auto; /* default auto */复制代码
注：它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
*注：flex属性为flex-grow, flex-shrink 和 flex-basis的合并 ， 默认值为 0 1 auto ， 既保持项目 原本大小情况下 ， 不进行放大 ， 如果空间不足 ， 则等比例缩小
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。5. align-self ： 项目自己的交叉线对齐方式 ， 覆盖容器（flex contanier）的align-item属性
align-self: auto | flex-start | flex-end | center | baseline | stretch;复制代码
注：属性值与align-item相同 ， 多了一个auto默认值 ， 即继承 align-item 对齐方式
总结
order 决定项目先后顺序 flex-grow 决定项目的放大比例flex-shrink 决定项目缩小比例 flex-basis 决定项目初始所占大小 flex 为flex-grow 、 flex-shrink 、 flex-basis 合并项 align-self 决定项目交叉轴对齐方式.box{ display: flex;}行内元素也可以使用Flex布局。.box{ display: inline-flex;}兼容写法display: -webkit-flex;display：-webkit-box;注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效复制代码 题目一 ：让一个容器水平垂直居中
.wrap { background: black; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; } .center { background: red; width: 100px; height: 100px; } 复制代码 题目二：假设高度已知,请写出三栏布局,左右各为300px,中间自适应
.wrap{ display: flex; height: 1000px; } .left{ width: 300px; background: red; } .center{ flex:1; background: yellow; } .right{ width: 300px; background: blue; } 1 这是三栏布局的flexbox布局解决方案； 这是三栏布局的flexbox布局解决方案； 这是三栏布局的flexbox布局解决方案； 这是三栏布局的flexbox布局解决方案； 3 复制代码