grid布局div内设置section为flex布局不生效问题求助

问题根因 #

• 你为#locationInfo div设置了width:45%的固定宽度限制，直接压缩了flex布局的可用排布空间，导致flex属性无法生效
• #locationInfo的grid布局设置grid-template-columns: 30% 30%，剩余40%空间闲置，子容器宽度被限制后没法正常横向排列
• 三个行程section和航空信息div是平级结构，没有单独给行程section套外层容器，flex会把所有平级元素一起排布，不符合预期
• 重复使用idAirlinesDetails，id属性要求全局唯一，重复id会导致样式匹配混乱

修复方案 #

1. 修改HTML结构

<template>
  <div id="mainDiv">
    <div id="locationInfo">
      <!-- 去程行程块 -->
      <div class="tripBlock">
        <!-- 行程路线部分单独套容器 -->
        <div class="tripRoute">
          <section>
            <p><b>NYC</b></p>
            <small>7:35</small>
          </section>
          <section>
            <img src='../assets/svg/flight.svg' height="40px" width="40px"/>
            <small>10/12/20</small>
          </section>
          <section>
            <p><b>SYD</b></p>
            <small>10:45</small>
          </section>
        </div>
        <!-- 航空信息改id为class避免重复 -->
        <div class="AirlinesDetails">
          <img src="../assets/svg/home/logo-2.svg" height="40px" width="40px" />
          <section>
            <b><p>Turkish Airlines</p></b>
            <small>cx511 | Airbus 333</small>
          </section>
          <section>
            <p>2 Stop</p>
            <small>3h 58min</small>
          </section>
        </div> 
      </div>

      <!-- 返程行程块 -->
      <div class="tripBlock">
        <div class="tripRoute">
          <section>
            <h4>NYC</h4>
            <small>7:35</small>
          </section>
          <section>
            <img src='../assets/svg/flight.svg' height="40px" width="40px"/>
            <small>10/19/20</small>
          </section>
          <section>
            <h4>SYD</h4>
            <small>10:35</small>
          </section>
        </div>
        <div class="AirlinesDetails">
          <img src="../assets/svg/home/logo-2.svg" height="40px" width="40px" />
          <section>
            <b><p>Turkish Airlines</p></b>
            <small>cx511 | Airbus 333</small>
          </section>
          <section>
            <p>2 Stop</p>
            <small>3h 58min</small>
          </section>
        </div>
      </div>
    </div>
  </div>
</template>

2. 修改对应CSS

/* 调整locationInfo的grid配置，两列等宽适配性更好 */
#locationInfo{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  background-color: white;
  padding: 10px;
}
/* 去掉原有的#locationInfo div宽度限制，单独给行程块设置样式 */
.tripBlock {
  width: 100%;
}
/* 行程路线部分设置flex横向排列 */
.tripRoute {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 10px;
}
/* 航空信息部分设置flex横向排列 */
.AirlinesDetails{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.158);
  background-color: white;
}
.AirlinesDetails img{
  margin-left: 1em;
  width: 35px;
  height: 35px;
}

修改完成后行程的三个section就会横向排布，符合预期效果。

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