flex：align-items和align-content的区别
2024-09-09 05:54:16
属性值
align-items的属性值有：baseline、center、flex-end、flex-start、stretch、inherit、initial、unset
align-content的属性值 比align-items多了两个：space-around、space-between
align-items
align-items属性应用于flexbox中的单行/列的flex元素。
如下图，一共有两列小盒子，flex父容器的空间被平均分成两半给这两列。
设置align-items : flex-end; 两列小盒子会贴近flex父元素分隔的两列空间的交叉轴的end。
#father {
display: flex;
flex-direction: column;
flex-wrap: wrap;
background-color: white;
border: 1px black solid;
height: 500px;
width: 100%;
justify-content:center;
align-items: flex-end;
/* align-content:flex-end; */
}
align-content
align-content属性应用于flexbox中的多行/列flex元素，将flexbox容器空间作为一个整体，设置多行/列flex元素在交叉轴上的对齐方式。
如下图，两列小盒子作为内容的整体在交叉轴的end对齐。
#father {
display: flex;
flex-direction: column;
flex-wrap: wrap;
background-color: white;
border: 1px black solid;
height: 500px;
width: 100%;
justify-content:center;
/* align-items:flex-end; */
align-content:flex-end;
}
注意
如果同时设置了 align-content:flex-end; 和 align-items:flex-end; 浏览器以 align-content:flex-end; 为高优先级。
最新文章
- 使H1 H2等标签不换行
- 深入学习jQuery动画控制
- 请求facebook授权时，返回错误
- mac操作快捷键
- 【转载】PHP.INI配置:Session配置详细说明教程
- Spring读书笔记-----Spring的Bean之Bean的基本概念
- POJ 3249 拓扑排序+DP
- Linux系统VIM编辑器
- 上传系列：ajaxupload.js
- insert 加的锁
- 瑶瑶GBK好的,UTF-8卡死
- 【Sqlserver系列】【转载】事物与锁
- JVM常见问题（二）
- C#将一个枚举里面所有描述和value绑定到下拉列表的方法
- asp.net core系列 55 IS4使用Identity密码保护API
- yarn 常用命令
- weblogic安装及配置
- javascript-table出现滚动条表格自动对齐
- 第三视角团队："Jarvis For Chat"团队选题报告
- Spring学习笔记（六）—— SSH整合