• align-conten和align-items的区别


    align-conten和align-items之间的区别

    align-items:

      align-items属性适用于所有的flex容器,它是用来设置每个flex元素在侧轴上的默认对齐方式

      align-items和align-content有相同的功能,不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。

    aligin-conten:

    align-content属性只适用于多行的flex容器,并且当侧轴上有多余空间使flex容器内的flex线对齐。

    作用:

    会设置自由盒内部所有行作为一个整体在垂直方向排列方式。针对多行作为一个整体在纵轴上的排列方式,该属性对单行无效。

    条件:
    必须对父元素设置自由盒属性display:flex;,并且设置排列方式为横向排列flex-direction:row;并且设置换行,flex-wrap:wrap;这样这个属性的设置才会起作用。 

    align-content可能值含义如下:
          flex-start:左对齐
          flex-end:右对齐
          center:居中对齐
          space- between:两端对齐
          space-around:沿轴线均匀分布
          stretch: 默认值。各行将根据其flex-grow值伸展以充分占据剩余空间。会拉伸容器内每行占用的空间,填充方式为给每行下方增加空白

    比如:
    
    

    如果child-1的width设置为100px,child-2的width设置为30px,这样child-2会排列在一行上

     
     

     

  • 相关阅读:
    LinuxIP乱码
    APP前置代码脚本等基础操作及安装python库
    XP定位(APP元素定位)
    关联函数应用
    命令查看当前运行APP的包名和Activity
    android智能手机如何查看APK包名
    接口代码(requests库安装)
    python不能运行
    语音接口参数转换
    接口图片参数化
  • 原文地址:https://www.cnblogs.com/-ting/p/11783960.html
Copyright © 2020-2023  润新知