- 彈性容器通過(guò)設(shè)置 display 屬性的值為
flex或inline-flex將其定義為彈性容器驯遇。 - 彈性容器內(nèi)包含了一個(gè)或多個(gè)彈性子元素领舰。
父容器的常用屬性
- 指定彈性容器中子元素排列方式:
flex-direction: row | row-reverse | column | column-reverse
- 設(shè)置彈性盒子的子元素超出父容器時(shí)是否換行
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
- 設(shè)置彈性盒子元素在側(cè)軸（縱軸）方向上的對(duì)齊方式
align-items: flex-start | flex-end | center | baseline | stretch
- 設(shè)置彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式
justify-content: flex-start | flex-end | center | space-between | space-around
- 修改 flex-wrap 屬性的行為，類似 align-items, 但不是設(shè)置子元素對(duì)齊康铭，而是設(shè)置行對(duì)齊
align-content: flex-start | flex-end | center | space-between | space-around | stretch
彈性子元素屬性
- order: 設(shè)置彈性盒子的子元素排列順序
- flex-grow: 設(shè)置或檢索彈性盒子元素的擴(kuò)展比率
- flex-shrink: 指定了 flex 元素的收縮規(guī)則棒卷。flex 元素僅在默認(rèn)寬度之和大于容器的時(shí)候才會(huì)發(fā)生收縮修档，其收縮的大小是依據(jù) flex-shrink 的值碧绞。
- flex-basis: 用于設(shè)置或檢索彈性盒伸縮基準(zhǔn)值。
- flex: 設(shè)置彈性盒子的子元素如何分配空間吱窝。
- align-self: 在彈性子元素上使用讥邻。覆蓋容器的 align-items 屬性。
