flex布局

flex布局

一、flex布局是什么?

flex是flexible Box 的缩写,意为“弹性布局”,用来未盒状模型提供灵活性

       特点:1.任何一个容器都可以指定为flex布局
             2.行内元素也可以使用flex布局
             3.Webkit 内核的浏览器,必须加上-Webkit 前缀
        Attention:设置为flex布局以后,子元素的float 、clear、vertical-align属性失效

二、属性值

1.改变元素方向

         flex-direction:row(默认)按照主轴从左向右
                         row-reverse  按照主轴从右向左
                         column   按照主轴从上向下
                         column-reverse   按照主轴从下向上

2.换行处理

        flex-warp:nowarp(默认) 不换行
                   wrap 换行
                   wrap-reverse 反向折行

3.统一设置元素排列与换行

        flex-flow:方向   换行
        如:flex-flow:row  wrap;(默认)

4.主轴与交叉轴

      当flex-direction:row  主轴为水平轴,交叉轴为垂直轴
      当flex-direction:column 主轴为垂直轴,交叉轴为水平轴

5.主轴元素的排列方式

       justify-content : flex-start  主轴开始
                          flex-end  主轴结束
                          center  居中
                          space-between 两边项目靠两边,中间项目平均空间分配
                          space-around   项目两边有间隙,且相邻的项目间隙会叠加
                          space-evenly  空间完全分均分配

6.交叉轴的元素排列方式

           align-items:flex-start   交叉轴开始位置
                        flex-end  交叉轴结束
                        center  居中
                        stretch 拉伸(在没有设置宽高)
                        baseline 项目第一行文字的基线对齐
项目在整个屏幕居中:justify-content:center;align-items:center;

7.多行元素在交叉轴的排列方式:

         align-content:flex-start  开始
                        flex-end  结束
                        center  居中
                        space-between 两边项目靠两边,中间项目平均空间分配
                        space-around   项目两边有间隙,且相邻的元素间隙会叠加
                        space-evenly  空间完全分均分配

8.单个弹性元素在交叉轴控制

         align-self: flex-start   交叉轴开始位置
                        flex-end  交叉轴结束
                        center  居中
                        stretch 拉伸(在没有设置宽高)                           

9.元素可用空间分配

      flex-grow:n;(n越大,分配的空间越多)
      (0 时不分配空间)

10.元素动态缩小的处理技巧

     flex-shrink: 0;(不缩小)
                  n ;(n越大,缩水越厉害)   

11.主轴的基准尺寸的定义

     flex-basis:XXXpx;
         ---优先级高于宽高度

12.弹性元素组规则合定义

     flex:  grow  shrink basis;
     如:flex: 1 2 100px;
        默认:auto(1 ,1,auto);
              none(0,0,auto) ;  
         Attention:第一个值必须指明

13.弹性元素的排序

       order:数值;
       数值可以任意整数,值越小元素越靠前               
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页