flex布局总结

Flex布局，可以简便、完整、响应式地实现各种页面布局

首先：任何容器都能使用flex布局（webkit内核需要添加前缀）

.box{
  display: flex;
}

使用flex后子元素的float,clear,vertical-algin属性都会失效;

flex容器介绍：

 

flex容器属性：

1.flex-direction:row|row-reverse|column|column-reverse 布局的方向

     1.row表示从左到右（默认）

     2.row-reverse表示从右到左

     3.column表示从上到下

　  4.column-reverse表示从下到上

2.flex-wrap: nowrap | wrap | wrap-reverse 内容超出容器时的操作

    1.nowrap（默认）：不换行

    2.wrap：换行，第一行在上方

    3.wrap-reverse：换行，第一行在下方。

3.flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

 

4.justify-content: flex-start | flex-end | center | space-between | space-around; （水平轴方向对齐方式）

 ！justify-content属性定义了项目在主轴上(横轴)的对齐方式。(与flex-direction不同,这个是定义位置)

   1.flex-start:主轴的开始（左）

   2.flex-end:主轴的j结束(右)

   3.center：横轴中心

   4.space-between：两端对齐，项目之间的间隔都相等（！可用于多列布局）

   5.space-around: 每个项目两侧的间隔相等

 

5.align-items: flex-start | flex-end | center | baseline | stretch; （垂直轴方向对齐方式）

   

  1.flex-start：交叉轴的起点对齐。

  2.flex-end：交叉轴的终点对齐。

  3.center：交叉轴的中点对齐。

  4.baseline: 项目的第一行文字的基线对齐。

  5.stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

 flex容器的子元素称为项目，项目同样也有一些属性：

 1.flex-grow：0或者非0；当空间有剩余时是否伸展占据全部空间；

 2.align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch