CSS Flex纵向换行后如何实现列表列左对齐？

需求与问题 #

• 需求：使用CSS Flex实现所有<li>元素在溢出时纵向换行，并保持列左对齐
• 问题：现有代码中，换行后的列表项（如示例1中的A4）偏右，列未左对齐，如何调整？

代码示例1 #

CSS代码 #

body {
  background: #6e28d9;
  padding: 0 24px;
  color: white; /* Change my color to yellow */
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: start;
  align-items: center;
}

.seating_list {
  list-style-type: none;
  display:flex;
  align-items: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100px;
  gap: 10px;
  width: 500px;
  overflow-x: auto;
  justify-content: flex-start;
  margin: 0px;
  padding: 0px;
}
.seating_list li {
  width:80px;
}
.seating_list li label{
  font-weight: bold;  
  padding-right: 10px;
}

.seating_list li input {
  width:30px;
  border: 1px solid #6e6e6e;
  border-radius: 3px;
}

HTML代码 #

<ul class="seating_list">
    <li><label>A1</label><input type="text">
    <li><label>A2</label><input type="text">
    <li><label>A3</label><input type="text">
    <li><label>A4</label><input type="text">
</ul>

代码示例2 #

CSS代码 #

body {
  background: #6e28d9;
  padding: 0 24px;
  color: white; /* Change my color to yellow */
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: start;
  align-items: center;
}

.seating_list {
  list-style-type: none;
  display:flex;
  align-items: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100px;
  gap: 10px;
  width: 500px;
  overflow-x: auto;
  justify-content: flex-start;
  margin: 0px;
  padding: 0px;
}
.seating_list li {
  width:80px;
}
.seating_list li label{
  font-weight: bold;  
  padding-right: 10px;
}

.seating_list li input {
  width:30px;
  border: 1px solid #6e6e6e;
  border-radius: 3px;
}

HTML代码 #

<ul class="seating_list">
    <li><label>A1</label><input type="text">
    <li><label>A2</label><input type="text">
    <li><label>A3</label><input type="text">
    <li><label>A4</label><input type="text">
    <li><label>A5</label><input type="text">
    <li><label>A6</label><input type="text">
    <li><label>A7</label><input type="text">
</ul>

解决方案 #

问题出在flex容器的交叉轴对齐设置上：当flex-direction: column配合flex-wrap: wrap时，主轴为垂直方向，交叉轴为水平方向。默认的align-content值是stretch，会让每一列拉伸填满容器的水平空间，导致列分散开。

只需给.seating_list添加align-content: flex-start;，即可让所有列靠左对齐：

修改后的.seating_list CSS代码：

.seating_list {
  list-style-type: none;
  display:flex;
  align-items: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100px;
  gap: 10px;
  width: 500px;
  overflow-x: auto;
  justify-content: flex-start;
  align-content: flex-start; /* 新增这一行 */
  margin: 0px;
  padding: 0px;
}

原理说明 #

• align-content属性用于控制flex容器中多行flex项在交叉轴上的对齐方式
• 当设置为flex-start时，所有行（对应纵向换行后的列）会向交叉轴的起始端（水平方向左侧）对齐，不会拉伸填充容器宽度，从而实现列左对齐的效果

内容的提问来源于stack exchange，提问作者B L Praveen