No.2.4

Flex布局

主轴方向：（使用flex-direction改变元素排列方向）

思考：Flex布局模型中，弹性盒子默认沿着哪个方向排列？　　水平方向

思考：如何实现内容垂直排列？　　修改主轴的方向

主轴默认是水平方向，侧轴默认是垂直方向

修改主轴方向属性：flex-direction

　　　　属性值　　　　　　　　作用

　　　　row　　　　　　　　行，水平（默认值）

　　　　column　　　　  　　*  列，垂直

　　　　row-reverse　　  　   行，从右向左

　　　　column-reverse    　   列，从上而下 

/* 1.先确定主轴方向 2.再选择对应的属性实现主轴或侧轴的对齐方式 */

弹性盒子换行：（使用flex-wrap实现弹性盒子多行排列效果）

思考：默认情况下，多个弹性盒子如何显示？　　弹性盒子换行显示：flex-wrap: wrap;

调整行对齐方式 ：align-content　　取值与justify-content基本相同

  flex: 1;

  /* 溢出的时候显示省略号 */

  /* 因为弹性盒子的尺寸可以被内容撑开 */

  /* 被不换行的文字可以撑开这个盒子的尺寸 */

  width: 0;

 

  text-overflow: ellipsis;

  white-space: nowrap;　　　　不换行

  overflow: hidden;