程序?qū)崿F(xiàn)

.box {
      /* 容器屬性 */
      display: flex;
      /* 主軸設(shè)置為縱軸 */
      flex-flow: column wrap;
      place-content: center;
    }
    .container {
      background-color: lightcyan;
      width: 300px;
      height: 300px;
      text-align: center;
    }
    .head {
      /* outline: auto; */
      height: 50px;
      width: 300px;
    }
    .option {
      padding: 20px 0 0px;
      display: flex;
      place-content: space-evenly;
    }
    .option a {
      text-decoration: none;
      color: black;
      font-weight: bolder;
    }
    .option a:first-child {
      /* 項目屬性 */
      /* flex為0的話，這個項目只占據(jù)1個單元個寬度 */
      flex: 0;
      /* 將第一個項目放置到最后 */
      order: 2;
    }
    .option a:nth-child(2) {
      order: 0;
    }
    .divider {
      margin-top: 5px;
      height: 10px;
    }
    hr {
      margin-top: 5px;
      color: lightgray;
      margin: 0 auto;
    }
    .container > .input {
      margin-top: 1em;
    }
    input {
      height: 2em;
      width: 250px;
    }
    .container > .qq {
      padding: 2em 15px;
      /* 容器屬性 */
      place-content: space-between;
      font-size: smaller;
    }

實現(xiàn)效果

注意點

• 容器flex特性
  flex: 放大因子 收縮因子 目標(biāo)寬度;

批改老師：PHPz

批改狀態(tài)：合格

老師批語：繼續(xù)加油