I ran into this problem today while writing a style in my project. The problem is described as follows:
Turn on the Switch button to display the following options, or turn it off. Very simple requirement, during implementation, I gave the following item style, using Flex layout, because I wanted it to be centered horizontally and vertically.
In the beginning, I wrote: Instead of hiding the item directly because it shares a style with the item above, I chose to add a hide style to the Wrapper whenever the switch button state changes, i.e. Display: None; At this time, the problem appeared. The page did not display as I expected, and the button could not control the reality and hiding of the following item. That is, display: None is invalid. The reason, it turns out, is that I set display: flex to the hidden item, because display: flex means display: block, which is the default element of the Flex layout. It's good to know why. First remove the display flex setting for this item and separate it into a separate class. Then add this class to the item when the button status on the page is selectedCopy the code