css问题总结

flex问题：

问题描述

在移动端经常会用到flex布局。最近在开发的过程中遇到flex: 1;的元素中的内容过多会出现超出父元素的宽度，出现横向滚动条。这种情况只有在iOS上出现。

解决方案

给父级元素宽度100%，flex: 1的元素width: 0%;

---

grid问题：

问题描述

grid布局是一种比较新的布局方案，在展示上面有很好开发体验。我的要求是展示三列不限行的数据。由于每一列的宽度都是相同的，就直接设置了1fr，grid-template-columns: repeat(3, 1fr);但是如果某一个的文字过多时会出现这一列撑的很宽的现象。

解决方案

虽然每列宽度是相同的，但是还是需要确定一个宽度。否则就会出现上面的问题。

grid-template-columns: repeat(3, 300px);

---