Добрый вечер, не знаю, задают ли здесь вопросы по вебу, но тем не менее

Рейтинг: 1Ответов: 1Опубликовано: 10.01.2023

У меня есть шаблон:

шаблон

И мне нужно с помощью флекса подогнать бэкграунд кнопки с текстом 'Как это работает?', сделать справа и слева чуть меньше и немного поднять его снизу и сверху, я пытался делать с помощью отступов, но это не сработало, вот код:

.how {
  display: flex;
  text-decoration: none;
  color:#ffffff;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  margin-left: 480px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 12px;
}

Вот так выглядит кнопка в шаблоне:

кнопка

Как её можно повторить? (Я не знаю как это сделать)

html css3 вёрстка веб-дизайн flexbox
Источник: Stack Overflow на русском

Ответы

▲ 0

Не совсем понятна структура вашего html, но в целом вы не туда добавляете flex

Можно сделать например так: Отступы внутри кнопки задаете через padding, а выравнивание кнопки и текста флексом выполняете от общего контейнера

.flex__container {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  max-width: 1000px;
  margin: 0 auto;
}
.flex__link {
  padding: 10px;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
background-color: #c7c7c7;
}
<div class="flex__container"><h1> Я робот юрист</h1>
<a class="flex__link" href=""> Как это работает?</a>
</div>