Flex布局下同公共类div宽度异常、样式未全部生效问题

两个异常现象均为Flex布局默认规则的正常表现，不存在CSS语法错误，核心是对Flex属性的作用逻辑、默认值不熟悉导致的预期偏差。

1. 首个div宽度超出预期，其余3个div自适应宽度的原因 #

核心触发点是Flex子项默认的min-width: auto规则：

• 外层#footer是默认横向排列（flex-direction: row）的Flex容器，4个.container都是它的直接Flex子项。
• 横向Flex容器的子项，主轴（水平方向）上的默认min-width值为auto，规则要求：Flex子项的最终宽度不能小于内部内容的最小固有宽度——也就是内部所有可自然排列的内容中，最长一段无强制换行内容的宽度。
• 第一个带contact-handle类的容器内部包含地址、联系电话这类长文本，这类文本默认不会在字符间断行，它的最小固有宽度远大于另外三个容器内短菜单文本的宽度，因此会把第一个容器撑得更宽。
• 其余三个容器内部都是长度很短的菜单项文本，最小固有宽度很小，容器宽度刚好包裹内容，就呈现出你说的“自适应宽度”效果。
• 你写的.contact-handle img { width: 20%; }会放大这个表现：百分比宽度相对于父容器宽度计算，第一个容器被长文本撑宽后，图片的20%宽度也会同步变大，进一步撑大容器尺寸。

2. align-items: flex-start看起来仅对第一个div生效的原因 #

核心是两个认知偏差：混淆了align-items的作用对象，且对齐规则生效需要容器存在多余留白空间：

• 你给.container设置的display: flex; flex-direction: column; align-items: flex-start，是让.container作为Flex容器时，控制它自己的内部子元素（img、h4、p、社交图标栏等）在交叉轴（水平方向，因为纵向是当前容器的主轴）上靠左对齐，这个规则对4个.container是全部生效的，不存在只作用于第一个的情况。
• 对齐规则能产生视觉效果的前提是：容器在交叉轴方向的尺寸，大于内部子元素的最大尺寸，存在多余的留白空间。如果容器宽度刚好和内部最宽的子元素宽度完全相等，不管设置flex-start/center/flex-end，视觉上都不会有任何区别——内容没有可移动的空间。
• 其余三个.container的宽度刚好被内部短文本撑满，没有多余横向空间，所以看不到对齐效果；只有第一个.container被长文本撑出了比部分子元素（比如logo图、社交图标栏）更宽的横向空间，子元素才有位置靠左排列，看起来就像规则只对第一个div生效。

根因验证方法（非临时尺寸修复方案） #

你可以通过两个简单测试验证上述结论，不需要手动固定尺寸凑效果：

• 给所有.container临时加固定宽度（比如width: 200px），会看到四个容器内部的所有元素全部靠左对齐，align-items: flex-start的效果在四个容器上都会正常显示。
• 给第一个容器里的长文本段落加word-break: break-word允许长文本换行，会看到第一个容器的宽度立刻收缩到和内容匹配，和另外三个容器的表现一致。

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