Как я могу переместить панель навигации сбоку в центр с увеличенным шрифтом только с помощью CSS flexbox?

ProgramBox

Как я могу переместить панель навигации сбоку в центр с увеличенным шрифтом только с помощью CSS flexbox?

Post author:admin
Запись опубликована:8 апреля, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

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

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

 <html>
  <head>
    <link
      href="https://fonts.googleapis.com/css2?family=Open Sansamp;display=swap"
      rel="stylesheet"
    />
    <style>
      .content {
        margin: 0 auto;
        min-width: 1000px;
      }
      .flex {
        display: flex;
        position: relative;
      }
      a {
        color: red;
      }
      article {
        margin-left: 200px;
      }
      body {
        font-family: "Open Sans", sans-serif;
      }
      footer {
        color: #888888;
        font-size: 14px;
        margin-left: 100px;
      }
      header {
        font-size: 60px;
        text-align: center;
      }
      nav {
        display: flex;
        flex-direction: column;
        margin-left: 100px;
        position: absolute;
      }
    </style>
    <title>Responsive Layout</title>
  </head>
  <body>
    <main>
      <header>My Responsive Layout</header>
      <div class="content">
        <div class="flex">
          <nav>
            <a href="">Home</a>
            <a href="">About Us</a>
            <a href="">Contact Us</a>
          </nav>
          <article>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
              vel felis id quam sodales volutpat non vitae tellus. Integer eu
              diam auctor, ultrices lorem id, volutpat nisi. Sed pretium, augue
              nec elementum feugiat, neque magna ultrices nulla, at venenatis
              augue magna at ligula. Nunc euismod, turpis sed eleifend commodo,
              tellus elit lacinia ipsum, eu scelerisque tortor neque id mauris.
              Interdum et malesuada fames ac ante ipsum primis in faucibus.
              Morbi vitae elit id mi molestie laoreet. Vivamus tempor, magna vel
              iaculis aliquet, dolor nulla rhoncus turpis, in consequat nisi
              tortor at enim. Sed faucibus magna erat, efficitur facilisis
              mauris ornare nec.
            </p>
            <p>
              Pellentesque habitant morbi tristique senectus et netus et
              malesuada fames ac turpis egestas. Morbi orci nunc, blandit et
              velit non, luctus elementum sapien. Donec arcu purus, consequat
              quis diam quis, pretium tempus urna. Morbi efficitur mollis
              mattis. Duis eu sodales lorem. Etiam vel fermentum lacus. Nunc
              fermentum erat et aliquet dapibus. Integer pharetra imperdiet
              vestibulum. Pellentesque varius magna a lorem tristique efficitur.
              Praesent facilisis congue nibh sed efficitur. Nullam arcu ligula,
              eleifend ut lectus sit amet, sodales rutrum ex. Proin ultricies
              vulputate velit vitae porttitor.
            </p>
            <p>
              Ut ultrices sollicitudin arcu id viverra. In nec varius orci.
              Pellentesque habitant morbi tristique senectus et netus et
              malesuada fames ac turpis egestas. Nullam euismod urna non augue
              tincidunt aliquet. Suspendisse pretium dui vitae libero euismod
              porttitor. Sed tristique pulvinar interdum. Praesent vestibulum ac
              orci a consequat. Etiam bibendum sagittis viverra. Vestibulum quis
              mi tortor. Nulla bibendum nunc et metus faucibus aliquet.
            </p>
          </article>
        </div>
        <footer>amp;copy; My Special Layout Crew</footer>
      </div>
    </main>
  </body>
</html>

Пожалуйста, научите меня, как это делается только с помощью flexbox, если это возможно. Большое спасибо!

Ответ №1:

Есть несколько проблем с текущим CSS:

nav не требуется position: absolute ;
Следуя (1) выше, явные поля для nav и article также не нужны
Отсутствие атрибутов justify-content и flex-wrap делает вашу разметку неаккуратной

Следующее должно дать вам представление, скорректировать значения в соответствии с вашими потребностями.

 <html>
  <head>
    <link
      href="https://fonts.googleapis.com/css2?family=Open Sansamp;display=swap"
      rel="stylesheet"
    />
    <style>
      .content {
        margin: 0 auto;
        min-width: 1000px;
      }
      .flex {
        display: flex;
        position: relative;
        justify-content: center;
        flex-wrap: wrap;
        max-width: 800px;
        margin: 0 auto;
      }
      a {
        color: red;
      }
      article {
        min-width: 800px;
      }
      body {
        font-family: "Open Sans", sans-serif;
      }
      footer {
        color: #888888;
        font-size: 14px;
        margin-left: 100px;
      }
      header {
        font-size: 60px;
        text-align: center;
      }
      nav {
        display: flex;
        flex-direction: column;
        min-width: 100px;
      }
    </style>
    <title>Responsive Layout</title>
  </head>
  <body>
    <main>
      <header>My Responsive Layout</header>
      <div class="content">
        <div class="flex">
          <nav>
            <a href="">Home</a>
            <a href="">About Us</a>
            <a href="">Contact Us</a>
          </nav>
          <article>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
              vel felis id quam sodales volutpat non vitae tellus. Integer eu
              diam auctor, ultrices lorem id, volutpat nisi. Sed pretium, augue
              nec elementum feugiat, neque magna ultrices nulla, at venenatis
              augue magna at ligula. Nunc euismod, turpis sed eleifend commodo,
              tellus elit lacinia ipsum, eu scelerisque tortor neque id mauris.
              Interdum et malesuada fames ac ante ipsum primis in faucibus.
              Morbi vitae elit id mi molestie laoreet. Vivamus tempor, magna vel
              iaculis aliquet, dolor nulla rhoncus turpis, in consequat nisi
              tortor at enim. Sed faucibus magna erat, efficitur facilisis
              mauris ornare nec.
            </p>
            <p>
              Pellentesque habitant morbi tristique senectus et netus et
              malesuada fames ac turpis egestas. Morbi orci nunc, blandit et
              velit non, luctus elementum sapien. Donec arcu purus, consequat
              quis diam quis, pretium tempus urna. Morbi efficitur mollis
              mattis. Duis eu sodales lorem. Etiam vel fermentum lacus. Nunc
              fermentum erat et aliquet dapibus. Integer pharetra imperdiet
              vestibulum. Pellentesque varius magna a lorem tristique efficitur.
              Praesent facilisis congue nibh sed efficitur. Nullam arcu ligula,
              eleifend ut lectus sit amet, sodales rutrum ex. Proin ultricies
              vulputate velit vitae porttitor.
            </p>
            <p>
              Ut ultrices sollicitudin arcu id viverra. In nec varius orci.
              Pellentesque habitant morbi tristique senectus et netus et
              malesuada fames ac turpis egestas. Nullam euismod urna non augue
              tincidunt aliquet. Suspendisse pretium dui vitae libero euismod
              porttitor. Sed tristique pulvinar interdum. Praesent vestibulum ac
              orci a consequat. Etiam bibendum sagittis viverra. Vestibulum quis
              mi tortor. Nulla bibendum nunc et metus faucibus aliquet.
            </p>
          </article>
        </div>
        <footer>amp;copy; My Special Layout Crew</footer>
      </div>
    </main>
  </body>
</html>

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

2. Вам нужно будет изменить ширину, чтобы добиться стекирования в любой точке останова. flex-wrap и min-width выполните это.