美文网首页
Flex布局相关属性

Flex布局相关属性

作者: Elevens_regret | 来源:发表于2018-05-21 20:33 被阅读0次

    定义display:flex或inline-flex开启子元素的Flex布局。

    .container{
      display: flex;
      //行内元素使用 display: inline-flex;
    }
    

    设置display: flex后,其子元素的float、clear、vertical-align属性将会失效。


    容器总共有6个属性可以定义。
    第一个:flex-direction,这个属性表示子项目的排列规则,有4个属性值。

    .container{
      flex-direction: row; // 默认值,从左至右排列
    }
    
    .container{
      flex-direction: row-reverse; // 从右至左排列
    }
    
    .container{
      flex-direction: column; // 从上至下排列
    }
    
    .container{
      flex-direction: column-reverse; // 从下至上排列
    }
    

    第二个:flex-wrap,这个属性表示子项目是否换行,有3个属性值。

    .container{
      flex-wrap: nowrap; // 默认值,不换行,即使定义了子项目的宽度,也会自动压缩
    }
    
    .container{
      flex-wrap: wrap; // 换行
    }
    
    .container{
      flex-wrap: wrap-reverse; // 换行,且行的排列倒叙
    }
    

    第三个:flex-flow,这个属性是flex-direction和flex-wrap的简写形式,语法为:

    .container{
      flex-flow: (flex-direction) || (flex-wrap)
    }
    

    第四个:justify-content,这个属性表示子项目的对齐方式,有5个属性值

    .container{
      justify-content: flex-start // 默认值,flex-direction方向相同对齐
    }
    
    .container{
      justify-content: flex-end // flex-direction方向相反对齐
    }
    
    .container{
      justify-content: center // flex-direction方向居中对齐
    }
    
    .container{
      justify-content: space-between // flex-direction方向两端对齐
    }
    
    .container{
      justify-content: space-around // 每个项目的左右间隔相等对齐,会导致项目之间的距离比项目和边框之间的距离大一倍
    }
    

    第五个:align-items,这个属性在当前flex-direction方向的垂直方向上的对齐方式,有5个属性值。

    .container{
      align-items: flex-start // 与当前flex-direction方向的垂线方向同向对齐
    }
    
    .container{
      align-items: flex-end // 与当前flex-direction方向的垂线方向反向对齐
    }
    
    .container{
      align-items: center // 与当前flex-direction方向的垂线方向居中对齐
    }
    
    .container{
      align-items: baseline // 与子项目的第一行文字的基线对齐
    }
    
    .container{
      align-items: stretch // 默认值,当子项目没有设置flex-direction方向上的大小值时,会自动填满容器在flex-direction方向上可用容量
    

    flex-direction为row时:



    flex-direction为column时:



    第六个:align-content,这个属性只在有多个flex-direction方向时有效,即flex-wrap属性为换行时有效,有6个属性值。
    .container{
      align-content: flex-start; // 与当前flex-direction方向的垂线方向同向对齐
    }
    
    .container{
      align-content: flex-end; // 与当前flex-direction方向的垂线方向反向对齐
    }
    
    .container{
      align-content: center; // 与当前flex-direction方向的垂线方向居中对齐
    }
    
    image.png
    .container{
      align-content: space-between; // 与当前flex-direction方向的垂线方向两端对齐
    }
    
    .container{
      align-content: space-between; // 每个flex-direction方向的垂线方向两端的距离相等,所以flex-direction方向的垂线方向之间的距离为其与边框距离的两倍
    }
    
    .container{
      align-content: stretch; // 默认值,所有flex-direction方向会将整个容器均匀填满
    }
    

    子项目总共有6个属性可以定义。
    第一个:order,表示子项目的排列顺序,数值越小排名越靠前,值为整数,默认值为0,可以取负值。

    .item1{
      order: -2;
    }
    

    第二个:flex-grow,表示子项目根据剩余空间的放大比例,默认值为0,即表示即使有剩余空间,也不放大。

    // 当所有项目的flex-grow都为1时,它们将平分剩余空间。
    .container div{
      flex-grow: 1;
    }
    // 当有一个项目的flex-grow为2时,表示它得到的剩余空间为其他项目的2倍。
    .container div.item4{
      flex-grow: 2
    }
    

    第三个:flex-shrink,表示子项目根据剩余空间大小的缩小比例,默认值为1,即表示剩余空间不足时,该项目会缩小。不能使用负值。

    // 当某个项目的flex-shrink为0,而其他项目都为1时,表示该项目不会缩小其他项目缩小。
    .container div.item4{
      flex-shrink: 0
    }
    

    第四个:flex-basis,表示在分配当前flex-direction方向上的多余空间之前,这个项目要占据多少空间。浏览器会根据这个属性来计算当前flex-direction方向上是否有多余的空间。默认值为auto。即使用项目本身的大小,设置了width(或height,根据flex-direction方向决定)时,会使用width值,没有设置时,会使用项目的内容大小。

    flex-basis并不能保证项目的实际大小,当当前flex-direction方向上的剩余空间不足时,项目仍然会被压缩,flex-basis表示的是一种理想的大小,可以看成是项目还未放入容器时应该表现出的大小。最大最小值属性(min-width,max-width,min-height,max-height)仍然可以限制flex-basis的值。

    flex-basis指定的值是根据box-sizing的类型来指定的。

    // 由于容器剩余大小无法满足给定的值,所有项目会按照其flex-basis的值等比例缩放。
    .container div.item1{
      flex-basis: 1000px
    }
    .container div.item2{
      flex-basis: 2000px
    }
    .container div.item3{
      flex-basis: 3000px
    }
    .container div.item4{
      flex-basis: 4000px
    }
    

    第五个:flex,这个属性是flex-grow,flex-shrink,flex-basis这3个属性的简写形式,语法为:

    .item{
      flex: (flex-grow) || (flex-shrink) || (flex-basis)
    }
    

    该属性的默认值是flex: 0 1 auto,有两个关键字值,none和auto。

    .item{
      flex: none; // 表示 flex: 0 0 auto,即表示不放大,不缩放
    }
    .item{
      flex: auto; // 表示 flex: 1 1 auto,即表示放大,缩放
    }
    

    flex还有以下特殊情况:

    flex: 0; // 值为0时,表示flex: 0 1 0,即直接以内容宽度显示。
    flex: 0% // 值为一个百分值时,表示flex-basis的值,此时flex-grow值为1,flex-shrink值为1,表示flex: 1 1 0%,即放大,缩放。
    flex: 1px // 值为一个带单位的大小值时,与百分值相同。
    flex: 1; // 值为一个大于0的数字时,表示flex-grow的值,此时flex-shrink值为1,flex-basis值为0%,即flex: 1 1 0%,即放大,缩放。
    flex: 1 2; // 值为两个大于0的数字时,表示flex-grow和flex-shrink的值,此时flex-basis值为0%,即flex: 1 2 0%,即放大,缩放。
    flex: 1 0; // 值为大于0的数字和0时,表示flex: 1 1 0,即放大,缩放。
    flex: 0 1; // 值为0和大于0的数字时,表示flex: 0 1 0,即直接以内容宽度显示。
    flex: 0 30px; // 值为非负数字(0和正数)和一个带单位的大小值时(无论先后顺序),表示flex-grow和flex-basis的值,表示flex: 0 1 30px
    

    第六个:align-self,该属性表示单个项目的对齐方式,属性值与容器元素的align-item完全相同,默认值为auto,与父元素表现一致。


    flex各个属性中具有方向性的属性都依赖flex-direction的方向和flex-direction方向的数量(flex-wrap换行会产生多个相同的flex-direction方向),时刻要注意当前flex-direction的方向。

    相关文章

      网友评论

          本文标题:Flex布局相关属性

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