0
私は両方のタブを中央に置き、縦の高さの半分を取ろうとしています。どのようにこれを行うにはどのようなアイデア？CSSを90度回転させる*縦書きのテキストタブが中央にならない - フレックスボックスの使用
あなたが気付いた場合、DIVは「タブ1」を開催し、「タブ2」は、完全な幅に取っていないが、私はheight: 100%を使ってきたし、それはそれを修正しない表示されます。また、「Tab 1」と「Tab 2」の両方にheight: 50%を追加しましたが、各タブはページの高さの50％を占めることになります。 height: 25%を使用するとほとんど動作しますが、高さはページから外れます。
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：私はあなたの以前の質問のスニペットを使用し、それに2つのタブが追加されている
.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
}