CSS中的flex布局

概念：

    Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
布局的传统解决方案，基于盒状模型，依赖display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

1.flex布局体验

• 传统布局
  • 兼容性好
  • 布局繁琐
  • 局限性，不能在移动端很好的布局
• flex弹性布局
  • 操作方便，布局简单，移动端应用广泛
  • PC端浏览器支持情况较差
  • IE 11 或更低版本，不支持或仅部分支持

 

建议：

如果是PC端页面布局，还是传统布局。

如果是移动端或者不考虑兼容性问题的PC端页面布局，可以使用flex弹性布局。

 

2、基本概念

 

 

3、容器属性

    （1）flex-direction：容器内子元素的排列方向，默认是平行，由左向右排列。

 

   （2）flex-wrap：元素放不下时，换行。默认情况下，如果容器内子元素的总宽大于容器宽度时，默认不会换行，而是按比例缩小容器宽度。

 

（3）justify-content：属性定义了项目在主轴上的对齐方式

 

（4）align-items

 

（5）align-content：定义了多根轴线的对齐方式

 

 

4、项目属性

（1）order：属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

 

（2）flex-grow：定义项目的放大比例（剩余空间按比例分配）。默认为0，即如果存在剩余空间，也不放大。

 

（3）flex-shrink

 

(4)dlex-basis

 

(5)align-self