关于CSS flex布局学习笔记整理

1.传统的布局方案

display属性
position属性
float属性

2.新推荐的布局方案

flex布局,将成为未来布局方案的首选
响应式实现各种页面布局
任何一个容器都可以指定为flex布局
主流浏览器已基本全部支持
不同内核的浏览器注意添加前缀问题
子元素的float \clear\ vertical-align属性会失效
    1.块元素 display:flex
    2.行内元素 display: line-flex

3.使用flex属性指定一个父容器,以下常用属性用在父容器上

flex-direction: 指定子元素的排列方向, 
     (row | row-reverse | column | column-reverse)
flex-wrap: 指定子元素排列在一条线上,如果一条线排不下如何换行?
     (nowrap | wrap | wrap-reverse)
flex-flow: 为前两者的缩写 ,默认值为row nowrap  
justify-content: 定义子元素的对齐方式
    [flex-start(左对齐) | flex-end(右对齐) | center(居中)]
    [space-between(两端对齐,每个子元素之间间隔相等)]
    [space-around(每个子元素两侧的间隔相等,且间距比子元素到边框的间隔大一倍)]
align-items: 每个子元素在交叉轴上对齐方式
    (flex-start|flex-end|center|baseline|stretch)
    baseline 第一行文字的基线对齐
    stretch 如果项目未设置高度或者设为auto,将占满整个容器的高度
    align-content:多个子元素的对齐方式,如果只有一种轴线,则不起作用

4.以下6个属性用在子元素上

order: 0
    定义每个子元素的排列顺序,数值越小排列越靠前,默认值为0
flex-grow: 0
    定义子元素的放大比例,默认为0,
    如果为1,则每一个子元素将会等分剩余空间
    如果其中一个子元素为2,其他的子元素为1,则改元素所占空间是其他子元素的2倍
flex-shrink:1
    定义子元素的缩小比例,默认1,如果空间不足,则该元素就会缩小
    如果都为1,则空间不足的时候等比例缩小
    如果改元素为0,其他子元素为1,空间不足时,则改元素不缩小
flex-basis:auto
    定义子元素在分配多余空间之前,子元素占据的空间,浏览器则会自动计算多余空间
    如果给定宽高,则改元素将占据固定的空间
flex:0 | 1 | auto
    为flex-grow|flex-shrink|flex-basis属性的缩写
align-self: auto
    指定某个子元素与其他子元素不同的对齐方式
    会覆盖父元素align-items属性
    (auto | flex-start | flex-end | center | baseline | stretch)

关于弹性布局更多学习点击如下链接即可:
[http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html]