html - 使用 Sass CSS 和 FlexBox 垂直堆叠转换后的文本

Question

使用 FlexBox 和 Sass，我尝试创建堆叠的垂直条，如下面粘贴的图像所示。我期望的是垂直文本占据单列行，从而产生堆叠效果。但是，发生的情况是文本重叠。

html 标记是这样的:

<div class="container__row">
  <div class="container__col-sm-12 container__col-md-6 container__col-md-6">
      <h1>Another section</h1>
  </div>
  <div class="container__col-sm-12 container__col-md-6 container__col-md-6">
      <div class=container__row>
        <div class="container__col-sm-12 container__col-md-12 container__col-md-12 skills-bar">
          Front-End Technologies
        </div>
      </div>
      <div class=container__row>
        <div class="container__col-sm-12 container__col-md-12 container__col-md-12 skills-bar">
          Front-End Technologies
        </div>
      </div>
      <div class=container__row>
        <div class="container__col-sm-12 container__col-md-12 container__col-md-12 skills-bar">
          Design
        </div>
      </div>
      <div class=container__row>
        <div class="container__col-sm-12 container__col-md-12 container__col-md-12 skills-bar">
          GIS
        </div>
      </div>
    </div>

<div class="container__row">

这是构成 css 样式的 Sass .scss 代码:

//site container with set max width
$grid__bp-md: 768;
$grid__bp-lg: 992;
$grid__cols: 12;
//sass map to define breakpoints
$map-grid-props: ('-sm':0, '-md': $grid__bp-md, '-lg' : $grid__bp-lg);
//mixin to dynamically create media query  for each breakpoint
@mixin create-mq($breakpoint) {
  @if($breakpoint == 0) {
    @content;
  } @else {
    @media screen and (min-width: $breakpoint *1px) {
      @content;
    }
  }
}
@mixin create-col-classes($modifier, $grid__cols, $breakpoint) {
  @include create-mq($breakpoint) {
    //class to set up columns for all screen sizes - mobile first
    @for $i from 1 through $grid__cols {
      &__col#{$modifier}-#{$i} {
        flex-basis: (100 / ($grid__cols / $i)) * 1%;
      }
    }
  }
}

.container {
  max-width: $grid__bp-md * 1px;
  margin: 0 auto;
  //attribute to override max width
  &--fluid {
    margin: 0;
    max-width: 100%;
  }
  //attribute to position row's child elements. remove overflow with wrap and 100% width for nesting
  &__row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  @each $modifier, $breakpoint in $map-grid-props {
    @include create-col-classes($modifier, $grid__cols, $breakpoint);
  }
}

  p {
    font-size: .85em;
    color: #aaa;
  }
}

.skills-bar {
  transform: rotate(90deg);
  transform-origin: left top 0;
  float: left;
}

发生了这种奇怪的重叠。谁能建议为什么垂直文本不会成行？

Answer 1

如果您查看检查器，您会发现容器的原始高度没有受到变换的影响，这就是发生这种情况的原因。如果不使用 js 测量转换后的新高度，我想不出解决办法。

我不确定您需要支持哪些浏览器，但是 text-orientation/writing-mode 可以在大多数情况下满足您的需求，无需 js。

.skills-bar { 书写模式:sideways-lr；//仅在 FF 中支持，使用 'vertical-lr' 以获得更多支持 文本方向:直立； 向左飘浮; }

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation