Question

我是HTML / CSS的新手，并开始尝试学习CSS flexbox布局。只需使用flexbox从头创建一个简单的网站。

全屏显示徽标上的图像效果很好。但是，当在屏幕尺寸上移动时，右侧的导航栏会响应，但左侧的徽标图像不会响应。我相信我已经正确设置了它。

.header-container {
 display: flex;
 width: 100%;
 height: 150px;
 align-items: center;
 justify-content: space-between;
 }


.header-container .logo .sb{
 display: flex;
 justify-content: flex-start;
 width: 60%;
 position: relative;
 left: 50px;
 padding: 20px;
 }

以下是我工作的链接：https://codepen.io/gkunthara/pen/VWdrYj

我究竟做错了什么？我一般都喜欢有关flexbox或flexbox的定位类型的提示！

Answer 1

删除职位

.header-container .nav-bar-container {
    display: flex;
    /*position: absolute;*/
    /*right: 100px;*/
}

Answer 2

删除nav上的位置＆amp;在徽标图片上设置max-width: 100%。

https://codepen.io/thesumit67/pen/bRKYLx?editors=1100

图片没有使用flexbox“响应”吗？

2 个答案: