美文网首页
Css - Flex布局

Css - Flex布局

作者: ElricTang | 来源:发表于2019-10-20 16:00 被阅读0次

    本文内容来自阮一峰Flex布局教程,原文链接(http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)

    如何使用:

    • display:flex;
    • display:inline-flex;(行内元素)
    • display:-webkit-flex;(webkit内核)

    概述:

    • 主轴默认水平从左到右,交叉轴默认垂直从上到下
    • 应用display:flex的元素成为容器,里面的成为flex item
    • item默认从左到右排列在主轴上

    flex容器的属性:

    属性名 可选值 作用
    flex-direction row,row-reverse,column,column-reverse 决定主轴的方向
    flex-wrap nowrap,wrap,wrap-reverse 是否换行
    flex-flow flex-direction + flex-wrap flex-direction属性和flex-wrap属性的简写形式
    justify-content flex-start,flex-end,center,space-between,space-around 定义了项目在主轴上的对齐方式
    align-items flex-start,flex-end,center,baseline,stretch 定义项目在交叉轴上如何对齐
    align-content flex-start,flex-end,center,space-between,space-around ,stretch 定义了多根轴线的对齐方式

    flex item的属性:

    属性名 可选值 作用
    order number 定义项目的排列顺序。数值越小,排列越靠前,默认为0
    flex-grow number 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
    flex-shrink number 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
    flex-basis length 定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
    flex flex-grow + flex-shrink + flex-basis flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
    align-self auto,flex-start,flex-end,center,baseline,stretch 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

    相关文章

      网友评论

          本文标题:Css - Flex布局

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