运用flex写一个简单登录页面

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
程序实现
  1. .box {
  2.       /* 容器属性 */
  3.       display: flex;
  4.       /* 主轴设置为纵轴 */
  5.       flex-flow: column wrap;
  6.       place-content: center;
  7.     }
  8.     .container {
  9.       background-color: lightcyan;
  10.       width: 300px;
  11.       height: 300px;
  12.       text-align: center;
  13.     }
  14.     .head {
  15.       /* outline: auto; */
  16.       height: 50px;
  17.       width: 300px;
  18.     }
  19.     .option {
  20.       padding: 20px 0 0px;
  21.       display: flex;
  22.       place-content: space-evenly;
  23.     }
  24.     .option a {
  25.       text-decoration: none;
  26.       color: black;
  27.       font-weight: bolder;
  28.     }
  29.     .option a:first-child {
  30.       /* 项目属性 */
  31.       /* flex为0的话，这个项目只占据1个单元个宽度 */
  32.       flex: 0;
  33.       /* 将第一个项目放置到最后 */
  34.       order: 2;
  35.     }
  36.     .option a:nth-child(2) {
  37.       order: 0;
  38.     }
  39.     .divider {
  40.       margin-top: 5px;
  41.       height: 10px;
  42.     }
  43.     hr {
  44.       margin-top: 5px;
  45.       color: lightgray;
  46.       margin: 0 auto;
  47.     }
  48.     .container > .input {
  49.       margin-top: 1em;
  50.     }
  51.     input {
  52.       height: 2em;
  53.       width: 250px;
  54.     }
  55.     .container > .qq {
  56.       padding: 2em 15px;
  57.       /* 容器属性 */
  58.       place-content: space-between;
  59.       font-size: smaller;
  60.     }
实现效果

flex login

注意点
  • 容器flex特性
    flex: 放大因子 收缩因子 目标宽度;
放大因子 收缩因子 目标宽度 结果 1 0 设置总目标宽度>容器宽度有意义 总项目宽度=max(总目标宽度，容器宽度) 1 1 设置无效 项目宽度撑满容器 0 1 设置总目标宽度<容器宽度有意义 总项目宽度=min(总目标宽度，容器宽度) 其它无单位正值 其它无单位正值 - 在非平均分配的项目时，对应项目所占容器宽度的比例 【文章转自迪拜服务器 http://www.558idc.com/dibai.html处的文章,转载请说明出处】
更多阅读