Open tonyzheng121 opened 7 years ago
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 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
参考