要使用 flexbox 布局，只需在父 HTML 元素上設置 display 屬性
display: flex;
或者你可以以內聯樣式的顯示
display: inline-flex;
當在父容器上設置了display: flex;或者display: inline-flex;后，它的子元素都自動變成flex項
采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。
針對flex容器可以設置
針對flex項目
flex-basis
flex-basis: number|auto|initial|inherit;
number: 一個長度單位或者一個百分比，規定靈活項目的初始長度。
auto: 默認值。長度等於靈活項目的長度。如果該項目未指定長度，則長度將根據內容決定。
小技巧
- 在flex布局中，
margin: auto會吃掉每個方向上的剩余的空間，所以設置合適的margin可以達到一些特殊的效果，比如，給最后一個flex item設置flex-grow: 1會讓它占用主軸上剩余的空間，配合text-align: right可以實現文字靠在最右側的效果，但是使用margin-left: auto能更簡單地實現上述效果。 