Question

我试图将文本的数量显示为垂直水平，就像Mozilla开发人员页面显示的那样，它支持浏览器，但是使用了flex CSS。 https://developer.mozilla.org/en-US/docs/Web/CSS/transform（在页面底部检查）

我几乎已经实现了flex CSS，但是文本断了，并且中心和底端未对齐。

CSS

ul.chart-bg {
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #ccc;
    padding: 0;
    display: flex;
    justify-content: space-between;
}

.container {
    flex: 1 1 auto;
    list-style: none;
    margin-left: 15px;
    display: flex;
    align-items: flex-end;
}

ul li.container:nth-child(1) {
    margin: 0 !important;
}

.skills {
    flex: 1 1 auto;
    padding: 0;
    width: 100%;
    animation: draw 1s ease-in-out;
    background-color: #e9e9e9;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    display: flex;
    align-items: flex-end;
}

.amount {
    flex: 1 1 auto;
    color: #9c9c9c;
    font-family: "sans-serif";
    transform-origin: 0 0;
    transform: rotate(-90deg);
    animation: amountVal 2s ease-in-out;
}

使用条形图的flex尝试使文本数量垂直对齐，但会破坏

提琴：https://jsfiddle.net/snx5mqj8/1/

Answer 1

我更改了一些CSS属性以执行文本居中

我在transform-origin类中删除了amount属性，并在align-items: flex-end;类中将center替换为skill，并添加了white-space CSS属性以查看金额和一行文字

这是您的小提琴：https://jsfiddle.net/df6uraLw

Answer 2

如果您希望它看起来完全像mozilla中的一样，则需要书写模式和绝对定位，在这里我没有使用flexbox，而是使用writing-mode和position:absolute来做到，它的对齐方式非常好，看看它是否对您https://jsfiddle.net/k6gcxysr/

有效

.skills {
  padding: 0;
  width:100%;
  animation: draw 1s ease-in-out;
  background-color: #e9e9e9;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  position: relative;
}
.amount {
    color: #9c9c9c;
    font-family: "sans-serif";
    animation: amountVal 2s ease-in-out; 
    writing-mode: vertical-rl;
    position:absolute;
    right:30%;
    bottom:4%;
    transform: rotateZ(180deg);
    }

如何使用Flex CSS将条形图垂直放置在文本中心

2 个答案: