React项目中基于Flexbox实现指定布局的问题求助

Hey there! Let's work through your two core layout problems one by one—we'll get that setup working exactly how you want it.

1. Fixing the contentContainer Positioning #

The main issue here is that your contentContainer was overlapping with the fixed sidebar and topbar. Since your sidebar has a fixed width of 80px and the topbar a fixed height of 45px, we just need to make sure the content container stays neatly in the remaining space.

Adjustments to contentContainer: #

• Ditch width:100% and use left: 80px + right: 0 instead—this makes it automatically fill the horizontal space to the right of the sidebar.
• Set top: 45px (matching your topbar's height) to push it below the navigation bar.
• Keep position: fixed so it stays anchored as the window resizes.

2. Fixing the Internal Flex Layout in contentContainer #

Your flex setup wasn't working because the child elements (headContent, mainContent, footerContent) had position: fixed—this yanks them out of the flex container's flow, so flex properties can't control their placement. We'll remove those fixed positions and use flexbox properly.

Key Adjustments: #

• For contentContainer, set justify-content: space-between to push headContent to the top, footerContent to the bottom, and let mainContent fill the middle gap.
• Remove all position: fixed declarations from the child elements.
• Add display:flex and flex-direction:row to each child to make them row-axis flex containers as you requested.

Updated CSS Code #

Here's the full revised CSS with all fixes applied:

/* Topbar remains unchanged with fixed height/position */
.Topbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  top: 0%;
  height: 45px;
  position: fixed;
  z-index: 2;
  -webkit-app-region: drag;
  background: transparent;
}

/* Sidebar stays fixed width and position */
.Sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  -webkit-app-region: drag;
  width: 80px;
  height: 100%;
  position: fixed;
  top: 0%;
  left: 0%;
  z-index: 2;
  background: #faf9f9;
  border-right: 0.2px solid #abababba;
}

#menuitem1 {
  width: 30px;
  height: 50px;
  padding-top: 50pt;
}

#menuitem2 {
  width: 30px;
  height: 50px;
  padding-top: 30pt;
}

svg{
  font : bold 26px Century Gothic, Arial;
  width : 100%;
  height : 100px;
  z-index: 3;
  filter: drop-shadow(3px 3px 3px rgba(161, 160, 160, 0.25));
}

text{
  fill: #f0f0ec;
  stroke: rgb(40, 40, 40);
  stroke-width: 0.5px;
  stroke-linejoin: bevel;
}

/* Fixed contentContainer positioning */
.contentContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Handles top/middle/bottom layout */
  align-items: stretch; /* Makes children fill full width */
  background: red;
  position: fixed;
  top: 45px; /* Match topbar height */
  left: 80px; /* Match sidebar width */
  right: 0;
  bottom: 0;
}

/* Head content - row-axis flex container */
.headContent {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  height: 20%;
  background-color: black;
}

/* Main content - fills middle space, row-axis flex container */
.mainContent {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-grow: 1; /* Takes all available space between head and footer */
  background-color: red;
}

.textBox {
  width: 180px;
  height: 180px;
  filter: drop-shadow(3px 3px 3px rgba(161, 160, 160, 0.25));
}

/* Footer content - row-axis flex container, stays at bottom */
.footerContent {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  height: 50px;
  background-color: blue;
}

Key Notes on the Fixes: #

• Sidebar & Topbar: Both stay fixed in position with their set dimensions, so they don't resize with the window.
• contentContainer: Automatically adapts to window size by using left:80px and right:0, and sits perfectly below the topbar.
• Internal Flex: By removing position:fixed from child elements, flexbox can now control their placement. justify-content: space-between and flex-grow:1 ensure the head stays top, footer stays bottom, and main content fills the middle. Each child is also a row-axis flex container as requested.

Give this a try—your layout should now behave exactly as you want it to!

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