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

636 ℃

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,我们会在看到邮件的第一时间内为您处理!

帝国CMS(EmpireCMS6.0)如何设置多样式的会员列表
wordpress文章页面显示标签代码介绍(标签函数使用方法)
给帝国cms随机增加点击数和点击量默认值成倍增
如何利用js语法计算时间
php利用函数提取数组中不重复的值