title: How can I reposition a nav bar from the side to the center with enlarged font with just CSS flexbox?
body: <p>I'm supposed to only use flexbox to move things around when the page width changes to below certain threshold. The before and after page layouts are supposed to look like this below: <a href="https://i.stack.imgur.com/FLH1g.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FLH1g.jpg" alt="page before changing width" /></a><a href="https://i.stack.imgur.com/tXa5S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tXa5S.png" alt="page after lowering width below 1000px" /></a>   I have no idea how this is done and this assignment is one that comes before learning grid and media-query so I think I'm really not supposed to use those.</p>
  <p>My code is as follows (there are no lines that have anything to do with repositioning the nav bar because I don't know what properties are to be used for that purpose, so it's basically just a generic display of the title, the nav bar, the passages and the footer):</p>
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;link
        href=&quot;https://fonts.googleapis.com/css2?family=Open+Sans&amp;display=swap&quot;
        rel=&quot;stylesheet&quot;
      /&gt;
      &lt;style&gt;
        .content {
          margin: 0 auto;
          min-width: 1000px;
        }
        .flex {
          display: flex;
          position: relative;
        }
        a {
          color: red;
        }
        article {
          margin-left: 200px;
        }
        body {
          font-family: &quot;Open Sans&quot;, 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;
        }
      &lt;/style&gt;
      &lt;title&gt;Responsive Layout&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;main&gt;
        &lt;header&gt;My Responsive Layout&lt;/header&gt;
        &lt;div class=&quot;content&quot;&gt;
          &lt;div class=&quot;flex&quot;&gt;
            &lt;nav&gt;
              &lt;a href=&quot;&quot;&gt;Home&lt;/a&gt;
              &lt;a href=&quot;&quot;&gt;About Us&lt;/a&gt;
              &lt;a href=&quot;&quot;&gt;Contact Us&lt;/a&gt;
            &lt;/nav&gt;
            &lt;article&gt;
              &lt;p&gt;
                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.
              &lt;/p&gt;
              &lt;p&gt;
                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.
              &lt;/p&gt;
              &lt;p&gt;
                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.
              &lt;/p&gt;
            &lt;/article&gt;
          &lt;/div&gt;
          &lt;footer&gt;&amp;copy; My Special Layout Crew&lt;/footer&gt;
        &lt;/div&gt;
      &lt;/main&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Please teach me how it's done with flexbox alone if possible. Thanks much!</p>