Html 为什么我的flex项目会从屏幕上消失？

我有一个灵活的导航，它的包装到左侧，部分离开屏幕。有经验的人知道这是什么原因吗？我不明白它为什么这样做

标题{
背景色：rgba（255,165,0,8）；
边框底部：12px纯黑；
显示器：flex；
柔性流：行换行；
对齐内容：居中对齐；
}
收割台h1{
文本对齐：居中；
保证金：0；
填充：15px；
文本阴影：5px5px5pxRGBA（0,0,0,3）；
边框：8px纯黑；
}
收割台h1，
导航a{
字号：700；
字体系列：arial；
}
标题导航{
显示：无；
}
导航ul{
列表样式：无；
填充：0；
}
李国荣{
文本对齐：居中；
保证金：1px；
边框：1px纯白；
边界半径：15px；
}
a{
文字装饰：无；
}
答:访问,，
A.
h1{
颜色：白色；
}
@媒体屏幕和屏幕（最小宽度：400px）{
标题{
高度：120px；
显示器：flex；
证明内容：之间的空间；
}
收割台h1{
利润率：08%；
字号：2em；
自我校准：灵活启动；
空白：nowrap；
}
标题导航{
显示：块；
自对准：柔性端；
}
导航ul{
显示器：flex；
证明内容：柔性端；
利润率：0.8%0.0；
}
李国荣{
边界半径：8px；
填充物：5px；
利润率：4x1%；
字体大小：1.5rem；
}
.字符：悬停{
位置：相对位置；
边界半径：8px 8px 0；
}
.下拉菜单{
位置：绝对位置；
显示：无；
顶部：38px；
空白：nowrap；
左：0；
背景色：rgba（255,165,0,8）；
边框：1px实心rgba（0,0,0,02）；
盒影：5px 5px 2px rgba（0,0,0,3）；
}
.字符：悬停.下拉菜单{
显示：块；
}
.下拉菜单李{
保证金：0；
边界半径：0；
}
页脚导航{
显示：无；
}
}

六翼天使编年史

在CSS中更改以下内容：

nav ul{
  display: flex;
  /* justify-content: flex-end; */
  margin: 0 8% 0 0;
}

简短回答 不要在弹性项目页边距上使用百分比。使用另一个单元，例如

px

或

em

---

解释 当您将主容器（

.header

）设置为flex容器时，其子容器将成为flex项

这是两个子项：

h1

和

nav

（下面添加了红色边框）

每个导航项目（

li

）都有一个水平边距（每侧1%）

这会导致它们溢出容器

然后，由于容器具有

justify content:flex end

，因此项目将与容器的右边缘对齐。这意味着溢出发生在左侧（参见上图）

在较小的屏幕上，导航元素包裹在收割台的左边缘，溢出的项目消失在视野之外：

如果切换到

justify content:flex start

，则项目会在右侧溢出

---

但是真正的问题实际上是：

为什么

ul

容器没有扩展以容纳

li

子容器

答案似乎是对水平边距使用百分比

nav ul {
   display: flex;
   justify-content: flex-end;
   margin: 0 8% 0 0;
}

nav ul li {
   border-radius: 8px;
   padding: 5px;
   margin: 4px 1%;
   font-size: 1.5rem;
}

容器在页边距上无法识别此单元，因此无法扩展

请注意

作者应避免在flex的填充或边距中使用百分比 项目，因为它们在不同的浏览器中会有不同的行为

---

一旦你在你的边距上切换到非百分比单位，一切似乎都正常了。

只要删除

调整内容：flex end来自媒体查询部分的
导航ul
规则：


标题{
背景色：rgba（255,165,0,8）；
边框底部：12px纯黑；
显示器：flex；
柔性流：行换行；
对齐内容：居中对齐；
}
收割台h1{
文本对齐：居中；
保证金：0；
填充：15px；
文本阴影：5px5px5pxRGBA（0,0,0,3）；
边框：8px纯黑；
}
收割台h1，
导航a{
字号：700；
字体系列：arial；
}
标题导航{
显示：无；
}
导航ul{
列表样式：无；
填充：0；
}
李国荣{
文本对齐：居中；
保证金：1px；
边框：1px纯白；
边界半径：15px；
}
a{
文字装饰：无；
}
答:访问,，
A.
h1{
颜色：白色；
}
@媒体屏幕和屏幕（最小宽度：400px）{
标题{
高度：120px；
显示器：flex；
证明内容：之间的空间；
}
收割台h1{
利润率：08%；
字号：2em；
自我校准：灵活启动；
空白：nowrap；
}
标题导航{
显示：块；
自对准：柔性端；
}
导航ul{
显示器：flex；
利润率：0.8%0.0；
}
李国荣{
边界半径：8px；
填充物：5px；
利润率：4x1%；
字体大小：1.5rem；
}
.字符：悬停{
位置：相对位置；
边界半径：8px 8px 0；
}
.下拉菜单{
位置：绝对位置；
显示：无；
顶部：38px；
空白：nowrap；
左：0；
背景色：rgba（255,165,0,8）；
边框：1px实心rgba（0,0,0,02）；
盒影：5px 5px 2px rgba（0,0,0,3）；
}
.字符：悬停.下拉菜单{
显示：块；
}
.下拉菜单李{
保证金：0；
边界半径：0；
}
页脚导航{
显示：无；
}
}

六翼天使编年史














原因请参见我的answ
nav ul {
   display: flex;
   justify-content: flex-end;
   margin: 0 8% 0 0;
}

nav ul li {
   border-radius: 8px;
   padding: 5px;
   margin: 4px 1%;
   font-size: 1.5rem;
}