align-items不起作用 这种情况一般都是因为设置flex的元素没有设置高度, 一般来讲这种居中效果不起作用的时候很有可能是父元素的宽或者高没有设置
建议不要在布局中依赖使用vertical-align:middle，通常情况它是无效的； 垂直居中还有没一个行之有效的方法； 设置了float的元素，display会被忽略，除了ie触发layout bug，display不需要写； 清除浮动不够彻底，ie6下浮动没清除
- 当前 Bug 的表现(可附上截图)- 预期表现- 复现路径见代码片段- 提供一个最简复现 Demo见代码片段另外 微信模拟器也是同样的效果,align-items 不"总"起作用,目前还不清楚在什么情况下起作用。希望能查明另外附上 (chrome效果)[https://jsbin.com/gonapidiji/
<!DOCTYPE HTML> 233 * { margin:0; padding:0; } .wrap { display:flex; display:-webkit-flex; flex-direction:row; align-items:stretch; } .left { width:200px; flex-grow:0; background-color: gray; } .center { flex-grow:1; background-color: black; } .right { width:200px; ...
而这一变革的核心，正是四个关键属性：align-content、justify-content、align-items和justify-items。
这种情况建议你设置width:auto;试试,毕竟align-items:center;是为了配合display:flex来让子元素(垂直和水平)居中显示的,如果要求子元素居中了,拿就要设置子元素的宽高 有用 回复 查看全部 1 个回答 推荐问题 如何在网页上实现两行文字省略并跟随动态块状内容(CSS/JS)? 如图所示,动态内容为一个icon, 在不同文案...
align-items: center; justify-content: space-between; border-radius: 5px; } section .section .box{ height: 100%; display: flex; flex-direction: column; justify-content: space-around; /* align-content:space-around; */ } section .section .shopping{ width: 120px; height: 40px; background...
align-conten和align-items之间的区别 align-content 作用: 会设置自由盒内部所有行作为一个整体在垂直方向排列方式。针对多行作为一个整体在纵轴上的排列方式,该属性对单行无效。 条件: 必须对父元素设置自由盒属性display:flex;,并且设置排列方式为横向排列flex-direction:row;并且设置换行,flex-wrap:wrap;这样这个...
不指定高度 固定高度 有效果 1、align-items是针对每一个子项起作用,它的基本单位是每一个子项,在所有情况下都有效果 2、align-content属性是将flex子项作为一个整体起作用,它的基本单位是子项构成的行 只在两种情况下有效果: ①子项多行且flex容器高度固定 ②子项单行,flex容器高度固定且设置了flex-wrap:wr...