Как разместить контент под фиксированной панелью навигации flexbox?

Опубликовано: 5 Января, 2022

Панель навигации: с помощью CSS вы можете превратить меню HTML в удивительные панели навигации. Панель навигации - это не что иное, как список ссылок. Панель навигации требует стандартного HTML в качестве основы. Использование компонентов <ul> и <li> имеет смысл идеализировать.

Мы можем разместить Контент на фиксированной панели навигации двумя способами:

  • Метод 1: использование float в CSS

    Синтаксис:

     поплавок: нет | слева | право | начальная | наследовать;

    Стоимость недвижимости:

    • нет: это не повлияет на положение контента (это значение по умолчанию).
    • left: контент будет плавать слева от своего контейнера.
    • right: контент будет плавать справа от своего контейнера.
    • initial: устанавливает для этого свойства значение по умолчанию.
    • Наследовать: получает это свойство от своего родительского компонента.

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

    Пример:

    <!DOCTYPE html>
    < html >
    < head >
    < style >
    body {
    margin: 0;
    }
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    /* position property is used
    to fix navbar */
    top: 0;
    width: 100%;
    }
    li {
    float: left;
    /* when flexbox will be used
    then there will be no need
    to write float properties
    of CSS*/
    }
    li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }
    li a:hover:not(.active) {
    background-color: #111;
    }
    .active {
    background-color: #4caf50;
    }
    </ style >
    </ head >
    < body >
    < ul >
    < li >
    < a class = "active" href = "#home" >Home</ a >
    </ li >
    < li >< a href = "#news" >News</ a ></ li >
    < li >< a href = "#contact" >Contact</ a ></ li >
    < li >< a href = "#about" >About</ a ></ li >
    </ ul >
    < div style="padding: 20px;
    margin-top: 30px;
    background-color:
    rgba(135, 206, 235, 0.5);
    height: 1500px;">
    < h1 style = "color: green;" >GeeksforGeeks</ h1 >
    < h1 >Fixed Top Navigation Bar</ h1 >
    < h2 >Scroll Scroll Scroll......</ h2 >
    < p >Write Something Write Something
    Write Something Write Something..</ p >
    < p >Write Something Write Something
    Write Something Write Something..</ p >
    < p >Write Something Write Something
    Write Something Write Something..</ p >
    < p >Write Something Write Something
    Write Something Write Something..</ p >
    < p >Write Something Write Something
    Write Something Write Something..</ p >
    < p >Write Something Write Something
    Write Something Write Something..</ p >
    < p >Write Something Write Something
    Write Something Write Something..</ p >
    < p >Write Something Write Something
    Write Something Write Something..</ p >
    < p >Write Something Write Something
    Write Something Write Something..</ p >
    < p >Write Something Write Something
    Write Something Write Something..</ p >
    < p >Write Something Write Something
    Write Something Write Something..</ p >
    < p >Write Something Write Something
    Write Something Write Something..</ p >
    < p >Write Something Write Something
    Write Something Write Something..</ p >
    < p >Write Something Write Something
    Write Something Write Something..</ p >
    < p >Write Something Write Something
    Write Something Write Something..</ p >
    < p >Write Something Write Something
    Write Something Write Something..</ p >
    < p >Write Something Write Something
    Write Something Write Something..</ p >
    < p >Write Something Write Something
    Write Something Write Something..</ p >
    < p >Write Something Write Something
    Write Something Write Something..</ p >
    < p >Write Something Write Something
    Write Something Write Something..</ p >
    </ div >
    </ body >
    </ html >

    Выход:

    Примечание: позиция: абсолютная; к содержимому игнорирует свойство float.

    • Тип списка: нет; используется для удаления пуль. Панель навигации не требует маркеров списка.
    • Установить маржу: 0; и заполнение: 0; чтобы удалить настройки браузера по умолчанию.

  • Метод 2: использование Flexbox в CSS

    Flexbox Flexbox может стать прекрасным устройством для макета. Используя flexbox, мы можем размещать контент в столбцы и многое другое. Вскоре мы рассмотрим свойства гибкого бокса. (Вы можете использовать следующий синтаксис в коде и поиграть с ним!)

    Свойства флексбокса для флекс-контейнера: (свойство: значения;)



    • дисплей: гибкий;
    • flex-direction: строка | ряд-обратный | столбец | столбец-реверс;
    • flex-wrap: упаковка | nowrap | накрутка-реверс;
    • flex-flow: перенос колонки;
    • justify-content: flex-start | гибкий конец | центр | космическое пространство | пространство между | равномерно | начало | конец | слева | Правильно;
    • align-items: stretch | гибкий старт | гибкий конец | центр | начало | конец | исходный уровень | первая базовая линия | последний исходный уровень | самозапуск | самоконец;
    • align-content: flex-start | гибкий конец | центр | пространство между | космическое пространство | равномерно | растянуть | начало | конец | исходный уровень | первая базовая линия | последняя базовая линия;

    Свойства flexbox для гибких элементов: (свойство: значения;)

    • заказ: 4; / * по умолчанию 0 * /
    • flex-grow: 2; / * по умолчанию 0 * /
    • флекс-термоусадочная: 5; / * по умолчанию 1 * /
    • флекс-основа: авто; / * авто по умолчанию * /
    • гибкость: нет; (Это сокращенное свойство для сочетания flex-grow, flex-shrink и flex-base ( например, flex: 0 1 auto; ) по умолчанию)
    • выровнять себя: авто | центр | исходный уровень | гибкий старт | гибкий конец | потягиваться;

    ** Обратите внимание, что float, clear и vertical-align не влияют на гибкий элемент. Также запрещено использование отрицательных чисел.

    Как создать фиксированную панель навигации flexbox?

     / * Модифицируем заголовок (выше мы модифицировали 
    ul и li вместо заголовка) * /  
