zoukankan      html  css  js  c++  java
  • 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会排列在一行上

     
     

     

  • 相关阅读:
    40. Combination Sum II
    39. Combination Sum
    找一找
    37. Sudoku Solver
    Activiti 多个并发子流程的应用
    BPMN2新规范与Activiti5
    BPMN这点事-BPMN扩展元素
    JAVA规则引擎 -- Drools
    工作流Activiti5流程变量 任务变量 setVariables 跟 setVariablesLocal区别
    activiti 学习( 三 ) 之 流程启动者
  • 原文地址:https://www.cnblogs.com/-ting/p/11783960.html
Copyright © 2011-2022 走看看