flex的骰子练习

• body {display: flex;}

  ul,li {

  margin: 0;

  padding: 0;

  list-style: none;

  }

  .container {

  display: flex;

  width: 100px;

  height: 100px;

  margin: 10px;

  background: #333;

  border-radius: 10px;

  }

  .container li {

  height: 30px;

  width: 30px;

  background: #fff;

  border-radius: 50px;

  }

  .tmp-style {

  }

  p {

  display: inline-block;

  vertical-align: middle;

  border: 1px solid red;

  width: 100px;

  }

  1

  ---

• .tmp-style {

  justify-content: center;

  align-items: center;

  }

  2

• .tmp-style {

  display: flex;

  justify-content: space-between;

  align-items:center;

  }

  3

• .tmp-style {

  display: flex;

  justify-content:space-between;

  }

  .tmp-style li:nth-child(2){

  align-self:center;

  }

  .tmp-style li:nth-child(3){

  align-self:flex-end;

  }

  4

  body {display: flex;}

  ul,li {

  margin: 0;

  padding: 0;

  list-style: none;

  }

  .container {

  display: flex;

  width: 100px;

  height: 100px;

  margin: 10px;

  background: #333;

  border-radius: 10px;

  }

  .container li {

  height: 30px;

  width: 30px;

  background: #fff;

  border-radius: 50px;

  }

  .tmp-style {

  display: flex;

  flex-wrap: wrap;

  align-content: space-around;

  }

  .tmp-style ul{

  width:100%;

  display: flex;

  justify-content: space-around;

  }

  p {

  display: inline-block;

  vertical-align: middle;

  border: 1px solid red;

  width: 100px;

  }

• 5

• .tmp-style {

  display: flex;

  flex-wrap: wrap;

  align-content: space-between;

  }

  .tmp-style ul{

  width:100%;

  display: flex;

  justify-content: space-between;

  }