flex布局详解

display:flex 布局 

  X轴 称为主轴
  Y轴 交叉轴

  display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。

  Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

    flex的六个属性
        flex-direction 决定主轴的方向(即项目的排列方向)
          1:flex-direction:row;(默认值) 主轴水平方向,起点在左端         

          2 : flex-direction:row-reverse;主轴水平方向,起点在右端

          3:flex-direction:column; 主轴垂直方向,起点在上边沿

          4:flex-direction:row-reverse;主轴垂直方向,起点在下边沿

 

        flex-wrap 定义换行情况(默认不换行)
          1:flex-wrap: nowrap; (默认)元素不换行,比如:一个div宽度100%,设置此属性,2个div宽度就自动变成各50%;

          2:flex-wrap: wrap; 元素换行 第一行在下方,比如:一个div宽度100%,设置此属性,第二个div就在第二行了;

          3 : flex-warp: warp-reverse; 元素换行 第一行在下方

 

      direction与wrap 可以简写为 flex-flow direction属性 wrap属性
        例如 flex-flow row wrap


        justify-content 定义项目在主轴上的对齐方式
          1:justify-content : center ; 居中对齐

          2:justify-content : flex-start; 左对齐

          3:justify-content : flex-end;右对齐

          4:justify-content : space-between;两端对齐,项目之间间隔相等

          5:justify-content : space-around;每个项目两侧的间隔相等,即项目之间的间隔比项目与边框的间隔大一倍

          6 : justify-content : space-evenly ; 每个项目空间距离一样

 

        align-items 定义在交叉轴上的对齐方式

          # 起点会根据flex-direction的值会进行起点的改变


          1:align-items : flex-start; 起点对齐

          2:align-items : flex-end; 终点对齐

          3:align-items : center; 中点对齐

          4:align-items : baseline; 项目的第一行文字的基线对齐

          5 : align-items : stretch ; (默认值) 如果项目未设置高度或设为auto,将占满整个容器的高度。 



        align-content 定义多根轴线的对齐方式

          如果项目只有一根轴线,该属性不起作用。
          所以,容器必须设置flex-wrap:···;

          1:align-content: flex-start; 与交叉轴的起点对齐。

          2:align-content: flex-end; 与交叉轴的终点对齐。

          3:align-content: stretch; 轴线占满整个交叉轴。

          4:align-content: center; 默认值。与交叉轴的中点对齐

          5:align-content: space-between;与交叉轴的两端对齐,轴线之间的间隔平均分布;

          6:align-content: space-around;每根轴线两侧的间隔相等,即轴线之间的间隔比轴线与边框的间隔大一倍;


      flex常见属性总结

        Positional alignment
          justify-content: center; :居中排列
          justify-content: flex-start; /* 从行首起始位置开始排列 /
          justify-content: flex-end; / 从行尾位置开始排列 */

 

 


flex 子元素属性

      order
        # 用于做容器的排序
        语法:
          .item{
            order:<num>; /*默认值为0*/
          }
        排序:
          从小至大


      flex-grow
        # 对剩余空进进行分配
        语法:
          .item{
            flex-grow:<num>; /*默认为0 不分配任何剩余空间*/
          }

      flex-shrink
        # 缩小比例
        语法:
          .item{
            flex-shrink:<num>; /*默认为1 如果空间不足,该项目将缩小 0不压缩*/
          }


      flex-basis
        # 当与flex-direction:row或flex-direction:row-revers搭配 当做宽(width)
        # 当与flex-direction:column或flex-direction:column-revers搭配 当做高(height)
        # 与width和height的区别:
          flex-basis优先级高于width与height
          如果flex-basis设为auto则优先级让给width与height
        语法:
          .item{
            flex-basis:<num>px/%...
            }

      flex
        # 简写属性 等于 flex-grow flex-shrink flex-basis
          flex:auto # 依照可用空间平均伸缩
            # flex-grow:1
            # flex-shrink:1
            # flex-basis:auto

          flex:initial  # 不能生长,单是缺乏空间时可以缩小
            # flex-grow:0
            # flex-shrink:1
            # flex-basis=auto

          flex:none  # 完全不能伸缩,僵化
            # flex-grow:0
            # flex-shrink:0
            # flex-basis=auto

          flex: num # 能屈能伸,依照num断定生长比例
            # flex-grow:num
            # flex-shrink:1
            # flex-basis:0

      align-self
        # 覆盖父节点的align-items属性 以当前为准
        可选属性:
          auto
            设置为父元素的 align-items 值,如果该元素没有父元素的话,就设置为 stretch。
          flex-start
            flex 元素会对齐到 cross-axis 的首端。
          flex-end
            flex 元素会对齐到 cross-axis 的尾端。
          center
            flex 元素会对齐到 cross-axis 的中间,如果该元素的 cross-size 的尺寸大于 flex 容器,将在两个方向均等溢出。
          baseline
            所有的 flex 元素会沿着基线对齐,The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line。
          stretch
            flex 元素将会基于容器的宽和高,按照自身 margin box 的 cross-size 拉伸。

 

搭配flex 自动margin盒子示例 

  # 一行使代码居中顶置等

 

.father_box{
    display:flex;
    /* 以下属性仅为展示所用 */
    width: 100px;
    height: 100px;
    border: #000000 solid;
}        

.son1_box{
    margin-top: auto; /* 盒子会被推到地点下方 */
    /* 以下属性仅为展示所用 */
    width: 50px;
    height: 50px;
    border: red solid
}                

.son2_box{
    margin-left: auto; /* 盒子会被推到右边尾端 */
    /* 以下属性仅为展示所用 */
    width: 50px;
    height: 50px;
    border: blue solid
}            
            
            

.son3_box{
    margin-left: auto;
    margin-right: auto; /* 盒子会在父容器的顶端居中 */
    /* 以下属性仅为展示所用 */
    width: 50px;
    height: 50px;
    border: yellow solid
}

.son4_box{
    margin-top: auto;
    margin-bottom: auto; /* 盒子会在父容器的左侧居中 */
    /* 以下属性仅为展示所用 */
    width: 50px;
    height: 50px;
    border: yellow solid
}
    
.son5_box{
    margin-left: auto;
    margin-right: auto;
    margin-top: auto; /* 盒子会在父容器的下侧居中 */
    /* 以下属性仅为展示所用 */
    width: 50px;
    height: 50px;
    border: yellow solid
}        
            
.son6_box{
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto; /* 盒子会在父容器的右侧居中 */
    /* 以下属性仅为展示所用 */
    width: 50px;
    height: 50px;
    border: yellow solid
}

.son7_box{
    margin: auto; /* 盒子会在容器正中间 */
    /* 以下属性仅为展示所用 */
    width: 50px;
    height: 50px;
    border: yellow solid
}

 

 

posted @ 2019-11-08 13:42  Binb  阅读(1383)  评论(0编辑  收藏  举报