Как я могу реализовать этот адаптивный макет flexbox?

Question

Я пытаюсь создать простой и отзывчивый макет домашней страницы. Чтобы сделать вещи более эффективными и легкими (надеюсь), я использую flexbox.

Моя идея состоит в том, чтобы иметь центральное основное название («Это Flexbox») с двумя нажимаемыми кнопками под ним («Попробуйте») и "About").

Я также добавил медиазапрос, чтобы попытаться по-разному адаптировать настройки flexbox на экранах шириной менее 640 пикселей, но я просто не могу заставить flexbox работать в обоих направлениях; более конкретно, я бы хотел, чтобы две кнопки располагались друг над другом в виде столбцов, когда ширина экрана меньше 640 пикселей, а также изменяли их размеры и держали их по центру.

Теперь мои проблемы:

• цвет ссылки не работает и остается синим-i sh вместо оранжевого;
• поле заголовка имеет размер всей страницы, а не текста, который она содержит;
• медиазапрос, с помощью которого я пытался по-разному использовать flexbox на экранах размером 640 пикселей и более, кажется, "переопределен" командами flexbox вне самого медиазапроса;
• команда : flex-flow:column не работает.

Кодовая ссылка CodePen

a {
  text-decoration: none;
}

body {
  font-family: 'century gothic', sans-serif;
  background: black;
  box-sizing: border-box;
}

@media(min-width:640px) {
  .buttons {
    display: flex;
    flex-flow: row;
    justify-content: center;
    color: ivory;
    margin: 0 100;
  }
  .buttons .btns {
    border: solid red 1px;
    background: #ff7b25;
    padding: 10;
    border-radius: 10px;
    color: ivory;
  }
  .buttons .btns:hover {
    background-color: white;
    color: #ff7b25;
    transition: .5s;
  }
}

.buttons {
  display: flex;
  justify-content: center;
  flex-flow: column wrap;
  border: solid red 1px;
  margin: 10 50;
  color: ivory;
}

.buttons .btns {
  text-align: center;
  border: solid red 1px;
  background: #ff7b25;
  border-radius: 10px;
  color: ivory;
  margin: 10px;
}

.buttons .btns:hover {
  background-color: ivory;
  color: #ff7b25;
  transition: .5s;
}

.title {
  border: solid red 1px;
  margin-top: 150px;
  display: flex;
  justify-content: center;
}

.title .t1 {
  border: solid red 1px;
  background: #2f2a2a;
  padding: 5 10;
  color: ivory;
}

.title .t2 {
  border: solid red 1px;
  color: ivory;
  letter-spacing: 3px;
  font-style: oblique;
  background: #ff7b25;
  padding: 5 10;
}

<div class="title">
  <div class="t1">
    <h1>This is</h1>
  </div>
  <div class="t2">
    <h1>FLEXBOX</h1>
  </div>
</div>
<div class="buttons">
  <div class="btns">
    <h3><a href="#">Free trial</a></h3>
  </div>
  <div class="btns">
    <h3><a href="#">About</a></h3>
  </div>
</div>

Answer 1

позвольте мне решать ваши проблемы одну за другой:

• цвет ссылки не работает и остается синим-i sh вместо оранжевого

При добавлении color: inherit; до a {} вы можете заставить его уважать цвет. (Узнайте больше о каскаде, чтобы узнать больше).

• поле заголовка имеет размер всей страницы, а не текст, который в нем содержится

Естественно, поскольку оно элемент «блок» (вместо «встроенного»). Вы можете удалить определение границы из .title, чтобы оно выглядело так, как вы ожидаете?

• медиазапрос, с которым я пытался по-разному использовать flexbox на экранах размером 640 пикселей или больше, кажется "переопределено" командами flexbox вне самого медиазапроса

В CSS более поздние определения перезаписывают более ранние. Попробуйте переместить медиазапрос к концу файла.

• команда: "flex-flow: column" не работает.

Не могли бы вы уточнить?

Answer 2

Я только собираюсь go в flex-flow, потому что я вижу, что на другие ответы довольно хорошо отвечают.

flex-flow - это сокращение для двух CSS свойств: flex-direction и flex-wrap. Я считаю, что просто положить flex-flow колонки не будет достаточно. Я думаю, вам нужно добавить еще одно значение или без него.

flex-flow: column wrap;

Answer 3

Цвета ссылки:

Вам необходимо добавить атрибут color в селекторе a, а не в .btns.

Поле заголовка:

In Для правильного центрирования ваш flexbox должен быть таким же широким, как и сайт, с центрированными элементами, это правильно. Просто не применяйте стили к нему, чтобы его ширина не была видна. Если вам нужна коробка вокруг детей, вы должны обернуть их в контейнер (который затем становится гибким элементом).

Медиа-запрос:

Ваш CSS порядок неправильный, поместите @media в конце, как есть, вы применяете правило @media, а затем всегда переопределяете его своим неуказанным c CSS далее.