CSS旋转90 *垂直文本选项卡不会居中 - 使用Flexbox

Question

我正在尝试让两个标签居中并占据垂直高度的一半。知道怎么做吗？

如果你注意到，看来持有“标签1”和“标签2”的div没有占据整个宽度，但是我使用了height: 100%并且没有修复它。我还为“标签1”和“标签2”添加了height: 50%，但这会导致每个标签占据页面高度的50％。当我使用height: 25%但高度偏离页面时，它几乎可以正常工作。

React JS File：

return (
    <div className='flexbox-parent-console overflow-hidden'>
        <div className='b--light-gray bw2 b--solid w275p bg-white pa2 overflow-auto'>
            <SocialPostExamplesArray />
        </div>
        <div className='flex-column bg-gray w25p content-around self-center'>
            <div className='post-side-tab-chosen vertical-lr'>Tab 1</div>
            <div className='post-side-tab vertical-lr'>Tab 2</div>
        </div>
    </div>
)

CSS：

.flexbox-parent-console {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start; 
    align-items: stretch;
    align-content: stretch; 
}
.self-center {
    -ms-flex-item-align: center;
    align-self: center
}
.content-around {
        -ms-flex-line-pack: distribute;
        align-content: space-around
}
.flex-column {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
}
.overflow-hidden {
    overflow: hidden
}
.overflow-auto {
    overflow: auto;
}
.vertical-lr {
  -webkit-writing-mode: vertical-lr;
  writing-mode: vertical-lr;
  writing-mode: tb-lr;
  transform: scale(-1, -1);
  text-align: center;
  width: 25px;
  line-height: 25px;
  font-weight: bold;
  font-variant: small-caps;
}

非必需品

.b--light-gray {
    border-color: #eee
}
.bg-black-10 {
    background-color: rgba(0, 0, 0, .1)
}
.bw2 {
    border-width: .25rem
}
.b--solid {
    border-style: solid
}
.pa2 {
    padding: .5rem
}

Answer 1

我使用了之前问题的摘要，并添加了2个标签。 在CSS方面，我使vertical-lr容器也成为一个弹性框

＆＃13;

＆＃13;

/* update*/


.post-side-tab-chosen {
flex:1;
background:gray;
padding: 1em 0;
}
.post-side-tab {
flex:1;
background:tomato;
padding: 1em 0;
}
/* end update */


.vertical-lr {

  -webkit-writing-mode: vertical-lr;
  /* old Win safari */
  writing-mode: vertical-lr;
  writing-mode: tb-lr;
  /* actually 
  writing-mode:sideways-lr; would be the one , but not avalaible everywhere so, let's transform */
  transform: scale(-1, -1);
  background: green;
  text-align: center;
  width: 1.5em;
  line-height: 1.5em;
  font-weight: bold;
  font-variant: small-caps;
}

.flex {
  display: flex;
}
/* did you mean  this ? */

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0.5em;
}

.fill-area-content {
  overflow: auto;
  flex: 1;
  height: 100%;
}

/* your code */
.flexbox-parent-console {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  /* align items in Main Axis */
  align-items: stretch;
  /* align items in Cross Axis */
  align-content: stretch;
  /* Extra space in Cross Axis */
}

.self-center {}

.overflow-hidden {
  overflow: hidden
}

.rotateddiv {
  width 300px;
  height: 24px;
  text-align: center;
  background: green;
}

.b--light-gray {
  border-color: #eee
}

.bg-black-10 {
  background-color: rgba(0, 0, 0, .1)
}

.bw2 {
  border-width: .25rem
}

.b--solid {
  border-style: solid
}

.pa2 {
  padding: .5rem
}

＆＃13;

<div class='flexbox-parent-console overflow-hidden'>
  <div class='b--light-gray bw2 b--solid w275p bg-white pa2 fill-area-content'>
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
  </div>
  <div class='bg-black-10 w25p flex  bg-light-gray'>
    <div class=' flex vertical-lr'><!-- updated html -->
            <div class='post-side-tab-chosen'>Tab 1</div>
            <div class='post-side-tab'>Tab 2</div><!-- end update -->
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你很接近，但这里有两个小问题： 1）您的.self-center课程会覆盖您的space-around路线 2）您需要将display: flex添加到.flex-column以使其成为Flexbox本身

希望这有帮助。

codepen