css3 - 何时需要 flex-basis: 100% ?
问题描述
下面例子中,同样一个四点骰子为什么.first-face必须有flex-basis: 100%;,而.second-face不需要呢?
codepen地址
/* 核心代码 */.first-face { display: flex; flex-wrap: wrap; align-content: space-between;}.first-face .column { display: flex; justify-content: space-between; flex-basis: 100%; /* 为什么必须有这一行? */}.second-face { display: flex; justify-content: space-between; /* 这里为什么不需要flex-basis: 100%; ?*/}.second-face .column { display: flex; flex-direction: column; justify-content: space-between;}
问题解答
回答1:摘录友站前辈的解答,既简洁又清晰:
楼主的问题可以归结为:为什么.second-face 里的.column 会自动占 100%高度,而.first-face 里的.column 却不会自动占 100%宽度?
我理解是因为 align-items 的缺省值是 stretch (.second-face ),而 flex-grow 缺省值为 0 (.first-face )。
回答2:因为你的第二个盒子 是 纵向布局 你添加了 flex-direction: column;
而第一个盒子 你又应用了 flex-wrap: wrap; 内容超出后换行 而且用的是 align-content而不是justify-content 内容超出换行后 对齐方式justify-content: space-between不再生效
相关文章:
1. 老师,你这两条斜杠的是怎么注释的?2. mac连接阿里云docker集群,已经卡了2天了,求问?3. angular.js - angularjs ng-repeat 不能刷新4. PHP单例模式5. docker 下面创建的IMAGE 他们的 ID 一样?这个是怎么回事????6. angular.js - 用angular2-cli打包项目之后,跳转路由刷新会报404的错误7. css3 - css字体样式加填充色而不是背景色8. node.js - 来帮我捋一下node中fs模块watch实现原理9. docker镜像无法删除,请求解决办法。10. angular.js - angularJS最简单方法实现点击checkbox,button变亮