Flexbox子元素不响应order与align-self属性问题求助

我尝试通过叠加三个元素创建响应式岛屿场景：希望将棕榈树放在左侧沙岛上，文本悬浮在树右侧、沙地上方的空间中。我用flexbox构建布局，但图片不响应order和align-self命令。目前不在意布局外观，只想搞懂元素为何未按预期表现，临时给flexbox加了黑色边框方便可视化。

HTML代码 #

<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> 

CSS代码 #

.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; 
  }

核心问题是flex布局属性用错了层级：

• flexboxtitle是flex容器，它的直接子元素是.paradise、.glitterpalm、.sand这三个div，而非内部的img标签。
• order、align-self这类flex属性只能作用于flex容器的直接子元素，加在img上自然不会生效。

修改后的CSS示例 #

把flex属性移到三个div上，img保留尺寸和层级设置即可：

.flexboxtitle {
  width: 1000px;
  height: 500px;
  border: 1px solid #000000;
  display: flex;
  flex-flow: column wrap;
  justify-content: start;
  align-items: center;
}

/* 给flex子元素设置布局属性 */
.paradise {
  order: 3;
  align-self: end;
}
.paradise img {
  max-width: 200px;
  z-index: 5;
}

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

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

额外提示 #

如果要做响应式布局，建议把flexboxtitle的固定width:1000px改成max-width:1000px，再添加width:100%，让容器能自适应不同屏幕宽度。

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