flex布局实现最后一行左对齐
最终效果如下:
源代码使用vue开发:
其中 keyboard_word_wrap样式如下:
- display: flex;
- justify-content: flex-start;
- flex-wrap: wrap;
- max-width: 37.5rem;
- margin: 0 auto;
- padding: 2rem 0;
关键代码标红,如果 justify-content为center,那么效果是
不规定左右自适应 效果是(因为这页面本身没做font-size自适应 所以我也懒得处理了,就强行实现最终效果)
而不写最外层的max-width等于2被设计图宽度,margin: 0 auto;是不起作用的。