骰子布局 - 简书

骰子布局

一点

<style>
.box{
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid #222;
  border-radius: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box span{
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
}
</style>

<body>
  <div class="box">
    <span></span>
  </div>
<body>

二点

<style>
.box{
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid #222;
  border-radius: 10%;
  display: flex;
  justify-content: space-between;
}
.box span{
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
}
.box span:nth-child(2){
  align-self: flex-end;
}
</style>

<body>
  <div class="box">
    <span></span>
    <span></span>
  </div>
<body>

三点

<style>
.box{
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid #222;
  border-radius: 10%;
  display: flex;
  justify-content: space-between;
}
.box span{
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
}
.box span:nth-child(2){
  align-self: center;
}
.box span:nth-child(3){
  align-self: flex-end;
}
</style>

<body>
  <div class="box">
    <span></span>
    <span></span>
    <span></span>
  </div>
<body>

四点和六点

<style>
.wrap{
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid #222;
  border-radius: 10%;
  display: flex;
  justify-content: space-between;
}
.box{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.box span{
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
  display: block;
}
</style>

<body>
  <div class="wrap">
    <div class="box">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="box">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</body>

五点

<style>
.wrap{
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid #222;
  border-radius: 10%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.box{
  display: flex;
  justify-content: space-between;
}
.box span{
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
  display: block;
}
.tworow{
  align-self: center;
}
</style>

<body>
<div class="wrap">
  <div class="box">
    <span></span>
    <span></span>
  </div>
  <div class="box tworow">
    <span></span>
  </div>
  <div class="box">
    <span></span>
    <span></span>
  </div>
</div>
</body>

最后编辑于：2020.06.10 15:00:05