flex布局问题

本文主要记录flex布局demo和属性问题

flex顾名思义，弹性盒子的布局属性。使用此属性得设置一个父级，然后操作父级中的子元素
heml代码

    

        
a
        
b
        
c
        
d
        
e

        
a
        
b
        
c
        
d
        
e
    

备注：可以指定任意一个容器元素为父级.father{ display:flex; }，行内元素同样可以.father { display:inline-flex }。Webkit 内核的浏览器，必须加上-webkit前缀，示：display:-webkit-flex。
图示：

image.png

以上一个基本的弹性盒子算是创建完成了，下面详细介绍关于flex父级框的属性问题

元素	值	说明
flex-direction	row 、row-reverse 、 column 、 column-reverse	主轴排列方向上、下、左、右
flex-wrap	nowrap 、 wrap 、 wrap-reverse	默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行
flex-flow	row nowrap （默认）	flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content	flex-start 、 flex-end 、 center 、 space-between 、 space-around	子元素在主轴上的对齐方式，分别是左对齐、右对齐、居中对齐、居中两端对齐、分散两端对齐
align-items	flex-start、flex-end、center、baseline、stretch	交叉轴的起始点对齐，中间对齐，终点对齐，文字基线对齐，高度占满
align-content	flex-start、flex-end、center、space-between、space-around、stretch	一言概之，相当于纵向轴的align-items(必须有多个中心轴才可使用)

看到上面密密麻麻的属性很蒙圈不要紧，下面贴出相应的demo

flex-direction属性

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

image.png

flex-wrap属性

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

image.png

image.png

image.png

flex-flow属性

flex-flow是flex-direction和flex-wrap
比如：flex-flow: || ;等效于flex-direction:和flex-wrap

justify-content属性

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

image.png

align-items属性

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

image.png

align-content属性

image.png

转载说明：以上列举所有父级的属性的demo，文中主要内容来自http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
阮一峰大神的日志，