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

【问题标题】：Vertically stacking transformed text using Sass CSS and FlexBox使用 Sass CSS 和 FlexBox 垂直堆叠转换后的文本
【发布时间】：2018-12-27 09:18:43
【问题描述】：

使用 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;
}

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

【问题讨论】：

标签： html css sass flexbox

【解决方案1】：

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

我不确定您需要支持哪些浏览器，但text-orientation / writing-mode 可以满足您的大部分需求，无需 js。

.skills-bar { writing-mode: sideways-lr; // only supported in FF, use 'vertical-lr' for more support text-orientation: upright; float: left; }

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

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

【讨论】：

【解决方案2】：

为了测量css转换后的div，我使用了getBoundingClientRect()。

用几行jquery，我得到了我需要的东西：

$(document).ready(function(){
  var skills = $(".skills-bar")
  $.each(skills, function(i, div) {
    console.log(div);
    var dimensions = div.getBoundingClientRect();
    console.log(dimensions);
    $(this).css("width", dimensions.width).css("height", dimensions.height);
  });
});

【讨论】：