微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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会排列在一行上

 

 

 

 

 

 

 

 

 

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