尝试使用 CSS 和弹性框将段落移动到按钮下的下一行

Question

Im playing around with buttons and css and I'm wondering if there is a way I can get this paragraph that says (Hover Me) to go under the button using flexbox. Sorry if that's a little too vague or I posted the code wrong, this is my first time. Any pointers or tips for the future are appreciated. Thanks.

 /*Makes the background */ #background { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: -1; } /* Makes the background black when the button is hovered */ #button:hover~#background { background-color: black; } /* Centers the button and the paragraph */ section { height: 100vh; display: flex; justify-content: center; align-items: center; } button { display: flex; align-items: center; justify-content: center; height: 80px; width: 40px; border: 1px solid royalblue; background-color: skyblue; transition: 1s; border-radius: 10px; margin-right: 15px; } button:hover { background-color: indigo; color: white; box-shadow: 3px -4px 10px GREY; transform: translateY(0.25em); }

 <section> <button id="button">Lights <br>Off!</br> </button> <p>(Hover Me)</p> <div id="background"></div> </section>

Answer 1

Try to add flex-direction: column; in section

 /*Makes the background */ #background { position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: -1; } /* Makes the background black when the button is hovered */ #button:hover ~ #background { background-color: black; } /* Centers the button and the paragraph */ section { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } button { display: flex; align-items: center; justify-content: center; height:80px; width: 40px; border: 1px solid royalblue; background-color: skyblue; transition: 1s; border-radius: 10px; margin-right: 15px; } button:hover { background-color: indigo; color: white; box-shadow: 3px -4px 10px GREY; transform: translateY(0.25em); }

 <section> <button id="button">Lights <br>Off!</br> </button> <p>(Hover Me)</p> <div id="background"></div> </section>