Усеченные элементы панели действий после четвертого

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 ^th ; и, следовательно, немного меньше что то),

• установите 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

Поскольку в некоторых элементах указана ширина, значки выходят за ее пределы (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>

Пример

Answer 3

Я думаю, что это удовлетворит то, что вы ищете, внесите следующие изменения в свой CSS

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