display: flex
首頁
前端網頁設計開發實驗
css Labs
<ol> <li>
ol { display: flex; }
ol { display: flex; justify-content: center; }
ol { display: flex; justify-content: flex-end; }
ol { display: flex; justify-content: space-between; }
ol { display: flex; direction: rtl; }
ol { display: flex; } ol > *:nth-child(2) { order: 2; }
ol { display: flex; justify-content: space-around; align-items: center; }
ol { display: flex; min-height: 24em; justify-content: space-around; align-items: flex-end; } ol > *:nth-child(3) { align-self: stretch; }
ol { min-height: 56em; flex-direction: column; justify-content: center; align-items: center; }
ol { display: flex; min-height: 180vh; flex-wrap: wrap; justify-content: space-around; align-items: center; }
ol { display: flex; min-height: 180vh; flex-wrap: wrap; justify-content: space-around; align-items: self-end; align-content: space-between; }
ol { display: flex; min-height: 200vh; min-width: 40em; flex-wrap: wrap; justify-content: space-between; align-items: center; writing-mode: vertical-rl; }
ol { display: flex; flex-wrap: wrap-reverse; justify-content: space-between; align-items: self-start; }