Flex容器中包裹img的li元素布局异常问题咨询

我在理解flex容器中li元素的工作机制时遇到了困难。我了解flex容器中的元素默认会横向排列，但包裹img标签的li元素表现不同：将li和img包裹在div中并作为flex-basis为50%的flex子元素时，li元素并未横向排列而是堆叠在一起。此外，left-sidebar本身已是flex容器，将其中的imp-links设为flex容器后，包含img的li元素仍堆叠而非横向排列，请问这是为什么？

CSS #

.container .container {
  display: flex;
  justify-content: space-between;
  padding: 13px 5%;
}

.left-sidebar {
  flex-basis: 50%;
  position: sticky;
  top: 70px;
  align-self: flex-start;
  background: green;
}

.imp-links a {
  text-decoration: none;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  color: #626262;
  width: fit-content;
}

HTML #

<div class="container">
  <div class="left-sidebar">
    <div class="imp-links">
      <a href="#"> <img src="images/news.png"> latest news </a>
      <a href="#"> <img src="images/friends.png"> friends </a>
      <a href="#"> <img src="images/group.png"> group </a>
      <a href="#"> <img src="images/marketplace.png"> marketplace </a>
      <a href="#"> <img src="images/watch.png"> watch </a>
      <a href="#"> see more </a>
    </div>
  </div>
</div>

核心问题是没搞清楚flex布局的生效范围：只有设置了display: flex或display: inline-flex的容器的直接子元素才会变成flex项，默认横向排列。

1. 你的代码里.left-sidebar并没有设置display: flex，所以它根本不是flex容器，里面的.imp-links只是普通块级元素，自然不会让子元素横向排列。
2. 就算你把.left-sidebar设为flex容器，.imp-links作为它的直接子元素会变成flex项，但.imp-links里面的<a>（或你说的li）依然是普通块元素，除非你给.imp-links也加上display: flex，让它的直接子元素变成flex项。
3. 你提到的li堆叠问题，本质同理：如果包裹li的父容器没开flex，li就是默认的块级元素，垂直堆叠；就算父容器开了flex，也要确保li是该容器的直接子元素，没有被其他块级元素嵌套隔离。

举个修改例子，如果你想让.imp-links里的<a>横向排列，只需要给.imp-links加flex属性：

.imp-links {
  display: flex;
  flex-wrap: wrap; /* 可选，超出宽度时换行 */
  gap: 15px; /* 可选，设置子元素间距 */
}

这样.imp-links的直接子元素<a>就会变成flex项，默认横向排列，解决堆叠问题。

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