flex 布局计算器

flex布局计算器

<!doctype html>
<html>
<head>
<style>
.box{
  display: flex;
  flex-direction: column;
  height: 95vh;
  background-color: #f1f3f3;
}
.box-content{
  100%;
    flex: 1;
}

.btns-rows{
   100%;
  flex: 1;
  display: flex;
  flex-direction: row;
  background-color: #f7f8f9;
}
.btn{
  text-align: center;
  box-sizing: border-box;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #c3c6c7;
}
.btn:not(:last-child){
  border-right: 1px solid #c3c6c7;
}
.box-btns{
   100%;
    flex: 1;
  display: flex;
  flex-direction: column;
}

.btns-rows-left1{
  flex: 3;display: flex;flex-direction: column;
}
.btns-rows-left2{
    display: flex; flex-direction: row;flex-grow: 1;
}
#btns2{
  flex: 2;display: flex;flex-direction: row;
}
#btns2-right{
  border-left: 1px solid #c3c6c7;
}
.btn:active{
  background-color: #888;
}
</style>
</head>
<body>
<div class="box">
  <div class="box-content">
  </div>
  <div class="box-btns">
    <div class="btns-rows">
      <div class="btn">AC</div>
      <div class="btn">DEL</div>
      <div class="btn">/</div>
      <div class="btn">*</div>
    </div>
    <div class="btns-rows">
      <div class="btn">7</div>
      <div class="btn">8</div>
      <div class="btn">9</div>
      <div class="btn">-</div>
    </div>
    <div class="btns-rows">
      <div class="btn">4</div>
      <div class="btn">5</div>
      <div class="btn">6</div>
      <div class="btn">+</div>
    </div>
    
    <div id="btns2" class="btns-rows">
      <div class="btns-rows-left1">
        <div class="btns-rows-left2">
          <div class="btn">1</div>
          <div class="btn">2</div>
          <div class="btn">3</div>
        </div>
        <div class="btns-rows-left2">
          <div class="btn">%</div>
          <div class="btn">0</div>
          <div class="btn">.</div>
        </div>
      </div>
              <div id="btns2-right" class="btn">=</div>
    </div>
    
  </div>
</div>
</body>
</html>
flex 布局 计算器

flex布局计算器

flex 布局计算器
