旋转包含子元素的容器：Angular侧边导航重构问题求助

Let's work through why your current setup isn't behaving as expected and fix it up—rotating elements can be tricky because their layout behavior doesn't always match what you'd intuitively expect!

Key Issues with Your Current Code #

• The .sidenav-container uses position: absolute but has no defined width/height, so it collapses to fit its already rotated, misaligned content.
• Rotating .sidenav-item with rotate(270deg) without adjusting the transform-origin makes elements shift outside the container or overlap awkwardly.
• The tiny font size (2.5pt) and image size (5px) make content nearly invisible, which is likely contributing to the "unexpected effect" you're seeing.
• align-items: flex-start on rotated items doesn't help with proper centering or alignment after rotation.

Revised SCSS Solution #

Here's an updated version that fixes these issues and gives you a clean, functional vertical side nav:

.sidenav-container {
  position: fixed; /* Fixes the sidebar to the viewport, better than absolute for persistent navs */
  left: 0;
  top: 0;
  height: 100vh; /* Takes full viewport height */
  width: 45px; /* Narrow, fixed width for the sidebar frame */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertically centers all nav items */
  gap: 2.5rem; /* Adds consistent space between each nav item */
  background-color: #f5f5f5; /* Optional: Helps visualize the sidebar boundary */
  padding: 0 10px;

  .sidenav-item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    transform-origin: right center; /* Rotates around the right-middle of the item, keeping it inside the container */
    transform: rotate(270deg); /* Rotates content to vertical orientation */
    width: 140px; /* Fixed width to fit your text without wrapping */

    img {
      width: 18px; /* Larger icon for visibility */
      height: auto;
      margin-left: 10px; /* Adds space between text and icon */
    }

    span {
      font-size: 11pt; /* Readable font size */
      white-space: nowrap; /* Prevents text from wrapping mid-word */
    }
  }
}

What Changed & Why #

1. Fixed Container Positioning: position: fixed keeps the nav pinned to the left side even when scrolling, and explicit width/height ensures the container doesn't collapse.
2. Flex Layout for Alignment: Using flexbox on the container lets us easily center nav items vertically and add consistent spacing without messy margins.
3. Adjusted Rotation Origin: transform-origin: right center ensures each nav item rotates around its right edge, keeping it inside the sidebar instead of shifting off-screen.
4. Visible Content: Increased font and icon sizes so your navigation is actually readable—tiny sizes were probably making it look broken even if the rotation was technically correct.
5. Prevent Text Wrapping: white-space: nowrap keeps your nav text on a single line after rotation.

Quick Final Check #

Make sure your sidenav array in Angular has valid text values and correct img URLs (broken images can also throw off the layout). If you want the text to read top-to-bottom instead of bottom-to-top, swap rotate(270deg) with rotate(90deg).

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