CSS中flex-direction属性修改未生效，如何实现图片横向排列

原因分析 #

• flex布局相关属性仅对设置了display: flex或display: inline-flex的父容器生效，若你将flex-direction: row属性写在了子图片元素上，或是没有给目标父容器开启flex布局，修改不会生效。
• 存在更高优先级的CSS规则覆盖了你编写的flex-direction: row属性，比如媒体查询内的同名规则、带!important标记的规则，或是选择器权重更高的规则。
• 父容器设置了flex-wrap: wrap，同时子图片元素宽度设置为100%，就算父容器为横向flex布局，每行也只能容纳一个元素，视觉上和垂直排列没有区别。

解决步骤 #

1. 找到所有图片的直接父容器，给该容器添加display: flex属性，若已添加则跳过该步骤。
2. 在该父容器的CSS规则内修改flex-direction: row，确保属性没有被其他规则覆盖，可以打开浏览器开发者工具的元素面板查看该属性是否被划掉来确认。
3. 调整子图片元素的宽度：如果需要固定数量元素放在同一行，按比例设置宽度即可，比如一行放4张可设置width: 25%，同时添加box-sizing: border-box避免边框、内边距撑宽元素导致换行；如果需要实现横向滚动的效果，给子元素设置flex-shrink: 0，同时给父容器添加overflow-x: auto、flex-wrap: nowrap属性即可。

内容的提问来源于stack exchange，提问作者morgan