減小螢屏時如何將flex子元素放在開頭？-有解無憂

制作導航欄。

在大螢屏上，一切看起來都是我需要的。

小螢屏的問題。

當螢屏縮小時，Flex 子項應該緊貼左邊緣。但這不會發生。他們居中。

這是它在我的螢屏上的樣子：

減小螢屏時如何將flex子元素放在開頭？

我需要它看起來像這樣：

減小螢屏時如何將flex子元素放在開頭？

不能使用媒體請求和其他用途。任務條件：僅彎曲，僅此而已。

那么如何才能得到和圖片一樣的效果呢？

* {
    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 class="footer">
      <a class="footer-name footer-margin white" href="#">Rio Coffee</a>

      <nav class="footer-nav footer-margin">
        <a class="footer-nav-item white" href="#">HOME</a>
        <a class="footer-nav-item white" href="#">ABOUT</a>
        <a class="footer-nav-item white" href="#">SERVICES</a>
        <a class="footer-nav-item white" href="#">MENU</a>
      </nav>

      <button class="footer-button footer-margin white">CONTACT</button>
    </footer>
  </body>
</html>

uj5u.com熱心網友回復：

我認為如果您不允許使用媒體查詢，您將獲得的最接近的是使用空格而不是空格。

不同之處在于自由空間僅分布在元素之間，不包括左右極端：

* {
    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 class="footer">
      <a class="footer-name footer-margin white" href="#">Rio Coffee</a>

      <nav class="footer-nav footer-margin">
        <a class="footer-nav-item white" href="#">HOME</a>
        <a class="footer-nav-item white" href="#">ABOUT</a>
        <a class="footer-nav-item white" href="#">SERVICES</a>
        <a class="footer-nav-item white" href="#">MENU</a>
      </nav>

      <button class="footer-button footer-margin white">CONTACT</button>
    </footer>
  </body>
</html>

uj5u.com熱心網友回復：

我要解決這個問題的方法是：

先用手機試試。這意味著您將 css 放在移動設備上，然后在移動樣式之上添加桌面。如果您對此不確定，請查看 CSS 中的媒體查詢 ( https://www.w3schools.com/css/css3_mediaqueries.asp )
默認顯示：flex；將包裝內容（如果超出限制，它將進入新行）并將使用行作為默認方向
如果您洗掉 justify-content: space-around 并將其更改為 justify-content: flex-start; 它將全部左對齊（flex-end 將右對齊），因此您可以為此進行媒體查詢。

我所做的只是使用媒體查詢添加了一個桌面/平板電腦斷點并將.footer 的 justify-content 設定為 flex-start

希望這有助于解釋更多:)

* {
    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 class="footer">
      <a class="footer-name footer-margin white" href="#">Rio Coffee</a>

      <nav class="footer-nav footer-margin">
        <a class="footer-nav-item white" href="#">HOME</a>
        <a class="footer-nav-item white" href="#">ABOUT</a>
        <a class="footer-nav-item white" href="#">SERVICES</a>
        <a class="footer-nav-item white" href="#">MENU</a>
      </nav>

      <button class="footer-button footer-margin white">CONTACT</button>
    </footer>
  </body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/410716.html

標籤：

上一篇：CSSsymbols()函式中的字母和數字型別有什么區別？

下一篇：sassmixin it-self作為連續標簽？