Flexbox 中的子项不响应顺序和自我对齐

Question

我正在尝试通过叠加三个元素来创建响应式岛屿场景：我想将棕榈树放置在左侧的沙岛上，并将文本放置在树右侧的空间中，但位于树的上方沙子。

我尝试使用 Flexbox 构建此布局，但无法让我的图像响应 order 命令或align-self 命令。 我目前不担心布局的外观，我只是想学习 HTML/CSS，并希望能够理解为什么元素的行为不像预期的那样。 Flexbox 暂时用黑色勾勒，只是为了在工作中易于可视化。

网站链接：https://capillary.neocities.org/home

<div class="flexboxtitle">
       
               <div class="paradise">
                     <img src="isle/wordart.png" alt="purple text that says jett paradise">
               </div>
                <div class="glitterpalm">
                     <img src="isle/palmtree.gif" alt="image of a half set sun over water">
               </div>
               <div class="sand">
                     <img src="isle/sand.png" alt="image of palm trees on a sandy island">
               </div>
               
       </div> 

.flexboxtitle {
  width: 1000px;
  height: 500px;
  border: 1px solid #000000;
  display: flex;
  flex-flow: column wrap;
  justify-content: start;
  align-items: center;
  }
  
.paradise img {
  order: 3;
  flex-basis: auto;
  align-self: end;
  max-width: 200px;
  z-index:5; 
  }

.sand img{
  order: 1;
  flex-basis: auto;
  max-width: 250px;
  z-index:3; 
  }

.glitterpalm img{
  order: 2;
  flex-basis: auto;
  height: 200px;
  z-index:4; 
  }

谢谢！！ <3

Answer 1

您正在尝试将订单应用于不是 Flexbox 子代的 img 标签。 由于 Flex 元素和 img 之间有块元素 (div)，因此不应用顺序。如果您修改 css 以定位 div，您将看到顺序有效，尽管这似乎并没有创建您在描述中解释的内容。

希望这有帮助！如果我错过了什么或误解了你的问题，请告诉我。