美文网首页
flex基本了解(伸缩容器)

flex基本了解(伸缩容器)

作者: 基本密码宋 | 来源:发表于2017-09-08 15:11 被阅读16次

    伸缩容器的属性

    1.display

    • flex 块级伸缩容器
    • inline-flex 行内级伸缩容器

    2.flex-direction(方向)

    • row 从左到右的方向
    • row-reverse 相反的方向(从右刀左)
    • column 从上到下的方向
    • column-reverse 从下到方向

    3.flex-wrap (伸缩容器在主轴线方向空间不足的情况下,是否换行及其如何换行)

    • wrap 自动换行
    • norap 不管怎样不换行
    • wrop-reverse 自动换行 以反方向换

    4.flex-flow(是flex-direction和flex-wrap的缩写)默认值是 row nowrap (横向,不缩)

    5.justify-content(在主轴线上的对齐方式)

    • flex-start 左对齐(起始位置)
    • flex-end 右对齐
    • center 中间对齐
    • space-between 平均分布在界面上
    • space-around 中间的间距=两边的边距相加

    6.align-items(交叉轴的对齐方式)

    • flex-start 已交叉轴开始的位置对齐
    • flex-end 以交叉轴结束的位置进行对齐
    • baseline 以基准线对齐
    • stretch 已拉伸的效果展示

    7.align-content 换行后在交叉轴上的对齐方式 前提是要开启换行

    • flex-start (起始位置)
    • flex-end (结束位置)
    • center 中间对齐
    • space-between 平均分布在界面上
    • space-around 中间的间距=两边的边距相加
    • stretch 默认值 已拉伸的效果展示
      [传送门 ] (https://github.com/songjiabin/flex/blob/master/flex.html)

    相关文章

      网友评论

          本文标题:flex基本了解(伸缩容器)

          本文链接:https://www.haomeiwen.com/subject/lgigjxtx.html