Flex 布局

Flex布局

1 . 传统布局 display属性+position属性+float属性

--------垂直居中不便利

2 . flex 网格布局  css  flexbox (弹性布局)

设置为flex布局之后 子元素的float  clear  vertical-align  失效

@1  任何容器都可以指定为flex布局

display:flex;  盒子元素

display:inline-flex  行内元素

display:-webkit-flex;/*safari*/

3 . 基本概念

@1 被设置为flex的元素 称为容器  他的子元素自动称为容器成员，简称项目

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

4 . 容器的属性

@1: flex-direction  决定主轴的方向

row  row-reverse  column  column-reverse

flex-wrap  默认情况下，项目都排在一条线(轴线)上，flex-wrap属性定义，

如果一条轴线排不下，如何换行

        nowrap              默认不换行  全部挤在一行 压缩自身项目

        wrap                    换行第一行在上方 第二行又从主轴起点开始排列

  wrap-reverse      换行 第二行在第一行上面，第二行起点还是主轴起点

flex-flow 是flex-direction 和flex-wrap属性的简写，默认为row nowrap

flex-flow:  row || nowrap;

justify-content 定义了项目在主轴的对齐方式

flex-start（左对齐） 

      flex-end (右对齐)  center(居中对齐)

space-between(两端对齐 项目之间的间隔都相等)

space-around(每个项目两侧的距离都相等，

所以项目与项目之间的距离与边框的间隔大一倍)

align-items 项目与交叉轴上的对齐

flex-start 交叉起点对齐

      flex-end  交叉的终点对齐

center  交叉中点对齐 

baseline  项目第一行文字的基线对齐

stretch  项目未设置搞定或者未auto 则被拉伸

align-content (交叉轴) 定义了多条轴线的对齐方式  用  |  连接

flex-start 与交叉轴的起点对齐

flex-end 与交叉轴的终点对齐

center    与交叉轴的中点对齐

space-between  与交叉轴两端对齐 轴线之间的间隔平均

spece-around  没根轴线的两侧距离相等  项目之间的距离是边框的两倍

stretch    轴线沾满整个交叉轴5

5.order属性

@1  定义项目的排列顺序  数值越小 排列越靠前  默认为0

6.flex-grow属性

@1 定义项目的放大比例 默认为0 即如果存在剩余空间  也不放大

如果所有的项目的flex-grow 都为1 ，则将他们等分剩余的空间，如果有一个项目为2  其他为1  则他所所占据的空间比其他多一倍

7.flex-shrink属性

@1定义属性的缩小比例  默认为1  如果空间不足该项目将缩小

如果所有的项目的flex-shrink属性都是1  当空间不足时 都将等比例缩小，如果一个项目的=flex-shrink=0 起他都为1  剩余空间不足时  前者不缩放

8.flex-basis  属性

@ 在分配多余空间之前  项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有剩余空间。如果默认为auto,即项目的本来大小

它可以设置width  height  属性一样的值（350px） 改项目占据固定大小

9.flex属性

是flex-grow  flex-shrink  flex-basis  的简写  默认为  0 1 auto; 后面两个属性可选

10.align-self属性