style guide

flex.css

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  
  // flex-flow: row wrap;
  
  justify-content: flex-start;  // (center | flex-end)  左, 居中, 右  元素排版
  justify-coutent: space-bettween; 
  
  align-items: flex-start;    // (center | flex-end)    纵向排列
  align-item: stretch;       // (baseline)    stretch 默认值, cross-start > cross-end    无 max|min-height|width 限制时, 100%  
  
  align-content: flex-start;   // 针对 line 的对齐
  
  order: 0   // 排序优先级  default 0
  align-self: 0   // order in corss axis
}

position.css

// css 居中
// https://www.youtube.com/watch?v=hIG-fZ2042k&t=101s


1. 
display: inline-block;
text-align: center;

2
margin-left: auto;
margin-right: auto;

3.
position: absolute;
left: 50%;
margin-left: -200px;
#tranlate(-50%, -50%)

style.css

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}