How to put flex children at the beginning, when decreasing the screen?-CodePudding

Making a navigation bar.

On large screens, everything looks like I need.

The problem with small screens.

When a screen decreases, Flex children should be clinging to the left edge. But this does not happen. They are centered.

This is how it looks like on my screen:

I need it to look like this:

Media requests and other use cannot be used. Task condition: only flexs and nothing more.

So how can I get the same effect as in the picture?

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

.footer {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;

    background: black;
    font-weight: bold;
    padding: 8px 8px;
}

.footer-name {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.footer-nav-item {
    margin-left: 10px;
}

.footer-nav-item:hover {
    border-bottom: 2px white dashed;
}

.footer-button {
    font-size: 7px;
    background: inherit;
    border: 1px solid white;
    padding: 7px 7px;
    font-weight: bold;
    border-radius: 4px;
}

.footer-button:hover {
    background: white;
    color: black;
}

.white {
    color: white;
}

.footer-margin {
    margin: 8px 8px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./assets/css/reset.css" />
    <link rel="stylesheet" href="./assets/css/styles.css" />
    <title>Flex navigation</title>
  </head>
  <body>
    <footer >
      <a  href="#">Rio Coffee</a>

      <nav >
        <a  href="#">HOME</a>
        <a  href="#">ABOUT</a>
        <a  href="#">SERVICES</a>
        <a  href="#">MENU</a>
      </nav>

      <button >CONTACT</button>
    </footer>
  </body>
</html>

CodePudding user response：

I think the closest you will get if you are not allowed to use media queries is to use space-between instead of space-around.

The difference is that the free space is distributed between elements only, not including the left and right extreme sides:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

.footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    background: black;
    font-weight: bold;
    padding: 8px 8px;
}

.footer-name {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.footer-nav-item {
    margin-left: 10px;
}

.footer-nav-item:hover {
    border-bottom: 2px white dashed;
}

.footer-button {
    font-size: 7px;
    background: inherit;
    border: 1px solid white;
    padding: 7px 7px;
    font-weight: bold;
    border-radius: 4px;
}

.footer-button:hover {
    background: white;
    color: black;
}

.white {
    color: white;
}

.footer-margin {
    margin: 8px 8px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./assets/css/reset.css" />
    <link rel="stylesheet" href="./assets/css/styles.css" />
    <title>Flex navigation</title>
  </head>
  <body>
    <footer >
      <a  href="#">Rio Coffee</a>

      <nav >
        <a  href="#">HOME</a>
        <a  href="#">ABOUT</a>
        <a  href="#">SERVICES</a>
        <a  href="#">MENU</a>
      </nav>

      <button >CONTACT</button>
    </footer>
  </body>
</html>

CodePudding user response：

The way I would combat this is:

Try using mobile first. This means your putting your css for mobile and then adding desktop on top of the mobile styling. If you're unsure about this, look at media queries in CSS (https://www.w3schools.com/css/css3_mediaqueries.asp)
By default display: flex; will wrap content (if it exceeds the limit, it will go onto a new line) and will use row as the default direction
If you remove the justify-content: space-around and change it for justify-content: flex-start; it will all be left aligned (flex-end will right align) so you could do a media query for this.

All i've done is added a desktop/tablet breakpoint using a media query and set the .footer's justify-content to flex-start

Hope this helps explain a little more :)

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

.footer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;

    background: black;
    font-weight: bold;
    padding: 8px 8px;
}

.footer-name {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.footer-nav-item {
    margin-left: 10px;
}

.footer-nav-item:hover {
    border-bottom: 2px white dashed;
}

.footer-button {
    font-size: 7px;
    background: inherit;
    border: 1px solid white;
    padding: 7px 7px;
    font-weight: bold;
    border-radius: 4px;
}

.footer-button:hover {
    background: white;
    color: black;
}

.white {
    color: white;
}

.footer-margin {
    margin: 8px 8px;
}

/* Desktop styling! */
@media screen and (min-width: 480px) {
  .footer { justify-content: space-around; }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./assets/css/reset.css" />
    <link rel="stylesheet" href="./assets/css/styles.css" />
    <title>Flex navigation</title>
  </head>
  <body>
    <footer >
      <a  href="#">Rio Coffee</a>

      <nav >
        <a  href="#">HOME</a>
        <a  href="#">ABOUT</a>
        <a  href="#">SERVICES</a>
        <a  href="#">MENU</a>
      </nav>

      <button >CONTACT</button>
    </footer>
  </body>
</html>