美文网首页
Flexbox布局

Flexbox布局

作者: zhangxt456 | 来源:发表于2018-10-18 22:53 被阅读0次

    1.Flex容器属性:

      flex-direction(方向)

        可以决定Flex容器中主轴和纵轴的方向。当flex-direction的值为column时,垂直方向的轴就编程主轴,与其垂直的就是纵轴(水平方向的轴)。

      flex-wrap(包裹)

        用来决定Flex项目的宽度和超过Flex容器的宽度时,Flex项目换不换行排列。默认值:nowrap(不换行)。

      justify-content(横向对齐方式)

        控制主轴方向内容的宽度和Flex项目之间的间隙。

        值:flex-start<default>,flex-end,center,space-between,space-around,stretch,space-evenly

      align-item(纵向对齐方式)

        控制纵轴方向的行为。

        值:lex-start<default>,flex-end,center,stretch,baseline

      flex-flow(流)

        flex-direction<value> flex-wrap<value>。

      Flex容器有n个Flex项目时,默认情况下,这些Flex项目从左向右排列,而且时一行排列,哪怕是超出了Flex容器的宽度。就是因为flex-direction和flex-wrap的默认值分别是row和nowrap。

      css中direction的值也可以设置排版方向。

      左向右排列:direction:ltr;或flex-direction:row;

      右向左排列:direction:rtl或flex-direction:row-reverse。

       display可以取值为flex和inline-flex。

    2.Flex项目属性:

      flex-basis

        类似于min-width。它将根据内部内容扩展Flex项目的大小。

      flex-grow

        应用到一个Flex项目时,它将相对于同一行上所有其他Flex项目的大小的总和进行缩放。该值将根据指定的值自动调整。

      flex-shrink

        和flex-grow刚好相反

      flex

        是flex-grow、flex-shrink、和flex-basis的简写。

      order

        可以用来改变Flex项目的排列顺序。是一个『相对值』,order越大,排名越靠后。

      justify-items

        用于Flex项目上(TODO)。

    3.什么情况下不建议使用flexbox布局?

        *整体页面布局

        *完全支持旧浏览器的网站

    相关文章

      网友评论

          本文标题:Flexbox布局

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