如何根据方向的变化在css中左右切换类浮动？

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  width: 100%;
  overflow: hidden;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

var container = document.querySelector('.container');

// 添加左浮动类
container.classList.add('float-left');

// 移除左浮动类，添加右浮动类
container.classList.remove('float-left');
container.classList.add('float-right');