Flexbox侧边栏元素等宽设置及面板对齐与文本换行问题

1. 统一侧边栏元素宽度 #

给.hero-left设置宽度约束并调整对齐方式，让内部元素自动铺满容器宽度：

.hero-left {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* 子元素拉伸至容器宽度 */
  max-width: 450px; /* 和右侧图片占位符宽度匹配 */
}
.sign-up {
  align-self: flex-start; /* 按钮保持左对齐，按需保留 */
  box-sizing: border-box; /* 避免padding影响宽度计算 */
}

2. 实现header与下方面板对齐 #

给header和hero容器添加统一的宽度约束，让内容区域严格对齐：

header {
  background-color: #1F2937;
  display: flex;
  justify-content: space-between; /* 替换space-around，让logo和链接靠两侧 */
  align-items: center;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto; /* 水平居中容器 */
}
.hero {
  background-color: #1F2937;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 60px 20px; /* 添加上下内边距优化视觉 */
  max-width: 1200px;
  margin: 0 auto; /* 和header容器对齐 */
}

3. 解决左侧段落换行问题 #

通过给.hero-left设置宽度上限，强制文本在指定宽度内自动换行：

.hero-left {
  max-width: 450px; /* 约束文本容器宽度 */
}
.hero-text {
  white-space: normal; /* 确保文本自动换行，默认值可省略 */
}

修改后的完整CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body {
  font-family: "Roboto", sans-serif;
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}

header {
  background-color: #1F2937;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  font-size: 24px;
  color: #F9FAF8;
  font-weight: 900;
}

.links {
  font-size: 18px;
  color: #E5E7EB;
  display: flex;
  gap: 18px;
}

.hero {
  background-color: #1F2937;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-left {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 450px;
}

.hero-right {
  display: flex;
  justify-content: flex-start
}

.hero-title {
  font-size: 48px;
  font-weight: 900;
  color: #F9FAF8;
}

.hero-text {
  font-size: 18px;
  color: #E5E7EB;
  font-weight: 300;
}

.sign-up {
  cursor: pointer;
  padding: 5px 20px;
  color: #fff;
  background-color: #3882F6;
  border-radius: 10px;
  font-weight: 700;
  border: none;
  align-self: flex-start;
  box-sizing: border-box;
}

.image-placeholder {
  background-color: gray;
  height: 200px;
  width: 450px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

a:hover,
a:visited,
a:link,
a:active {
  text-decoration: none;
  color: inherit;
}

内容的提问来源于stack exchange，提问作者pkrzysiek