CSS Flex 使用速查

📅 2018年01月06日 / 🎨 开发日志 / 👓 154


属性列表

父对象:

  • 布局声明:display: flex
  • 主轴方向:flex-direction: row
  • 主轴对齐:justify-content: flex-start
  • 交叉对齐:align-items: stretch
  • 换行方式:flex-wrap: no-wrap
  • 多轴对齐:align-content: stretch

子对象:

  • 占据空间:flex-basis: auto
  • 放大比例:flex-grow: 0
  • 缩小比例:flex-shrink: 1
  • 排序权值:order: 0
  • 对齐方式:align-self: auto

父对象属性说明

CSS

#container {

    /**
     * 声明 flex 布局
     */
    display: flex;

    /**
     * 1 主轴方向
     * row:左到右
     * row-reverse:右到左
     * column:上到下
     * colomn-reverse:下到上
     */
    flex-direction: row;

    /**
     * 2 主轴对齐方式
     * flex-start:靠起点
     * flex-end:靠终点
     * center:居中
     * space-between:两端对齐(首尾不留空)
     * space-around:两端对齐(首尾留空)
     */
    justify-content: flex-start;

    /**
     * 3 交叉轴对齐方式
     * stretch:拉伸
     * flex-start:靠起点
     * flex-end:靠终点
     * center:居中
     * baseline:基线对齐
     */
    align-items: stretch;

    /**
     * 4 换行方式
     * nowrap:不换行
     * wrap:换行
     * wrap-reverse:换行,第一行在底部
     */
    flex-wrap: nowrap;
    
    /**
     * 5 多轴线对齐方式
     * stretch:拉伸
     * flex-start:靠起点
     * flex-end:靠终点
     * center:居中
     * space-between:两端对齐(首尾不留空)
     * space-around:两端对齐(首尾留空)
     */
    align-content: stretch;
}

子对象属性说明

CSS

.items {

    /**
     * 1 占据空间
     * 默认 auto,值可设置对象尺寸,如 15px
     */
    flex-basis: auto;

    /**
     * 2 放大比例
     * 默认 0,不跟随父对象变大
     */
    flex-grow: 0;

    /**
     * 3 缩小比例
     * 默认 1,跟随父对象缩小
     */
    flex-shrink: 1;

    /**
     * 4 排序权值
     * 默认 0,越大越靠前
     */
    order: 0;

    /**
     * 5 交叉对齐
     * 默认继承父对象的 align-items 属性
     * flex-start:靠起点
     * flex-end:靠终点
     * center:居中
     * baseline:基线
     * stretch:拉伸
     */
    align-self: auto;
}

参考资料

(完)

上一篇
没有了

留言(0)