xxxxxxxxxx<html><head> <meta charset="utf-8"> <title>JS Bin</title><style id="jsbin-css">/** See https://davidwalsh.name/flexbox-dice* for this flexbox tutorial. I just wrote some code* to see for myself what was happening.*/body{ background-color:#27242F;}[class$='-face']{ background-color:#fff; height:50px; width:50px; border:4px solid #F0EEE8; border-radius:8px; padding:10px; border-style:outset; margin:30px;}.pip{ background-color:#27242F; border:1px solid black; border-radius:50%; width:10px; height:10px; display:block; margin:2px;}.first-face{ /* * flexbox stuff */ display:flex; justify-content:center; align-items:center;}.second-face{ /* * flexbox stuff */ display:flex; justify-content:space-between; }.third-face{ display:flex; justify-content:space-between;}.second-face .pip:nth-of-type(2){ align-self:flex-end;}.third-face .pip:nth-of-type(2){ align-self:flex-end;}.third-face .column{ display:flex; justify-content:center; align-items:center;}.fourth-face{ display:flex; justify-content:space-between;}.fourth-face .column{ display:flex; flex-direction:column; justify-content:space-between;}.fifth-face{ display:flex; justify-content:space-between;}.fifth-face .column{ display:flex; flex-direction:column; justify-content:space-between;}.fifth-face .column:nth-of-type(2){ display:flex; justify-content:center; align-items:center;}.sixth-face{ display:flex; justify-content:space-between;}.sixth-face .column{ display:flex; flex-direction:column; justify-content:space-between;}</style></head><body><div class="first-face"> <span class="pip"></span></div><div class="second-face"> <span class="pip"></span> <span class="pip"></span></div> <div class="third-face"> <span class="pip"></span> <div class="column"> <span class="pip"></span> </div> <span class="pip"></span></div> <div class="fourth-face"> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div></div> <div class="fifth-face"> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div></div> <div class="sixth-face"> <div class="column"> <span class="pip"></span> <span class="pip"></span> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> <span class="pip"></span> <span class="pip"></span> </div></div><script id="jsbin-source-css" type="text/css">/** See https://davidwalsh.name/flexbox-dice* for this flexbox tutorial. I just wrote some code* to see for myself what was happening.*/body{ background-color:#27242F;}[class$='-face']{ background-color:#fff; height:50px; width:50px; border:4px solid #F0EEE8; border-radius:8px; padding:10px; border-style:outset; margin:30px;}.pip{ background-color:#27242F; border:1px solid black; border-radius:50%; width:10px; height:10px; display:block; margin:2px;}.first-face{ /* * flexbox stuff */ display:flex; justify-content:center; align-items:center;}.second-face{ /* * flexbox stuff */ display:flex; justify-content:space-between; }.third-face{ display:flex; justify-content:space-between;}.second-face .pip:nth-of-type(2){ align-self:flex-end;}.third-face .pip:nth-of-type(2){ align-self:flex-end;}.third-face .column{ display:flex; justify-content:center; align-items:center;}.fourth-face{ display:flex; justify-content:space-between;}.fourth-face .column{ display:flex; flex-direction:column; justify-content:space-between;}.fifth-face{ display:flex; justify-content:space-between;}.fifth-face .column{ display:flex; flex-direction:column; justify-content:space-between;}.fifth-face .column:nth-of-type(2){ display:flex; justify-content:center; align-items:center;}.sixth-face{ display:flex; justify-content:space-between;}.sixth-face .column{ display:flex; flex-direction:column; justify-content:space-between;}</script></body></html>