Flex布局简述

flex布局可以更加方便的适配移动端,做到快速灵活弹性化的自适应。

实现方式

  <div class="container">
    <div class="item item1">item1</div>
    <div class="item item2">item2</div>
    <div class="item item3">item3</div>
  </div>

html,body{
  margin: 0;
  padding: 0;
}

.container{
  /* flex布局设置 */
  display: flex;
  flex-direction: row;
  /* align-content会自动填满整个行 */
  /* align-content: center; */
  align-items: center;
  justify-content: center;
  /* justify-items: center; */
  /* 宽高设置 */
  width: 100%;
  height: 100vh;
  /* 底色设置 */
  background-color: #fafafa;
}

/* item通用样式 */
.item{
  padding: 30px;
  color: #2a2a2a;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

/* 每一个item的背景色 */
.item1{
  background-color: #DA4F49;
}

.item2{
  background-color: #FAA732;
}

.item3{
  background-color: #0088CC;
}

效果图

垂直水平居中