> For the complete documentation index, see [llms.txt](https://easonwang.gitbook.io/web_basic/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://easonwang.gitbook.io/web_basic/css-advance/flexbox.md). # Flexbox教學 ## Flexbox教學在包裹容器加入 ``` display: flex; ``` ## 包裹容器屬性(Parent) ### flex-direction 1.排列行或列 ``` flex-direction: row | row-reverse | column | column-reverse; ``` ### flex-wrap 2.要不要分行 ``` flex-wrap: nowrap | wrap | wrap-reverse; ``` ### flex-flow shortcut ``` flex-flow: <‘flex-direction’> || <‘flex-wrap’> ``` ### justify-content 3.元素間的排列方式 ``` justify-content: flex-start | flex-end | center | space-between | space-around; ``` ### align-items 4.元素整體排列方式 (元素間為column) ``` align-items: flex-start | flex-end | center | baseline | stretch; ``` ### align-content 5.元素整體排列方式 (元素間為row)\ ``` align-content: flex-start | flex-end | center | space-between | space-around | stretch; ``` ## 容器內元素屬性(Children) ### order 1.排列順序order，數字越小越左邊 ``` order: ; ``` ### flex-grow 2.元素所占空間比例，數字大空間大 ``` flex-grow: ; /* default 0 */ ``` ### flex-shrink 3.元素所占空間比例，數字大空間小 ``` flex-shrink: ; /* default 1 */ ``` ### flex-basis 4.強制讓元素固定大小(會蓋過width) ``` flex-basis: | auto; /* default auto */ ``` ### flex 5.上面三個可縮寫 ``` flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] ``` ``` flex: 1 1 20em (shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 20em) ``` ### align-self 6.元素的位置類似於align-item但為單個元素 ``` align-self: auto | flex-start | flex-end | center | baseline | stretch; ``` ## 相關問題 1.如果在子元件 flex 1 這樣設定沒反應，但設定 width 有反應，則可能是 text overflow，把子組建的 width 移除然後加上 overflow: hidden，然後再設定一次 flex: 1 與另一元件為 flex: 2試試 ## 相關題目：