Skip to content

Latest commit

 

History

History
89 lines (52 loc) · 2.24 KB

2017-02-02-flexbox.md

File metadata and controls

89 lines (52 loc) · 2.24 KB
Raw

关于 Flexbox

#container {
    display: flex;
}

main axis & cross axis

  • 默认 main axis 代表水平方向，cross axis 代表垂直方向，可以根据 flex-direction 来进行调整

容器的属性设置

flex-direction

  • row（默认） / row-reverse / column / column-reverse
  • 指定 main axis 为水平（row）还是垂直的（column），以及子元素是否倒序排列

flex-wrap

  • nowrap（默认） / wrap / wrap-reverse
  • 设置子元素是否换行展示

justify-content

  • flex-start（默认） / flex-end / center / space-between / space-around
  • 定义 main axis 方向的元素布局
  • space-between 中间平均留白
  • space-around 中间距离是两端离 container 距离的两倍

align-items

  • flex-start（默认） / flex-end / center / stretch / baseline
  • 定义 cross axis 方向的元素对齐情况
  • baseline 根据子元素中的 <p> 对齐，如果没有 <p> 则根据子元素底部对齐

align-content

  • flex-start / flex-end / center / space-between / space-around / stretch（默认）
  • 只有当存在多行时才有效果

子元素的属性设置

align-self

  • 取值同容器的 align-items，用于设置某个子元素自身的 cross axis 方向的对齐

order

  • 整数，用于设定排列顺序，默认为 0

flex-grow

  • 非负整数，代表子元素对于剩余 main axis 方向空间的占用，默认为 0，即表示不占用
  • 如果子元素设置的值相同，则代表剩余空间均分给各个子元素，否则按照数值比例进行分配。

flex-shrink

  • 非负整数，代表子元素对于剩余 main axis 方向空间的占用，默认为 1
  • 代表当空间不够时，进行缩小的情况

flex-basis

  • <length> / auto（默认）
  • 定义子元素在剩余空间分配进来前的元素尺寸，如果是 auto 则表示按照该子元素定义的尺寸。

参考

1432 days left