蓝桥杯 web 水果拼盘 （css3）

做题步调：
看布局：html 、css 、f12 

分析: f12 查看元素，你会发现水果的高度刚好和拼盘的高度一样，每一种水果的盘子刚好把页面填满了，所以咱们就只要让元素竖着排列，加上是竖着，排不下的换行，就刚好能让每种元素都在盘子里

---

牛逼的答案：

1. #pond {
2.   flex-flow: column wrap;
3. }

复制代码

 flex-flow 是 flex-direction 和 flex-wrap 的简写形式：

• flex-direction: column;：子元素按列排列（垂直方向）。
  
• flex-wrap: wrap;：如果子元素在当前线中无法容纳，则会换到下一列。
  

---

普通易懂的答案：

1. #pond {
2.   display: flex;
3.   flex-direction: column;
4.   flex-wrap: wrap;
5. }

复制代码

---

雷同的题目：省模拟赛 水果摆盘

1. .yellow {
2.     align-self: flex-end;
3.     order: 1;
4. }

复制代码

1. align-self: flex-end;

• 作用：单独设置该元素在交叉轴上的对齐方式。
  
• 具体举动：
  
  
  
  • 如果父容器的主轴是水平方向（默认 flex-direction: row），则 align-self: flex-end; 表示该元素会在垂直方向上与交叉轴的尽头对齐（即靠下对齐）。
    
  • 如果父容器的主轴是垂直方向（flex-direction: column），则 align-self: flex-end; 表示该元素会在水平方向上与交叉轴的尽头对齐（即靠右对齐）。
    
  
  
• 覆盖父级规则：align-self 会覆盖父容器的 align-items 属性对该元素的影响。
  

2. order: 1;

• 作用：设置该元素在主轴上的排列次序。
  
• 具体举动：
  
  
  
  • 默认环境下，所有 flex 子项的 order 值为 0，表示它们按照 HTML 中的次序排列。
    
  • 设置 order: 1; 后，该元素会被放置在所有 order 值小于或即是 0 的元素之后。
    
  • 如果多个元素有相同的 order 值，则它们仍然按照 HTML 中的次序排列。
    
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。