使用Sass CSS和FlexBox垂直堆叠转换后的文本 [英] Vertically stacking transformed text using Sass CSS and FlexBox

问题描述

使用FlexBox和Sass，我尝试创建堆叠的垂直条，如下图所示.我期望垂直文本占据一栏的行，从而产生堆叠效果.但是，发生的是文本重叠.

Using FlexBox and Sass, I am trying to create stacked vertical bars as shown in the images pasted below. What I am expecting is the vertical text to take up the one-columned row, creating a stacking effect. What is happening, though, is the text is overlapping.

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代码:

This is the Sass .scss code that makes up the css styling:

//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;
}

发生这种奇怪的重叠.谁能提出建议，为什么垂直文本不会排成行?

There is this strange overlap that happens. Can anyone suggest why the vertical text won't make rows?

推荐答案

为了在CSS转换后测量div，我使用了getBoundingClientRect().

In order to measure the divs after the css transform, I used getBoundingClientRect().

通过几行jquery，我得到了所需的内容:

With a few lines of jquery, I got what I needed:

$(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);
  });
});

这篇关于使用Sass CSS和FlexBox垂直堆叠转换后的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！