详解css3 flex 布局实例

flex 布局是 css3 中使用最频繁也是最出色的功能，有点复杂，分为应用在容器上的属性和项目上的属性，即父元素上的与子元素上的属性。

父元素上的属性

• display: flex

    
        abcdefghi  

  当父元素设置为 flex 后，其父元素自身会表现成块级元素，如果想表现为行内元素，可以使用 inline-flex。 所有子元素不管是块级的还是行内的，会立即变成行内布局，这是其他属性的默认值所致的，后面可以修改。
  

  

• flex-direction

  立即学习“前端免费学习笔记（深入）”；

    
        abcd  
    
        abcd  
    
        abcd  
    
        abcd  

  flex-direction 决定子元素的排列方向，默认值 row。

  

• flex-wrap

    
        abcd  
    
        abcd  
    
        abcd  

  flex-wrap 决定子元素超出一行时应该如何处理，默认值 nowrap 会压缩子元素的宽度，wrap 是换行，wrap-reverse 则是向上增加新一行。注意：这是在主轴为X轴的前提下讨论的。

  

• justify-content

    
        abcd  
    
        abcd  
    
        abcd  
    
        abcd  
    
        abcd  

  justify-content 决定子元素在主轴（当前是X轴）上的位置，默认值 flex-start。space-between 与 space-around 的间隔是多余空间平分出来的，但后者会为左右端也计入空间。

  

• align-items

    
        abcd  
    
        abcd  
    
        abcd  
    
        abcd  
    
        abcd  

  align-items 决定副轴（当前为Y轴）上元素的对其方式。默认值 stretch，表示当子元素不设置高度时，充满父类高度。

  

• align-content

  

  PHP5 MySQL 编程入门

  既有较为详细的PHP与MySQL基础知识介绍，也有大量针对不同应用的技术说明，并伴随了大量小而精的示例来加深读者的理解，便于通过实验来掌握知识并学会应用。令书以PHP开发者为核心，从环境搭建到系统开发，从局部技术点到项目全程把握，立体式介绍了PHP5+MySQL的技术要点以及丰富的延伸知识，可以让读者享受到提升开发能力的极速体验。

  下载

    
        abcd  
    
        abcd  
    
        abcd  
    
        abcd  
    
        abcd  
    
        abcd  

  align-content 表示子元素有多行时，每行在副轴（当前为Y轴）上的位置。默认值 stretch，表示变动子元素每行的高度，直到充满父元素。

  

子元素上的属性

• order

    
        abcd  

  order 表示从小到大排列同级元素，默认值 0。

  

• flex-grow

    
        abcd  

  flex-grow 表示当主轴（当前为X轴）上有剩余空间时，平分空间时所占的比例。默认值 0，表示不占空间。当前空间平分比例为 0 : 0 : 1 : 0，所以 c 占据所有剩余空间。

  

• flex-shrink

    
        abcd  

  flex-shrink 表示当主轴（当前为X轴）空间不足以填充所有子元素时，应该如何压缩子元素，默认值 1，表示 1 : 1 : 1 : 1，即等比压缩，当前比例为 0 : 0 : 1 : 0，表示所有空间由 c 来压缩。

  

• flex-basis

    
        abcd  

  flex-basis 表示当主轴（当前为X轴）上平分空间前，先占据的位置，当主轴为X轴，与设置 width 是等效的，当主轴为Y轴，与设置 height 是等效的。默认值 auto，表示与 width 或 height 相等。

  

• align-self

    
        abcd  

  align-self 表示当前元素可以覆盖父元素 align-items 所决定的副轴（当前为Y轴）上的方向。默认 auto，即不设置。可选择与 align-items 一致，auto | flex-start | flex-end | center | baseline | stretch 。

  

特别注意，为简化布局理解，上面事例都使用了默认的 flex-direction:row 作为子元素排序方向为基础。如果改为 flex-direction:column ，主轴将为变成 Y 轴，而副轴将变成 X 轴，所有属性的效果将会改变，这个留给读者自行实践。

学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群
343599877，我们一起学前端！