弹性布局下的一些问题

• 单行省略号无效问题
  display:flex元素自身text-overflow失效，改为子元素text-overflow即可

• overflow:auto/hidden 无效问题
  给该元素height:0或width:0即可

容器属性

• display: flex | inline-flex;
• flex-direction: row（默认） | row-reverse | column | column-reverse;
• flex-wrap: nowrap（默认） | wrap | wrap-reverse;
• flex-flow: 以上两个属性的简写
• justify-content: flex-start（默认） | flex-end | center | space-between | space-around;
  项目在主轴上的对齐方式
• align-items: flex-start | flex-end | center | baseline | stretch（默认）;
  项目在交叉轴上的对齐方式。
• align-content: flex-start | flex-end | center | space-between | space-around | stretch（默认）;
  多根主轴之间的对齐方式。

项目属性

• order：数字。数值越小，在主轴中的排列越靠前，默认为0。
• flex-grow：和其他项目相比的放大比例，为0时即使有空间也不放大。默认为0。
• flex-shrink：和其他项目相比的缩小比例，为0时即使有空间也不缩小。默认为1。
• flex-basis：定义了在分配多余空间之前，项目占据的主轴空间。默认为auto，即该元素本身的大小。
• flex：以上三者的缩写。
  flex:1等价于 flex-grow:1，flex-shrink:1，flex-basis:0，即兄弟元素均分父元素，共同放大、缩小。
• align-self：auto（默认，表示继承容器元素的align-items） | flex-start | flex-end | center | baseline | stretch;