前端小测第三期(css布局)

前端小测-css 小测第三期题目:

一个按钮相关的单行布局效果,只有一个按钮是,宽度 100%;左右两边的安全距离为 1rem.

可以考虑使用不同的方式实现所需的展示效果~

flex 和 grid 都可以实现所需的效果.这个为移动端的布局.一般使用 flex 布局.

demo 地址:

访问 demo 页面

大佬点评

• flex 和 grid 布局都能实现我们想要的效果，但是推荐使用 flex 布局，因为语义更好。grid 更适合页面大的框架结构布局，偏向二维。本题语义偏向一维。虽然 grid 控制间隙更方便（grid-gap）。

• justify-content 可以不需要，flex-wrap 也是多余的，因为默认就是 nowrap，flex-direction 也是不需要的，因为默认就是 row。因此，我们直接在容器元素设置 display:flex 就好了。

• 子项可以 flex: 1，以及其他很多设置方法。例如 flex: auto;（语义更合适-推荐）。设置 flex:1 实际上空间分配是不足的，于是，等分。因此设置 flex:2, 3, 4…都是可以。还有就是 width:100%，除了还有一种方法：width:-webkit-fill-available 语义是更好的（推荐）。——两种推荐方法好像就一个人有使用（frankyeyq），这是更体现对 CSS 理解功力的细节。

• 下面是 grid 布局：grid-template-columns: repeat(auto-fit, minmax(0, 1fr))是一种方法，但是并不是最好的实现，因为这个比较难理解，也不好记忆。更好的实现是 grid-auto-flow: column;

• 兼容性更好的 table 布局，IE8+都支持，放心使用。.table { display: table; table-layout: fixed; width: 100%; }.cell { display: table-cell;} 固定组合。务必掌握，基础必备布局知识。

• 不少人.container 左右 0.5rem，子项 margin:0 .5rem 实现 1rem 间隙，这样方式和实际开发是不符合的。实际开发左右 1rem，是一个大的结构元素控制的。使用:last-child 或者:first-child 更符合实际开发，虽然代码更啰嗦了点，因为有一个重置。最好的实现其实还是使用:not()伪类（AsyncGuo 的实现），:not(:last-child) {margin-right: 1rem;} 或者 .btn_item + .btn_item 或者 .btn_item ~ .btn_item（IE7+）