header {
  дисплей: гибкий; 
  / * использование свойства flexbox для родительского элемента
     также известен как inline-flex * /  
  justify-content: пробел между;
  align-items: center;
  отступ: 5 пикселей;
  положение: фиксированное;
  переполнение: скрыто;
  цвет фона: rgba (0, 0, 0, 0,7);
  ширина: 100%;
}

    В этом примере,

    • дисплей: гибкий; использование свойства flexbox для родительского элемента, также известного как inline-flex.
    • justify-content: пробел между; вещи равномерно распределены внутри линии; firstitem находится на начальной строке, последняя вещь на заключительной строке. Но на этой иллюстрации мы стилизовали тег заголовка, следовательно, это влияние не может быть замечено. Но если мы стилизовали тег ul, это влияние будет заметно.
    • заказ: 1; Свойство упорядочения контролирует порядок, в котором они отображаются в держателе гибкости. По умолчанию порядок равен 0;

    Пример:

    <!DOCTYPE html>
    < html >
    < head >
    < style >
    body {
    margin: 0;
    }
    header {
    display: flex;
    /* Using flexbox property for parent
    also known as inline-flex */
    justify-content: space-between;
    /* Items are evenly distributed in
    the line; firstitem is on the
    start line, last item on the
    end line*/
    align-items: center;
    padding: 5px;
    position: fixed;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    }
    nav {
    order: 1;
    }
    .nav_links {
    list-style: none;
    }
    .nav_links li {
    display: inline-block;
    padding: 0px 20px;
    }
    .nav_links li a:hover {
    color: rgb(255, 255, 255);
    }
    li a {
    display: block;
    color: white;
    text-align: center;
    padding: 5px 5px;
    text-decoration: none;
    }
    li a:hover:not(.active) {
    background-color: #111;
    }
    .active {
    background-color: #4caf50;
    }
    </ style >
    </ head >
    < body >
    < header >
    < nav >
    < ul class = "nav_links" >
    < li >< a class = "active"
    href = "#home" >Home</ a ></ li >
    < li >< a href = "#news" >News</ a ></ li >
    < li >< a href = "#contact" >Contact</ a ></ li >
    < li >< a href = "#about" >About</ a ></ li >
    </ ul >
    </ nav >
    </ header >
    < div style="padding: 20px;
    background-color: rgba(135, 206, 235, 0.5);
    height: 1500px;">
    < h1 style = "color: green;" >
    < br />
    GeeksforGeeks
    </ h1 >
    < h1 >Fixed Flexbox Navigation Bar</ h1 >
    < h2 >Scroll Scroll Scroll......</ h2 >
    < p >Write Something Write Something Write
    Something Write Something..</ p >
    < p >Write Something Write Something Write
    Something Write Something..</ p >
    < p >Write Something Write Something Write
    Something Write Something..</ p >
    < p >Write Something Write Something Write
    Something Write Something..</ p >
    < p >Write Something Write Something Write
    Something Write Something..</ p >
    < p >Write Something Write Something Write
    Something Write Something..</ p >
    < p >Write Something Write Something Write
    Something Write Something..</ p >
    < p >Write Something Write Something Write
    Something Write Something..</ p >
    < p >Write Something Write Something Write
    Something Write Something..</ p >
    < p >Write Something Write Something Write
    Something Write Something..</ p >
    < p >Write Something Write Something Write
    Something Write Something..</ p >
    < p >Write Something Write Something Write
    Something Write Something..</ p >
    < p >Write Something Write Something Write
    Something Write Something..</ p >
    < p >Write Something Write Something Write
    Something Write Something..</ p >
    < p >Write Something Write Something Write
    Something Write Something..</ p >
    < p >Write Something Write Something Write
    Something Write Something..</ p >
    < p >Write Something Write Something Write
    Something Write Something..</ p >
    < p >Write Something Write Something Write
    Something Write Something..</ p >
    < p >Write Something Write Something Write
    Something Write Something..</ p >
    < p >Write Something Write Something Write
    Something Write Something..</ p >
    </ div >
    </ body >
    </ html >

    Выход:

  • Как разместить контент под фиксированной панелью навигации flexbox?

    Пример:

    <!DOCTYPE html>
    < html >
    < head >
    < style >
    body {
    margin: 0;
    }
    header {
    justify-content: space-between;
    /* Items are evenly distributed
    in the line; firstitem is on
    the start line, last item on
    the end line */
    padding: 5px;
    position: fixed;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    }
    .bar {
    display: flex;
    /* Use flexbox property for parent
    also known as inline-flex */
    align-items: center;
    }
    .search {
    /* Take up the rest of the
    remaining space */
    flex: 1;
    }
    .search input {
    width: 90%;
    }
    nav {
    order: 1;
    }
    </ style >
    </ head >
    < body >
    < header >
    < nav >
    < div class = "bar" >
    < div class = "username"
    style="color: rgb(255, 255, 255);
    font-size: 30px;">
    Search here :
    </ div >
    < div class = "search" >
    < input type = "search"
    placeholder = "search..." />
    </ div >
    </ div >
    </ nav >
    </ header >
    < div style="padding: 20px;
    background-color: rgba(
    135, 206, 235, 0.5);
    height: 1500px;">
    < h1 style = "color: green;" >
    < br />
    GeeksforGeeks
    </ h1 >
    < h1 >Content in Fixed Flexbox
    Navigation Bar</ h1 >
    < h2 >Scroll Scroll Scroll......</ h2 >
    < p >Write Something Write Something Write
    Something Write Something..</ p >
    < p >Write Something Write Something Write
    Something Write Something..</ p >
    < p >Write Something Write Something Write
    Something Write Something..</ p >
    < p >Write Something Write Something Write
    Something Write Something..</ p >
    < p >Write Something Write Something Write
    Something Write Something..</ p >
    < p >Write Something Write Something Write
    Something Write Something..</ p >
    < p >Write Something Write Something Write
    Something Write Something..</ p >
    < p
    Вопросы о Web технологиях Picked HTML CSS-Misc HTML-Misc CSS

    РЕКОМЕНДУЕМЫЕ СТАТЬИ

    Trovo: Путь к звездам стриминга в новом десятилетии
    31 Октября, 2023
    Топ сервисов для создания чат-бота в Телеграме
    15 Июня, 2023
    Что такое прокси IPv4 и что он умеет
    14 Июня, 2023
    Количество чисел между L и R, взаимно простых с P
    27 Февраля, 2023
    Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.
    27 Февраля, 2023
    Найдите все факторы заданного числа и их побитовое XOR
    27 Февраля, 2023
    Показать самое длинное имя
    27 Февраля, 2023
    Форматирование лицензионного ключа
    27 Февраля, 2023