均匀分发缩放项目？

Question

如何修改下面的样式，使得缩放后每个元素之间的间距相同？ （没有绝对定位）

期望的结果：

＆＃13;

＆＃13;

.menu-next, .menu-previous1 {
	transform: scale(.9); transform-origin: left;
}

.menu-previous2 { transform: scale(.7); transform-origin: left;}

.menu-previous3 { transform: scale(.55); transform-origin: left;}

.menu {
background-color: gray;
padding: 10px;
}

.menu div {
  display: block;

  width: 20%;
  padding: 10px;
  background-color: white;
  color: green;
}

＆＃13;

<div class="menu">
<div class="menu-previous3">Items</div>
<div class="menu-previous2">Store</div>
<div class="menu-previous1">Friends</div>
<div class="menu-current" >Settings</div>
<div class="menu-next" >Other</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用scale(x, y)而非scale(value) + transform-origin

＆＃13;

＆＃13;

.menu-next,
.menu-previous1 {
  transform: scale(.9, 1);
  transform-origin: left;
}

.menu-previous2 {
  transform: scale(.7, 1);
  transform-origin: left;
}

.menu-previous3 {
  transform: scale(.55, 1);
  transform-origin: left;
}

.menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: gray;
  padding: 10px;
}

.menu div {
  display: block;
  width: 20%;
  padding: 10px;
  background-color: white;
  border: 1px solid green;
  color: green;
}

＆＃13;

<div class="menu">
  <div class="menu-previous3">Items</div>
  <div class="menu-previous2">Store</div>
  <div class="menu-previous1">Friends</div>
  <div class="menu-current">Settings</div>
  <div class="menu-next">Other</div>
</div>

＆＃13;

＆＃13;

＆＃13;

有了这个问题：scalling text。但你可以使用伪元素（like here）

来解决这个问题

Answer 2

最好的方法是包装缩放项目并将其他ui属性分别应用于包装div，然后将缩放应用于其中的项目。

以下是应用此理论的代码，并且等间距的填充和边距稍有变化：

.itemwrapper .menu-next, .itemwrapper .menu-previous1 {
	transform: scale(.9); transform-origin: left; 
}

.itemwrapper .menu-previous2 { transform: scale(.7); transform-origin: left;}

.itemwrapper .menu-previous3 { transform: scale(.55); transform-origin: left;}

.menu {
background-color: gray;
padding: 10px;
}

.itemwrapper{
  display: block;
  width: 20%;
  padding: 5px 10px;
  margin:2px;
  background-color: white;
  color: green;
 }

<div class="menu">
  <div class="itemwrapper"><div class="menu-previous3">Items</div></div>
<div class="itemwrapper"><div class="menu-previous2">Store</div></div>
<div class="itemwrapper"><div class="menu-previous1">Friends</div></div>
<div class="itemwrapper"><div class="menu-current" >Settings</div></div>
<div class="itemwrapper"><div class="menu-next" >Other</div></div>
</div>

希望这有帮助。

Answer 3

可能你可以手动调整它......不是一个很好的解决方案，但很难做得更好。

＆＃13;

＆＃13;

.menu-next,
.menu-previous1 {
  transform: scale(.9);
}

.menu-previous2 {
  transform: scale(.7);
  margin-bottom: -6px;
}

.menu-previous3 {
  transform: scale(.55);
  margin-bottom: -12px;
}

.menu {
  background-color: gray;
  padding: 10px;
}

.menu div {
  display: block;
  width: 20%;
  padding: 10px;
  background-color: white;
  color: green;
  transform-origin: left;
}

＆＃13;

<div class="menu">
  <div class="menu-previous3">Items</div>
  <div class="menu-previous2">Store</div>
  <div class="menu-previous1">Friends</div>
  <div class="menu-current">Settings</div>
  <div class="menu-next">Other</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

基于这个答案，有点像hack-y：https://stackoverflow.com/a/16388428/1204415

换行缩放的div，调整包装器的大小，并在包装​​器中移动带有负边距的缩放div。 scale()似乎也会缩放边框，边距和填充。

<强> HTML

<div class="menu">
<div class="wrap1">
  <div class="item menu-previous3">Items</div>
</div>
<div class="wrap2">
  <div class="item menu-previous2">Store</div>
</div>
<div class="item menu-previous1">Friends</div>
<div class="item menu-current" >Settings</div>
<div class="item menu-next" >Other</div>
</div>

<强> CSS

.wrap1 {
  height: 20px;
  margin: 0;
  overflow: hidden;
  background-color: black;
}
.wrap2 {
  height: 32px;
  margin: -5px 0 0 0;
  overflow: hidden;
  background-color: blue;
}
.menu-next, .menu-previous1 {
    transform: scale(.9); transform-origin: left;
}

.menu-previous2 { transform: scale(.7); transform-origin: left;}

.menu-previous3 { transform: scale(.55); transform-origin: left; margin: -8px 0 0 0; }

.menu {
background-color: gray;
padding: 10px;
}

.menu .item {
  display: block;
  outline:1px solid red;
  width: 20%;
  padding: 10px;
  background-color: white;
  color: green;
}

笔：https://codepen.io/dmoz/pen/vmjybo