Flex布局实践 

<!DOCTYPE html>
<html>
<head>
<style> 

.content{
  padding: 40px 80px;
  width: 200px;
  height: 200px;
  background-color:#394043
}
.common{
  border: 1px solid #394043;
  width: 150px;
  height: 150px;
  padding: 20px;
  border-radius:5px;
  background-color:#ffffff;
}
.radius{
  width:30px;
  height:30px;
  border-radius:50%;
  background-color:#394043;
}
.box{
  display:flex;
}
.item{

}

</style>
</head>
<body>

<div class='content'>
  <div class='box common'>
    <span class='item radius'></span>
  </div>
</div>

</body>
</html>

　　

.box{
  display:flex;
}

　　

.box{
  display:flex;
  justify-content:center;
}

　　

.box{
  display:flex;
  justify-content:flex-end;
}

　  

.box{
  display:flex;
  align-items:center;
}

    

.box{
  display:flex;
  align-items:center;
  justify-content:center;
}

  　

.box{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

　　

.box{
  display:flex;
  align-items:flex-end;
}

　　

.box{
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

　　

.box{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
}

　　

<!DOCTYPE html>
<html>
<head>
<style> 

.content{
  padding: 40px 80px;
  width: 200px;
  height: 200px;
  background-color:#394043
}
.common{
  border: 1px solid #394043;
  width: 150px;
  height: 150px;
  padding: 20px;
  border-radius:5px;
  background-color:#fff;
}
.radius{
  width:30px;
  height:30px;
  border-radius:50%;
  background-color:#394043;
  text-align:center;
  margin:2px;
}
.text{
  color:#fff;
  height:30px;
  line-height:30px;
}
.box{
  display:flex;
  justify-content:space-between;
}
.item{

}

</style>
</head>
<body>

<div class='content'>
  <div class='box common'>
    <span class='item radius'><span class='text'>1</span></span>
    <span class='item radius'><span class='text'>2</span></span>
  </div>
</div>

</body>
</html>

　　

.box{
  display:flex;
  justify-content:space-between;
}

　　

.box{
  display:flex;
  justify-content:space-between;
  flex-direction:column;
}

　　

.box{
  display:flex;
  justify-content:space-between;
  flex-direction:column;
  align-items:center;
}

　　

.box{
  display:flex;
  justify-content:space-between;
  flex-direction:column;
  align-items:flex-end;
}

　　

.box{
  display:flex;
  justify-content:space-between;
}
.item:nth-child(2){
  align-self:flex-end;
}

　　

 

posted @ 2017-06-13 15:35  JessiZJ  阅读(87)  评论(0)    收藏  举报