在 html 下 scroll-behavior: smooth 的好處如同它的語意，若使用者點擊頁面的描點超連結時，不會讓使用者「瞬移」，而是會產生如同在 JavaScript 寫 scroll animation 一樣的體驗，對使用者的操作相對友善。但當使用者在進入頁面時，網址就帶有描點(#)，可能會事得其反，破壞使用者體驗。 CSS 的載入方式 如果是傳統的直接載入或內嵌方法就可以跳出不用看了，但若是在 load 之後才用 JavaScript 載入，就有可能造成初始畫面位置並非描點的位置。比如出現下列這種情況： <link rel="preload" href="style.css" as="style"> <script> window.addEventListener("load", function() { var prload_css = document.querySelectorAll('link[as="style"]'); var i = 0; for (i; i < prload_css.length; ++i) { prload_css[i].rel='stylesheet'; } }); </script> 網址可能帶有 #title，預期讓使用者一開始看到 #title 元素在畫面之中，但 load 前後 #title 的位置不一樣，產生進入頁面且載入後，畫面往下滑動到比預期更下面的地方，讓 scroll-behavior: smooth 變成使用者體驗的殺手。 accesskey 操作 這個影響不大，只是當使用者鍵盤操作的時候，畫面會有一瞬間滑向該連結的效果出現。

justify-content flex-start center flex-end stretch space-around space-between space-evenly align-items (use align-self when one item) flex-start center flex-end stretch baseline align-content (容器需要給高度才有作用) height: auto height: 26rem flex-start center flex-end stretch space-around space-between space-evenly 1 height:7.5 2 height:10 3 height:auto 4 height:auto 5 height:auto 並沒有用到 flex-direction 和 order 等等的屬性，所以沒有寫在裡面。 又或者，你可以在 codepen 操作： See the Pen CSS flex by cj ( @cjzopen ) on CodePen . 希望這些簡易的按鈕能對你有幫助。