记一次布局优化

需求是这样的

image.png

HTML：

<div id="login-id">
    <div className="login-wrap">
      <div className="login-icon" />
      <div className="login-form">
        <div className="title">产品发布管理平台系统登录</div>
        <UserForm
          setForm={this.setForm}
          data={this.state.formDataList}
          className="user-form"
        />
        <Checkbox style={{ marginTop: 10, marginBottom: 36 }}>
          记住密码
        </Checkbox>
        <Button onClick={this.onSubmit} type="primary" block>
          登陆
        </Button>
      </div>
    </div>
</div>

Less:

#login-id {
  position: relative;
  width: 100%;
  height: 100%;
  background: url('~@/asset/login_bg.png') center center;
  background-size: cover;
  @icon-width: 612px;
  @form-width: 424px;
  .login-wrap {
    position: relative;
    top: 50%;
    width: @icon-width + @form-width;
    height: 396px;
    margin: 0 auto;
    transform: translateY(-50%);
  }

  .login-icon {
    position: relative;
    float: left;
    width: @icon-width;
    height: 100%;
    background: url('~@/asset/productLabrary.png');
  }

  .login-form {
    float: left;
    width: @form-width;
    height: 100%;
    padding: 0 30px;
    background: rgba(255, 255, 255, 1);

    > .title {
      font-size: 18px;
      font-weight: 700;
      padding: 43px 0;
      text-align: center;
    }
  }
 }

深夜我久久不能入睡...

第一点：.login-icon、.login-form 没有使用>选择器放在..login-wrap ，这使得css样式无法直观的反馈html结构，语义化不够明显.
尤其是在子元素依赖父元素的情况下,比如height:100%;这个属性。

第二点：对flex布局理解不够深入，以为justify-content: center;会让两个div之间出现间隙

新的实现如下

HTML

<div id="login-id">
    <div className="login-icon" />
    <div className="login-form">
      <div className="title">产品发布管理平台系统登录</div>
      <UserForm
        setForm={this.setForm}
        data={this.state.formDataList}
        className="user-form"
      />
      <Checkbox style={{ marginTop: 10, marginBottom: 36 }}>
        记住密码
      </Checkbox>
      <Button onClick={this.onSubmit} type="primary" block>
        登陆
      </Button>
    </div>
  </div>

Less

#login-id {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  background: url('~@/asset/login_bg.png') center center;
  background-size: cover;

  @height: 396px;

  > .login-icon {
    position: relative;

    width: 612px;
    height: @height;

    background: url('~@/asset/productLabrary.png');
  }

  > .login-form {
    width: 424px;
    height: @height;
    padding: 0 30px;

    background: rgba(255, 255, 255, 1);

    > .title {
      font-size: 18px;
      font-weight: 700;

      padding: 43px 0;

      text-align: center;
    }
  }
}

去掉了.login-wrap这层结构，因为是pc端项目，1036还是可以接受的，在#login-id 上加个padding会更好些。

justify-content、align-items、align-content

在Chrome(72)开发者工具中，是可以打出justify-items、和justify-self的，但是没测出实际的效果

items统一为每个元素设置，content是为内容整体设置，在产生换行(flex-wrap:wrap;)的时候，items会出现空隙，content不会，content只在产生换行的时候起作用，比items优先级高。

而且，上面三个属性决定视觉上的水平、垂直布局，取决于flex-direction属性。

codepen连接
https://codepen.io/xiaodun/pen/wOobvw

我自己维护的vue项目
https://github.com/xiaodun/sf-pc-web/tree/v1.0.0/tools_home