蓝桥杯练习05水果摆盘

水果摆盘

介绍

目前CSS3中新增的Flex弹性布局已经成为前端页面布局的首选方式，这次试题将利用Flex实现经典布局效果。

准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

其中：

·index.css是本次需要补充样式文件。

·index.html为主页面。

·img图片文件夹。

在浏览器中预览index.html,当前页面效果如下：

目标

在需要修改部分的代码有相关提示，请仔细阅读之后，使用f1ex布局中的align-self和order完善index.css中的代码，把对应的水果放在对应的盘子里面，最终效果如下：

提示

align-self值有：

flex-start、flex-end、center、baseline、stretch

order:<整数>(...-l,0(default),l,...)

代码

html

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="index.css" />
  </head>

  <body>
    <div id="board">
      <div id="pond">
        <div class="frog yellow">
          <div class="bg animated pulse infinite"></div>
        </div>
        <div class="frog green">
          <div class="bg animated pulse infinite"></div>
        </div>
        <div class="frog yellow">
          <div class="bg animated pulse infinite"></div>
        </div>
        <div class="frog green">
          <div class="bg animated pulse infinite"></div>
        </div>
        <div class="frog green">
          <div class="bg animated pulse infinite"></div>
        </div>
      </div>
      <div id="background">
        <div class="lilypad yellow" style="align-self: flex-end; order: 2">
          <div
            class="bg"
            style="transform: scale(0.84003) rotate(229.647deg)"
          ></div>
        </div>
        <div class="lilypad green">
          <div
            class="bg"
            style="transform: scale(0.920888) rotate(270.938deg)"
          ></div>
        </div>
        <div class="lilypad yellow" style="align-self: flex-end; order: 2">
          <div
            class="bg"
            style="transform: scale(0.986074) rotate(0.647772deg)"
          ></div>
        </div>
        <div class="lilypad green">
          <div
            class="bg"
            style="transform: scale(0.802433) rotate(325.245deg)"
          ></div>
        </div>
        <div class="lilypad green">
          <div
            class="bg"
            style="transform: scale(0.903708) rotate(203.839deg)"
          ></div>
        </div>
      </div>
    </div>
  </body>
</html>

css

css 复制代码

/* 菠萝 TODO 待补充代码 */

.yellow {
    /* display: flex; */
}


/* 以下代码不需要修改 */

#board {
    position: sticky;
    top: 0;
    width: 50vw;
    height: 50vw;
    min-width: 300px;
    min-height: 300px;
    max-width: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

#pond {
    z-index: 20;
}

#pond,
#background {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1em;
}

.lilypad,
.frog {
    position: relative;
    width: 20%;
    height: 20%;
    overflow: hidden;
}

.frog.green .bg {
    background-image: url(./img/1.png);
}

.frog.yellow .bg {
    background-image: url(./img/2.png);
}

.frog .bg {
    background-size: 60% 60%;
}

.lilypad .bg,
.frog .bg {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.lilypad.green .bg {
    border-radius: 50%;
    background: #9b100a;
    opacity: 0.5;
}

.lilypad .bg,
.frog .bg {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

* {
    box-sizing: border-box;
}

.lilypad.yellow .bg {
    border-radius: 50%;
    background: #863a1b;
    opacity: 0.5;
}

答案

css 复制代码

.yellow {
    /* display: flex; */
    align-self: flex-end;
    order: 1;
}

小结：基本上是把答案给了试都可以试出来，但这些基础的css最好还是会一点比较好。

知识点

align-self 的属性值及其含义：

auto：默认值。元素继承其父 Flex 容器的 align-items 属性的值。如果没有父容器的显式设置，或者是根 Flex 项，则默认行为通常等同于 stretch。
stretch：元素会在侧轴方向上拉伸，填满容器的整个高度（或宽度，取决于主轴方向）。这是在没有显式定义尺寸或 align-self 属性时的默认行为。
flex-start：元素在侧轴起点对齐。
flex-end：元素在侧轴终点对齐。
center：元素在侧轴中心点对齐。
baseline：元素根据其第一个基线对齐。对于文本元素，基线通常是字母 x 的下边缘；对于其他元素，可能是内容区的底边。
initial：将属性设置为其初始值（在这种情况下，就是 auto）。
inherit：从父元素继承 align-self 属性的值。

通过使用 align-self，你可以针对不同的 Flex 子项进行细致的布局调整，即使它们存在于同一个 Flex 容器中，也能表现出各自不同的侧轴对齐方式。

order 属性值及含义：

order: <integer>：接受一个整数值，可以为正数、负数或 0。数值越小，Flex 项目在流体布局中的顺序越靠前；数值越大，顺序越靠后。