在第四个

Question

前提条件

我想在CSS中制作一个操作栏。当发生4个以上的操作时，第五项在操作栏中应被截断一半。

---

预期结果

2个动作

3个动作

4个动作

超过4个动作

---

请参见下面的代码段：

.flex-container {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: #e9e9f2;
  box-sizing: border-box;
}

.inner-flex {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 36rem;
  height: 7rem;
  background-color: #f08bc3;
}

.sub-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 7rem;
  color: white;
}

.menu-icon {
  width: 3.2rem;
  height: 3.2rem;
  text-align: center;
}

.menu-title {
  height: 1.7rem;
  width: 7rem;
  font-size: 1.2rem;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="flex-container">
  <div class="inner-flex">
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-trello fa-3x"></i></div>
      <span class="menu-title">Action 1</span>
    </div>
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-twitter fa-3x"></i></div>
      <span class="menu-title">Action 2</span>
    </div>
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-tumblr fa-3x"></i></div>
      <span class="menu-title">Action 3</span>
    </div>
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-vimeo fa-3x"></i></div>
      <span class="menu-title">Action 4</span>
    </div>
    <!-- More than 4 Actions -->
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-skype fa-3x"></i></div>
      <span class="menu-title">Action 5</span>
    </div>
  </div>
</div>

Answer 1

要在菜单中最多设置4个项目，您可以执行以下操作：

• 在min-width: 22%上设置sub-menu（要在一个容器中填充4个项目，占25％，但是您要部分显示第5个 个；以及因此要少一些）

• 在flex-grow: 1上设置sub-menu，以便在项目较少时填充可用空间，

• 在justify-content: flex-start容器上设置inner-flex，以使溢出在右边。

通过在overflow: hidden容器上添加inner-flex来完成它-参见下面的演示

.flex-container {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: #e9e9f2;
  box-sizing: border-box;
}
.inner-flex {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 36rem;
  height: 7rem;
  background-color: #f08bc3;
  overflow: hidden; /* added */
  justify-content: flex-start; /* added */
}
.sub-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 7rem;
  color: white;
  flex-grow: 1; /* added */
  min-width: 22%; /* added */
}
.menu-icon {
  width: 3.2rem;
  height: 3.2rem;
  text-align: center;
}
.menu-title {
  height: 1.7rem;
  width: 7rem;
  font-size: 1.2rem;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="flex-container">
  <div class="inner-flex">
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-trello fa-3x"></i></div>
      <span class="menu-title">Action 1</span>
    </div>
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-twitter fa-3x"></i></div>
      <span class="menu-title">Action 2</span>
    </div>
  </div>
</div>
<br/><br/>
<div class="flex-container">
  <div class="inner-flex">
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-trello fa-3x"></i></div>
      <span class="menu-title">Action 1</span>
    </div>
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-twitter fa-3x"></i></div>
      <span class="menu-title">Action 2</span>
    </div>
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-tumblr fa-3x"></i></div>
      <span class="menu-title">Action 3</span>
    </div>
  </div>
</div>
<br/><br/>
<div class="flex-container">
  <div class="inner-flex">
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-trello fa-3x"></i></div>
      <span class="menu-title">Action 1</span>
    </div>
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-twitter fa-3x"></i></div>
      <span class="menu-title">Action 2</span>
    </div>
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-tumblr fa-3x"></i></div>
      <span class="menu-title">Action 3</span>
    </div>
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-vimeo fa-3x"></i></div>
      <span class="menu-title">Action 4</span>
    </div>
  </div>
</div>
<br/><br/>
<div class="flex-container">
  <div class="inner-flex">
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-trello fa-3x"></i></div>
      <span class="menu-title">Action 1</span>
    </div>
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-twitter fa-3x"></i></div>
      <span class="menu-title">Action 2</span>
    </div>
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-tumblr fa-3x"></i></div>
      <span class="menu-title">Action 3</span>
    </div>
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-vimeo fa-3x"></i></div>
      <span class="menu-title">Action 4</span>
    </div>
    <!-- More than 4 Actions -->
    <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-skype fa-3x"></i></div>
      <span class="menu-title">Action 5</span>
    </div>
  </div>
</div>

Answer 2

我认为这可以满足您的需求，请对CSS进行以下更改

.inner-flex {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 32rem;
    height: 7rem;
    background-color: #f08bc3;
    overflow-x: scroll;
}

Answer 3

由于某些元素中指定了宽度，因此图标会被截断（menu-title，menu-icon）。您是否正在寻找类似的东西？

.flex-container {
  display: flex;
  width: 100%;
  height: 7rem;
  background-color: #f08bc3;
  box-sizing: border-box;
  align-items: center;
  flex-direction: row;
}

.sub-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 5rem;
  width: 100%;
  color: white;
}

<div class="flex-container">
  <div class="sub-menu">
      <div class="menu-icon"><i class="fa fa-trello fa-3x"></i></div>
      <span class="menu-title">Action 1</span>
  </div>
  <!-- <div class="sub-menu"> repeated... -->
</div>

Example