CSS align-content 属性 在弹性容器、div中设置元素位置

 2022-05-29    510  

CSS align-content 属性

实例

CSS align-content 属性 在弹性容器、div中设置元素位置

将行打包到弹性容器的中央:

div {
  width: 70px;
  height: 300px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

定义和用法

align-content 属性修改 flex-wrap 属性的行为。它与 align-items 相似,但是它不对齐弹性项目,而是对齐弹性线。

注意:必须有多行项目,此属性才能生效!

提示:使用 justify-content 属性可将主轴上的项目(main-axis)水平对齐。

默认值:stretch
继承:
动画制作:不支持。请参阅:动画相关属性。
版本:CSS3
JavaScript 语法:object.style.alignContent="center"

CSS 语法

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
描述
stretch默认值。行拉伸以占据剩余空间。
center朝着弹性容器的中央对行打包。
flex-start朝着弹性容器的开头对行打包。
flex-end朝着弹性容器的结尾对行打包。
space-between行均匀分布在弹性容器中。
space-around行均匀分布在弹性容器中,两端各占一半。
initial将此属性设置为其默认值。
inherit从其父元素继承此属性。


align-content 属性

  •  标签:  
  • css
  •  

原文链接:https://77isp.com/post/1018.html

=========================================

https://77isp.com/ 为 “云服务器技术网” 唯一官方服务平台,请勿相信其他任何渠道。