Grade3
@Grade3
Начинающий front-end разработчик

В flexbox при align-items: flex-end между блоками отступы?

Хотел сделать калькулятор и в css задал flexbox и сверху кнопок незаданные отступы примерно в 5px которые я не задавал. Это походу произошло когда я прописал align-items: flex-end; как урать эти отступы и задать свои. Код снизу

<!DOCTYPE html>
<html lang="ru">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Calculator</title>
   <link rel="stylesheet" href="./css/style.css">
</head>
<body>
   <div class="wrap">
      <div class="display"></div>
      <div class="operator">%</div>
      <div class="operator">CE</div>
      <div class="operator">C</div>
      <div class="operator">X</div>
      <div class="operator">1/x</div>
      <div class="operator">x<sub>2</sub></div>
      <div class="operator">&#x221a x</div>
      <div class="operator">/</div>
      <div class="operator">7</div>
      <div class="operator">8</div>
      <div class="operator">9</div>
      <div class="operator">X</div>
      <div class="operator">4</div>
      <div class="operator">5</div>
      <div class="operator">6</div>
      <div class="operator">-</div>
      <div class="operator">1</div>
      <div class="operator">2</div>
      <div class="operator">3</div>
      <div class="operator">+</div>
      <div class="operator">+/-</div>
      <div class="operator">0</div>
      <div class="operator">,</div>
      <div class="operator blue">=</div>
   </div>

</body>
</html>

.wrap {
   background-color: #1f1f1f;
   width: 320px;
   height: 532px;
   text-align: center;
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
   align-items: flex-end;
   padding: 4px;
}

.operator {
   background-color: #ccc;
   color: #fff;
   margin: 0 2px;
   width: 76px;
   height: 52px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.blue {
   background-color: #134369;
}

.display {
   height: 205px;
}
  • Вопрос задан
  • 50 просмотров
Решения вопроса 1
HistoryART
@HistoryART
Надзиратель
Это что шутка? Не смешная)
margin: 0 2px;
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы