css布局方式

传统盒模型（display+position+float)

flexbox(flex布局）弹性布局

阮一峰 flex布局教程

• 元素设置为 display: flex之后，子元素的float, clear, vertical-align属性将失效

• flex布局 = 容器( container ) + 容器内各种子元素（ items )
  
  容器默认存在两根轴：水平的主轴（main axis) 和 垂直的交叉轴（ cross axis)
  主轴 开始位置main start， 结束位置 main end
  交叉轴 开始位置 cross start ， 结束位置 cross end
  items默认沿主轴排列

• 容器 container 的属性
  flex-direction: row（默认，从左到右） | row-reverse（从右到左） | column（从上到下） | column-reverse（从下到上）; //决定主轴的方向，即items得排列方向
  flex-wrap：nowrap（默认，不换行）| wrap（换行，第一行在上） | wrap-reverse; // 如果一条轴线排不下，如何换行
  flex-flow：flex-direction || flex-wrap;
  justify-content: flex-start（默认，左对齐） | flex-end（右对齐） | center（居中) | space-between(两端对齐，items间间隔相等） | space-around（items两侧的间隔相等，items间的间隔比item与边框的距离大）; //定义items在主轴上的对齐方式
  align-items：flex-start(默认，交叉轴起点对齐） | flex-end(终点对齐) | center (交叉轴居中) | baseline(items第一行文字的基线对齐) | stretch(若items未设置高度或为auto,将占满整个容器的高度); //定义items在交叉轴上如何对齐
  align-content：flex-start(交叉轴的起点对齐）| flex-end | center | space-between | space-around（默认,轴线占满整个交叉轴); //定义多根轴线的对齐方式

• 项目items的属性
  order: integer; //定义items的排列顺序。数值越小，排列越靠前。默认为0
  flex-grow: number; //定义项目的放大比例。默认为0
  flex-shrink:number; //定义项目的缩小比例。默认为1；
  flex-basis:length | auto; //主轴空间，默认为auto
  flex:[flex-grow flex-shrink flex-basis]; 默认0 1 auto
  align-self: auto(默认) | flex-start | flex-end | center | baseline | stretch; //允许单个项目item与其他项目不一样对的对齐方式。

grid

掘金css grid布局