弹性盒子布局flex属性_弹性布局让三个盒子成品字

一、弹性盒子的常用属性

 1、flex容器：采用flex布局的块级标签(div)

2、flex项目：采用flex布局的块级标签的子元素

3、排列方向：direction,flex容器的布局方向

4、flex容器的属性：

(1)flex-direction：布局方向
       
           row：默认值，主轴为水平方向(水平布局),起点在左端
           
           row-reverse：主轴为水平方向(水平布局),起点在右端
           
           column：主轴为垂直方向(垂直布局),起点在上沿
           
           column-reverse：主轴为垂直方向(垂直布局),起点在下沿
           
        (2)flex-wrap：环绕效果
        
            nowrap：默认值,表示不换行
            
            wrap：换行
            
            wrap-reverse：换行,第一行在下方
            
        (3)justify-content：对齐方式
        
            flex-start：默认值,左对齐
            
            flex-end：右对齐
            
            center：居中
            
            space-between：两端对齐,项目之间的间隔相等
            
            space-around：项目两侧的间距相同,项目之间的间距比两侧的间距大一倍

5、项目属性(item)

 (1)order：项目的排列顺序,数字越小排列越靠前
        
        (2)flex-grow：设置项目的放大比例
        
        (3)flex-shrink：设置项目的缩小比例

6、CSS中的长度单位：

          in：英寸

          cm：厘米

          mm：毫米

          px：像素点,相对长度单位,相对于计算机屏幕分辨率

          em：相对长度单位，相对于当前对象内文本的字体尺寸

              任意浏览器默认的相对字体高度为16em

               12px = 0.75em

               10px = 0.625em

          pt：磅(1pt = 1/72in)
          
        (1)vw、vh、vmin、vmax：是视窗(Viewport)单位，是相对单位，由视窗大小决定.1个单位类似于1%
        
           A、vw：视窗宽度的百分比(1vm = 视窗宽度的1%)
           
           B、vh：视窗高度的百分比
           
           C、vmin：表示vm、vh中的较小的一个值
           
           D、vmax：表示vm、vh中的较大的一个值
           
        (2)vw、vh和%的区别：
        
           A、%是相对于父元素的大小而设定的比例,vw、wh是由视窗的大小来决定
           
           B、vw、vh可以直接获取视窗的宽度或高度,%在设置时要根据body的高度的情况，往往无法正确的获取
           
              实际宽度或高度
              
        (3)vmin、vmax的用处：
        
            在开发移动页面时，使用vw、wh来设置字体的大小，在竖屏、横屏状态下显示的字体大小不一样
            
            由于vmin、vmain是当前较小或较大的，用来设置字体可以保证在竖屏、横屏状态下字体大小一样

今天的文章弹性盒子布局flex属性_弹性布局让三个盒子成品字分享到此就结束了，感谢您的阅读。