日拱一卒, 总结积累-页面布局问题-Flex属性组合这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文

这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战

日拱一卒, 项目问题总结积累

在日常项目开发("摸鱼")中, 这里难免遇到的很多水坑, 就需要我们善于总结记录, 那这就在掘金记录安家了.

而往往简单的问题却可能会挡住我们开发的路线计划, 而找不到解决方案而一拖再拖, 后来一个灵感闪过, 原来这么简单(当时为何自己就是想不出来呢?)

div.info 想放到最下面

这不是个小问题?: 在一个在普通简单不过的登录注册页面布局, 而主要是在样式布局时使用的小技术上就是找不到解决方案, 一时竟想不出来该怎么写页面了, 很多时候就是这么个小毛病能卡住很久, 就是绕不出来..

html布局文档如下.

<body>
  <div class="wrapper">
    <div class="form">
      <input type="text" placeholder="账号">
      <input type="password" placeholder="密码">
      <button>登录</button>
      <button>注册</button>
      <div class="info">我想躺在最下面</div>
    </div>
  </div>
</body>

image-我想躺在最下面-use-flex不可行??

页面样式CSS(仅列举出主要的样式部分), 使用 flex 布局, 试了flex布局各个属性的各种组合, 可以说是绞尽脑汁了, 但是仍然有些样式通过属性组合就是达不到想要的效果...

   .wrapper {
      width: 500px;
      height: 500px;
      display: flex;
      text-align: center;
      /* align-items: flex-start; */
    }
    .form {
      width: 100%;
      height: 500px;
      display: flex;
      flex-direction: column;
      border: 1px solid red;
      align-items: flex-start;
    }
    input {
      margin: 10px;
    }
    button {
      height: 21px;
      margin: 10px 30px;
      border-radius: 21px;
      border: none;
      color: #fff;
      background-color: skyblue;
    }

就是这个简单的提示信息要显示的位置(这里用了比较大比较明显的test标记出来)

    .info {
      width: 100%;
      height: 50px;
      line-height: 50px;
      margin: 10px;
      align-self: end;
      border: solid 1px blue;
    }

学贵坚持, 加油

加油第三天, 立个小目标, 这个月更文坚持下来, 有没有 xdm 一起打卡, 加油!