• Страница 1 из 1
  • 1
Форум » III. HTML и CSS » Flexbox-вёрстка » Автоматически настраиваемые поля и flex-элементы (Практикум №1)
Автоматически настраиваемые поля и flex-элементы
1
Цитата
Важно: поля flex-элементов не схлопываются, поэтому есть возможность присваивать для margin значение auto, чтобы добавлять поля, которые будут управлять свободным пространством.


Данный практикум поможет понять каким образом работают автоматически настраиваемые поля и чем они так хороши.

Начальный HTML-код нашей страницы:

Код
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Flexbox</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,700&subset=latin,Cyrillic" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="base.css">
  <style>
   
  </style>
<script>

</script>
</head>
<body>
<div class="section">
  <div class="banner">
    <p class="logo">Наша компания</p>
    <a href="#">Клиенты</a>
    <a href="#" class="highlight">О нас</a>
    <a href="#">Вакансии</a>
  </div>
</div>
</body>
</html>


Пока что здесь минимум кода: есть один блок div с классом .section, внутри которого находится другой блок div с классом .banner

Внутри параграфа с классом .logo прописан некоторый текст логотипа, и имеются какие-то ссылки. Всё.

К странице подключен шрифт Roboto через Google Fonts и подключен файл base.css (он же normalize) для лучшей кроссбраузерности HTML-элементов.

Изменить / Удалить

2 В данном случае нас интересует этот код:

Код
<div class="banner">
   <p class="logo">Наша компания</p>
   <a href="#">Клиенты</a>
   <a href="#" class="highlight">О нас</a>
   <a href="#">Вакансии</a>
</div>


Для начала нам понадобится прописать общие стили оформления:

Код
html {
  font-size: 62.5%;
}
body {
  font-size: 1.1em;
  line-height: 1.6;
  font-weight: 400;
  font-family: "Roboto", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222;
}

.banner {
  max-width: 960px; /задаём максимальную ширину блока/
  margin: 0 auto; /центрируем блок на странице/
  padding: 10px 0;
  padding: 0 20px;
}

/* Оформление ссылок */

.banner a {
  padding: 8px 2%;
  color: white;
  text-align: center;
  font-weight: 600;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  margin-left: 5px;
  border-radius: 4px 4px 0 0;
  background-color: rgba(255,255,255,.4);
}

.banner a:hover, .banner a.highlight {
  background-color: white;
  color: black;
}

/* Оформление контейнера */

.section {
  background-color: black;
  color: white;
  padding-top: 5px;
}

/* Стили для лого */

.logo {
  font-size: 4rem;
  margin: 0;
}


Сделаем блок div с классом .banner flex-контейнером:

Код
.banner {
  display: flex;
}


На данном этапе в браузере мы видим следующее:



Абзац и ссылки, расположенные внутри flex-контейнера, стали flex-элементами, высота кнопок навигации (они же - ссылки) слишком велика, это произошло потому, что flex-элементы увеличиваются, чтобы быть одинаковой высоты.

Как исправить это? С помощью выравнивания их по нижнему краю, используя свойство align-items:

Код
.banner {
  display: flex;
  align-items: flex-end;
}




Теперь нам нужно расположить логотип слева, а кнопки навигации справа. Здесь нам и понадобятся автоматически настраиваемые поля.

Добавим для абзаца с классом .logo автоматический отступ справа:

Код
.logo {
  margin-right: auto;
}




мы получили то что хотели, логотип выровнялся по левому краю, кнопки навигации - по правому краю. Это стало возможным благодаря тому, что автоматически настраиваемое поле у логотипа определило свой размер на основе доступного в контейнере пространства, всё свободное в контейнере пространство, таким образом, расположилось справа от логотипа, а кнопки навигации сместились к правому краю контейнера.

Аналогичного результата можно добиться, если назначить автоматически настраиваемое поле слева для первой кнопки навигации, свободное пространство контейнера при этом располагается слева от кнопки, смещая кнопки навигации вправо, к краю контейнера.

Изменить / Удалить

Форум » III. HTML и CSS » Flexbox-вёрстка » Автоматически настраиваемые поля и flex-элементы (Практикум №1)
  • Страница 1 из 1
  • 1
Поиск: