CSS

CSS属性

  • display:元素展示
    • inline:默认,内联元素
    • flex:弹性容器
    • none:不显示
    • block:块级元素,元素前后有换行符
    • inline-block:行内块元素
    • list-item:列表元素
    • run-in:根据上下文作为块级元素或内联元素
    • table:表格元素<table>,前后有换行符
      • inline-table:内联表格元素,前后无换行符
      • table-row-group
      • table-row
      • table-header-group
      • table-footer-group
      • table-column-group
      • table-column
      • table-cell
      • table-caption
    • inherit

弹性容器Flex

flex

弹性容器内元素空间分配

  • flex-grow flex-shrink flex-basis简写,只给出一个值时 相当于flex-grow
  • auto:同1 1 auto
  • none:同0 0 auto
  • initial:初始值,同0 0 auto
  • inherit

flex-grow

(弹性容器内)元素相对于其他元素项目扩展的量

  • auto
  • inherit
  • {num}:相对于其他元素的扩展量,默认为0,应该是按照比例分

flex-shrink

(弹性容器内)元素相对于其他元素收缩的量

flex-basis

(弹性容器内)元素基础长度

  • auto
  • inherit
  • 具体长度(%, px, em为单位)

flex-flow

  • flex-direction flex-wrap
  • initial
  • inherit

flex-direction

弹性容器内元素方向

  • row:默认,灵活元素水平排列
  • row-reverse:灵活元素水平反向排列
  • column:灵活元素竖直排列
  • column-reverse:灵活元素竖直反向排列
  • initial
  • inherit

flex-wrap

弹性容器内元素是否拆行/列

  • nowrap:默认,灵活项目不拆行/列
  • wrap:灵活项目必要时拆行/列
  • wrap-reverse:灵活项目必要时反向拆行/列
  • initial
  • inherit

弹性容器Align

align-items

弹性容器内侧轴(竖直方向)对齐各项元素,适合含有单行元素

  • stretch:默认,元素拉伸对齐,元素大小确定时同 flex-start效果
  • center:元素堆叠在容器中心
  • flex-start:元素堆叠向容器开头
  • flex-end:元素堆叠向容器结尾
  • baseline:元素位于容器基线上
  • initial:初始值
  • inherit:从父类继承

align-content

align-items有相同的功能,适合多行元素 (这个好像作用单位是弹性容器的行)

  • stretch:默认,元素拉伸对齐,元素大小确定时同 flex-start效果
  • center:元素堆叠在容器中心
  • flex-start:元素堆叠向容器开头
  • flex-end:元素堆叠向容器结尾
  • space-between:元素向容器两端堆叠,元素间保持间距
  • space-around:类似space-between,但元素于容器 边界直接也有间距
  • initial:初始值
  • inherit:从父类继承

align-self

设置弹性容器内元素本身侧轴方向上的对齐方式

  • auto:默认,继承父容器align-items属性,没有 父容器则为stretch
  • stretch:元素拉伸对齐,元素大小确定时同 flex-start效果
  • center:元素堆叠在容器中心
  • flex-start:元素堆叠向容器开头
  • flex-end:元素堆叠向容器结尾
  • baseline:元素位于容器基线上
  • initial:初始值
  • inherit:从父类继承

justify

弹性容器内水平排列各项元素

  • flex-start:默认,元素位于容器开头
  • flex-end:元素堆叠向容器结尾
  • center:元素堆叠在容器中心
  • space-between:元素向容器两端堆叠,元素间保持间距
  • space-around:类似space-between,但元素于容器 边界直接也有间距
  • initial:初始值
  • inherit:从父类继承
Author

UBeaRLy

Posted on

2019-03-21

Updated on

2019-02-17

Licensed under

Comments