骰子布局 - 起风了

一点

<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>

文章转载于:https://www.jianshu.com/p/ddf043cf09f8

原著是一个有趣的人,若有侵权,请通知删除

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了，原文地址《骰子布局》