flex布局总结

flex布局总结

• 总结自：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

• 内容：

  • flex意思是-弹性布局，可以为盒型模型提供极大的灵活性，设置为flex布局后，子元素的fload clear vertical会失效

  • 概念： flex容器默认有两条轴：水平的主轴(main axis)和垂直的交叉轴(cross axis)，容器里的元素默认沿主轴排列

  • 容器的主要属性:

    • flex-direction：决定主轴的方向
      • row:默认，主轴为水平，起点在左
      • row-reverse:主轴为水平，起点在右
      • column: 主轴为垂直，起点在上
      • column-reverse: 主轴为垂直，起点在下
    • flex-wrap：定义如何换行
      • nowrap: 默认，不换行
      • wrap: 换行，第一行在上面
      • wrap-reverse: 换行，第一行在下面
    • flex-flow: 是 flex-direction 和 flex-wrap的简写，默认值是row nowrap
      • 《flex-direction》 || 《flex-wrap》
    • justify-content：在主轴（默认水平方向）的对齐方式
      • flex-start: 左对齐
      • flex-end: 右对齐
      • flex-center: 居中
      • space-between: 两端对齐，项目之间的间隔相等
      • space-around: 每个项目两侧的间隔相等，所以，项目之间的间隔比项目与边框的间隔大一倍
    • align-items: 在交叉轴（默认垂直方向）上如何对齐
      • flex-start: 交叉轴的起点对齐
      • flex-end：交叉轴的终点对齐
      • center: 交叉轴的中点对齐
      • baseline: 项目的第一行文字的基线对齐
      • stretch（默认）: 如果项目未设置或设置为auto，将占满整个容器的高度
    • align-content： 定义了多根轴线的对齐方式，如果项目只有一跟轴线，该属性不起作用
      • flex-start: 与交叉轴的起点对齐
      • flex-end: 与交叉轴的终点对齐
      • center: 与交叉轴的中点对齐
      • space-between: 与交叉轴两端对齐，轴线之间的间隔平均分布
      • space-around: 每根轴线的两端都相等，所以，轴线之间的间隔比轴线与边框的间隔大一倍
      • stretch(默认): 轴线占满整个交叉轴

  • 项目的属性：

    • order: 定义项目的排列顺序，数值越小越靠前

      • <int>

    • flex-grow:定义项目的放大比例，默认为0,如果存在剩余空间，也不放大。

      • <int>

    • flex-shrink：定义项目的缩小比例，默认1，如果空间不足，则该项目缩小

      • <int>

    • flex-basis：在分配多余空间之前，项目占据的主轴空间。

      • <length> | auto

    • flex: 是flex-grow flex-shrink flex-basis的简写,默认为0 1 auto

      • auto(1 1 auto) 和 none(0 0 auto)

    • align-self: 允许单个项目与其他项目不一样的对齐方式，可覆盖align-items 属性，默认为auto,表示继承父元素的 align-items 属性，如果没有父元素，则等同于stretch

      • auto | flex-start | flex-end | center | baseline | stretch

    • 补充:

      • flex:1 =》 是三个属性的缩写：flex-grow: 1; flex-shrink: 1 flex-basis: auto;