如何欺骗你的用户

本文原创地址链接：http://blog.csdn.net/zhou_xiao_cheng/article/details/52878834，未经博主允许不得转载。
在前端，很多时候你需要欺骗你的用户，比如说，你希望用户看到下面这样的布局：

去实现这样一个布局并不是什么难事，实现的方法也有多种，在这里，我想说的是，眼睛所看到的东西，往往不一定是真实的。
因为上面的布局实际上可能是这样的：

当右上角的flex项目被处理掉后，你就成功欺骗了你的用户。
这其实是一种逻辑思维，当你发现一种布局有更简单的实现方法时，欺骗一下你的用户又何妨？
在这里，我们采用flex布局方式，不论flex容器大小如何改变，两个蓝色的flex项目总是处于对角线上。
在这个Demo中，一共存在3个flex项目，我对其进行了归类及划分，以便减少代码的不必要冗余。下面是实现代码：

HTML:

<div class="box">    <!-- 容器 --> 
  <span class="item"></span>    <!-- 项目 --> 
  <span class="item item2"></span>    <!-- 项目 --> 
  <span class="item item3"></span>    <!-- 项目 -->
</div>

CSS：

.box{
  height: 100px;
  width: 100px;
  background-color: gray;
  display: flex;    /*采用flex布局方式 */
  justify-content: space-between;    /*设置项目在主轴上的对齐方式*/
}

.item {
  height: 10px;
  width: 10px;
  background-color: blue;
}

.item2{
  align-self: center;    /*设置在项目上的属性align-self覆盖了容器的align-items属性
                         （这里并没有写明，因为默认不写为align-items：flex-start），
                         允许该项目的对其方式与其它项目不同*/
}
.item3 {
  background-color: transparent;    /*对右上角的项目进行处理（使其透明，不可见）*/
}

你可以尝试改动flex容器的大小，不论如何改变，两个蓝色的flex项目将总是处于同一条对角线上。