如何管理 CSS Flexbox 元素大小

Question

Answer 1

你的结构：

在Flex中，性能是这样的：当你给出一个元素

display: flex

时。这会影响该元素的子元素。因此，并非所有元素都具有

display: flex

。所以我只是调整了大小并用 percentages(%) 设置它们以使其响应。 Flex 有一个称为

flex-wrapper

的功能。它可以取两个值：

无包装
包裹

第一个数量表示如果空间不足，我会将元素移动到下一行。 第二个选项表示 如果没有足够的空间，则使元素变小，但将它们保留在原来的位置。 通过调整导航的宽度解决了该问题，并且它们不再溢出框。

body {
  margin: 1%;  /* For a suitable distance from all four sides. */
}

#header,
#wrapper,
#menu_container
 {
  width: 100%;
}
/* parent for nav */
#menu_align {
  width: 100%;
  display: flex;
  justify-content: right;  
}

#line_horizontal {
  height: 2px;
  margin-top: 30px;
  width: 100%;
  background: rgba(0, 0, 0, 0.50);
}

#nav {
  width:max-content;
  font-size: 0.9em;
  flex-wrap: nowrap;
}

#nav>ul {
  border: 1px solid black;     /* I gave this to the border so it can better cover the links. */
  list-style: none;
  padding-left: 0em;
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
}

#nav>ul>li {
  float: right;
  padding: 0.5em;
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
}

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-box</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="wrapper">
    <div id="header">
        <div id="menu_container"> <!--(flex container)100% of horizontal space across the screen-->
           <div id="menu_align"> <!--(flex container)50% of horizontal space.Right half of the screen-->
                <div id="line_horizontal"></div>
                <nav id="nav">
                    <ul> <li><a href="#">About</a></li>
                         <li><a href="#">Portfolio</a></li>
                         <li><a href="#">Contact</a</li>
                    </ul>
                </nav>
            </div>
        </div>
        <div id="logo"> </div>
     </div>
</body>
</html>

祝你好运！

如何管理 CSS Flexbox 元素大小

问题描述投票：0回答：1

1个回答

最新问题

如何管理 CSS Flexbox 元素大小

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1