flex属性中align-items和align-content有什么区别

696 ℃

css3语法中flexalign-itemsalign-content有什么区别?下面web建站小编给大家科普一下!

align-items属性

align-items属性可以应用于所有的flex容器,它的作用是设置flex子项在每个flex行的交叉轴上的默认对齐方式。

.flex {
  display: flex;
  align-items: center;
}

align-content属性

在flex容器指定高度并且子项为多行时,align-content: center是将子项作为一个整体,然后这个整体在flex容器的交叉轴上居中对齐的。

.flex {
  height: 300px;
  display: flex;
  flex-wrap: wrap; 
  align-content: center;
}
条件 属性(是否有效果)
子项 flex容器 align-items align-content
单行 不指定高度
固定高度 否(但是有设置flex-wrap:wrap;时,有效果)
多行 不指定高度
固定高度

css3如何利用Flex实现响应式表格布局(Flex弹性布局)

css3中justify-content属性的基本用法

css3如何实现文本显示指定内容(隐藏剩余内容)

css3实现鼠标移上去隐藏提示框由上到下滑动效果

js+css3做一个灯泡开灯关灯效果

标签: css3, flex

上面是“flex属性中align-items和align-content有什么区别”的全面内容,想了解更多关于 前端知识 内容,请继续关注web建站教程。

当前网址:https://m.ipkd.cn/webs_2608.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

事件绑定addEventListener和事件解除绑定removeEventListener的基本用法
在数组中通过find遍历需要的对象
layui做城市三级联动代码介绍
java语法中如何利用Map实现遍历
js获取带.html的文件名