弹性盒子布局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是当前较小或较大的,用来设置字体可以保证在竖屏、横屏状态下字体大小一样

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值