the same style within the selector loss after vue packing

Question

The source code is as follows

css code

.menu {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding: 0 50px;
}

.menu__item {
  all: unset;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 0 14px;
  text-align: center;
  cursor: pointer;
}

.icon {
  width: 42px;
  height: 42px;
  stroke: white;
  fill: transparent;
  stroke-width: 1pt;
  stroke-miterlimit: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
}

html code

<menu class="menu">
  <button class="menu__item"><svg class="icon" viewBox="0 0 24 24">...</svg>item1</button>
  <button class="menu__item"><svg class="icon" viewBox="0 0 24 24">...</svg>item2</button>
  <button class="menu__item"><svg class="icon" viewBox="0 0 24 24">...</svg>item3</button>
</menu>

Packed and viewed in the browser, the flex style that should be on the 'menu__item' is not working, only the 'menu' has!!!

css in F12

.menu, .menu__item {
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu {
    font-size: 16px;
    padding: 0 50px;
}
.menu__item {
    all: unset;
    flex-grow: 1;
    padding: 9px 0 14px;
    text-align: center;
    cursor: pointer;
}

Why is it merged like this `.menu, .menu__item` and the flex style lost?

Its not lost, the commons styles are just combined to use with multiple css selectors. — bhansa, Aug 29 '22 at 09:12
Which style do you think is lost and how is it not behaving as intended? — Ruan Mendes, Aug 29 '22 at 13:54
@Juan Mendes The flex should be on the '.menu__item' is loss. — sanjin, Sep 05 '22 at 01:51
@bhansa It's true that it's not lost, but it's not in effect. — sanjin, Sep 05 '22 at 02:06

Vanois.be · Answer 1 · 2022-08-29T13:57:13.027

-1

A <button> element cannot be a flex or grid container.

See : https://stackoverflow.com/a/40483475/19092050

Use a div instead

edited Aug 29 '22 at 13:57

answered Aug 29 '22 at 09:10

Vanois.be

11
3

1

Using `
` elements instead of other elements isn't good for accessibility throughout the site nor SEO. I'd suggest to wrap these elements in a `
` element instead of using different elements as alternatives.
– Tyler2P Aug 29 '22 at 10:03
Thanks for your provided but in my test environment, chrome marked 'flex' behind the '' element – sanjin Sep 05 '22 at 02:45

the same style within the selector loss after vue packing

Packed and viewed in the browser, the flex style that should be on the 'menu__item' is not working, only the 'menu' has!!!

Why is it merged like this .menu, .menu__item and the flex style lost?

1 Answers1

Why is it merged like this `.menu, .menu__item` and the flex style lost?