在矩形div内创建响应的方形div

Question

我有一个div作为导航头，带有以下css。这包括的总屏幕宽度

.upper-div {
width: 100%;
height: auto;
display: flex;
flex-direction: row;
}

在上面的div中是一个较小的div，包含以下css

height: 40px;
display: flex;
justify-content: center;
width: 40px;
margin: 10px;
border-radius: 10px;
padding: 12px;
cursor: pointer;
flex: 0 0 auto;
background-color: #e3e6ef;
margin-left: 2%;

当屏幕尺寸变小时，如何使较小的div响应变小？

Answer 1

从逻辑上讲，您可以设置为较小的div:

width: 95% (or wahtever you want)

在你的上分区：

display: flex;    
justify-content: center;

较小的div将始终较小，并且始终位于中心(左侧和右侧(。

这是你想要的吗？如果我不能正确理解你想要什么，告诉我，我会调整我的答案