Html 在此flexbox布局中，保持“侧边”列的固定宽度

我有一个新网站的简单flexbox布局。 它有一个标题、一个导航、一个全屏显示在容器外的封面、一个内容和一个旁白

#容器{
保证金：0自动；
最大宽度：1080px；
}
#纵队{
显示：-ms flex；
显示：-webkit flex；
显示器：flex；
柔性流：行换行；
}
标题{
填充：3%；
背景色：#6495ED；
}
#掩护{
最大宽度：1350px；
利润率：0-135px；
填充：3%；
背景色：#6495ED；
}
标题#标题{
字体大小：50px；
颜色：#fff；
}
导航{
宽度：97%；
背景色：#6495ED；
填充：01.5%01.5%；
}
李国荣{
显示：内联块；
填充：15px1.5%15px1.5%；
}
海军ulli a{
文字装饰：无；
颜色：#ffffff；
字体大小：1.2米；
}
导航ulli a：悬停{
颜色：#000000；
文字装饰：无；
}
/*满足于
--------------------------------------------- */
#栏目>#内容{
填充：3%；
宽度：64%；
}
#列>旁边{
填充：3%；
最小宽度：24%；
背景色：#eee；
}
页脚{
宽度：94%；
填充：3%；
背景色：#6495ED；
边框顶部：5px纯黑；
颜色：#fff；
文本对齐：居中；
}
@介质和全部（最大宽度：1350px）{
#掩护{
最大宽度：1080px；
保证金：0；
}
}
@介质和全部（最大宽度：768px）{
标题{
文本对齐：居中；
}
导航{
文本对齐：居中；
}
#纵队{
-webkit flex流：列换行；
柔性流：柱包裹；
}
#栏目>#内容{
宽度：94%；
填充：3%；
}
#列>#侧栏{
宽度：94%；
填充：3%；
边框顶部：3px实心#E64A19；
}
}
@介质和全部（最大宽度：330px）{
李国荣{
显示：块；
宽度：94%；
}
}

两列






版权所有&复制Booo

您提到了

旁边的
“正在消失”，但我看到它在较小的视口中的
#内容下重新流动

如果您需要将
放在一旁
成为
360px
并拥有
#内容
请填充剩余的空间集
flex grow:1用于
#内容
并告诉
#侧栏
为
360px


#容器{
保证金：0自动；
最大宽度：1080px；
}
#纵队{
显示：-ms flex；
显示：-webkit flex；
显示器：flex；
}
#标题，
#封面，
#页脚{
填充：3%；
背景色：#6495ED；
}
#掩护{
最大宽度：1350px；
利润率：0-135px；
}
#头衔{
字体大小：50px；
颜色：#fff；
}
#菜单{
背景色：#6495ED；
填充：0.1.5%；
}
#菜单ul{
保证金：1rem；
填充：0；
}
#菜单里{
显示：内联块；
填充：15px 1.5%；
}
#菜单a{
文字装饰：无；
颜色：#fff；
字号：1.2rem；
}
#菜单a：悬停{
颜色：#000；
}
/*满足于
--------------------------------------------- */
#内容,，
#边栏{
填充：3%；
}
#内容{
柔性生长：1；
}
#边栏{
最小宽度：360px；
背景色：#eee；
}
#页脚{
边框顶部：5px纯黑；
颜色：#fff；
文本对齐：居中；
}
@介质和全部（最大宽度：1350px）{
#掩护{
最大宽度：1080px；
保证金：0；
}
}
@介质和全部（最大宽度：768px）{
#标题，
#菜单{
文本对齐：居中；
}
#纵队{
-webkit柔性方向：列；
弯曲方向：立柱；
}
#边栏{
边框顶部：3px实心#E64A19；
}
}
@介质和全部（最大宽度：330px）{
#菜单里{
显示：块；
填充：0.3%；
}
}

两列






版权所有&复制Booo
在我看来并没有消失，只是移动到
#content
下方。是的，我必须将侧边固定在右侧，但如果您不想将其包装（移动到内容下方），请不要使用
flex flow:wrap
。如果要修复一列，请将该列设置为
flex:0
。如果您想让它消失在某个宽度以下，请在该宽度的“媒体”部分中，为它指定
display:none
。