Flex 弹性盒子模型

@bingoogolapple 2017-07-19 17:31:28发表于 bingoogolapple/bingoogolapple.github.io FE

Flex Container

display: flex;  // 设置布局为 flex 布局
flex-direction: row;  // 设置主轴方向
flex-wrap: nowrap;  // 设置一行显示不完时是否通过多行显示来显示所有 item
flex-flow: row nowrap; // 可以使用该属性分别指定 flex-direction flex-wrap 的值
justify-content: space-around;  // 设置主轴方向的对其方式,默认值为 flex-start, space-between 在 item 间添加间隔, space-around 在 item 两边添加间隔
align-items: center;  // 设置主轴垂直方向的对其方式,默认值为 stretch 表示主轴垂直方向上拉伸的意思
align-content: center;  // 设置多行显示时主轴垂直方向的对其方式

Flex Item

flex-grow: 1;  // item 占用主轴方向剩余空间的比例,默认值为0。如果主轴方向为竖直方向,在 移动设备和 Safari 上不会生效
flex-shrink: 2;  // 设置 item 在主轴方向缩小的宽度,默认值为 1,越大表示越容易缩小,0 表示不会缩小
flex-basis: 100px;  // 设置 item 的初始宽度,默认为 auto
flex: 0 1 auto;  // 可以使用该属性分别指定 flex-grow flex-shrink flex-basis 的值
align-self: center;  // 单独设置 item 在主轴垂直方向的对其方式。stretch 表示在主轴垂直方向上拉伸当前 item