1.左右对齐

• html

<div class="box">
  <span class="item">item1</span>
  <span class="item">item2</span>
</div>

• css

.box{
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}
.item{
  background: yellow;
}

• result

  
  image.png
  

  )

2.左中右对齐

• html改为

<div class="box">
  <span class="item">item1</span>
  <span class="item">item2</span>
  <span class="item">item3</span>
</div>

• result

  
  image.png

3.垂直居中,水平居中

• html

<div class="box">
  <span class="item">item1</span>
</div>

• css

.box{
  border: 1px solid red;
  display: flex;
  justify-content: center;
  width： 100px;
  height: 100px;
  align-items: center;
}
.item{
  background: yellow;
}

• result

  
  image.png

4.浮动布局

• html

<div class="parent clearfix">
  <div class=" child child1">内容1</div>
  <div class="child child2">内容2</div>
</div>

• css(给每个儿子添加float: left,在父元素添加clearfix)

.parent{
  border: 1px solid red;
}
.child{
  background: yellow;
  float: left;
}
.clearfix::after{
  content: '';
  display: block;
  clear: both;
}

• result

  
  浮动.png