最新公告
  • 欢迎您光临网站无忧模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • Flex弹性盒

    正文概述 掘金(ArlenCling)   2021-07-09   404

    Flex弹性盒

    1.是css中一种布局手段,主要用来代替浮动,flex可以使元素具有弹性,让元素可以跟随页面的大小的改变而改变;
    
    2.弹性容器
        (1)要使用弹性盒,必须设置弹性容器;
        (2)我们通过display来设置弹性容器
            Display:flex设置为块级弹性容器
            Display:inline-flex 设置为行内的弹性容器
    
    3.弹性元素
        (1)弹性容器的子元素是弹性容器
        (2)一个元素可以同时是容器和元素
    

    Flex弹性盒的属性

    1.Flex-direction 指定容器中弹性元素的排列方式
        可选值:
        (1)Row 默认值,弹性元素在容器中水平排列(左向右);
        (2)Row-reverse 反向水平排列
        (3)Column 弹性元素竖向排列(自上向下)
        (4)Column-reverse 反向竖向排列
    
        主轴:弹性元素的排列方向称为主轴;
        侧轴: 与主轴垂直方向的称为侧轴。
    
    2.Flex-wrap 设置弹性元素是否在弹性容器中自动换行
        可选值:
        (1)Nowrap 默认值,元素不会自动换行;
        (2)Wrap 元素会自动换行。
    
    3.Flex-flow wrap和direction的简写属性
        例;flex-flow: row wrap
    
    4.Justify-content 如何分配主轴上的多余空间
        可选值:
        (1)Flex-start 元素沿着主轴起边排列
        (2)Flex-end 元素沿着主轴终边排列
        (3)Center 元素居中排列
        (4)Space-between 空白分布到元素中间
        (5)Space-around 空白分配到元素两侧
        (6)Space-evenly 空白分布到元素的单侧(兼容性不好,慎重使用)
    
    5.Align-items 元素在辅轴上如何对齐
        可选值
        (1)Stretch 默认值,将元素的长度设置为相同的值;
        (2)Flex-start 元素不会拉伸,沿着辅轴起边对齐;
        (3)Flex-end 沿着辅轴的终边对齐;
        (4)Center 沿着辅轴居中对齐;
        (5)Baseline 基线对齐。
    
    6.Align-content 辅轴空白空间的分布
         可选值
        (1)Flex-start 元素沿着辅轴起边排列
        (2)Flex-end 元素沿着辅轴终边排列
        (3)Center 元素居中排列
        (4)Space-between 空白分布到元素中间
        (5)Space-around 空白分配到元素两侧
        (6)Space-evenly 空白分布到元素的单侧(兼容性不好,慎重使用)
    

    Flex弹性元素的属性

    1.Flex-grow 指定弹性元素的伸展的系数;
        (1)当父元素有多余空间,子元素如何伸展;
        (2)父元素的剩余空间,会按照比例进行分配;
    
    2.Flex-shrimk 指定弹性元素的收缩系统
        当父元素的空间不足以容纳所有的子元素时,如何对子元素收缩
    
    3.Align-self 用来覆盖当前弹性元素行的align-items
        可选值
        (1)Stretch 默认值,将元素的长度设置为相同的值;
        (2)Flex-start 元素不会拉伸,沿着辅轴起边对齐;
        (3)Flex-end 沿着辅轴的终边对齐;
        (4)Center 沿着辅轴居中对齐;
        (5)Baseline 基线对齐。
    
    4.Flex-basis 元素的基础长度
        (1)默认值是auto,表示参考元素自身的高度或宽度;
        (2)如果传递了一个具体的数值,则以该值为准。
    
    5.Flex 可以设置弹性元素所有的三个样式
        (1)Flex:增长 收缩 基础;
        (2)可选值
        ①initial 默认值,相当于 flex:0 1 auto,能缩;
        ②Auto 相当于 flex:1 1 auto,能增能缩;
        ③None 相当于flex:0 0 auto,表示弹性元素没有弹性;
    
    6.Order 决定元素的破排列顺序
        例:order:3;数值越大越靠后。
    

    下载网 » Flex弹性盒

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元