flex基本術語
display：定義乙個父容器，設定：display：flex | inline-flex；
flex-direction：設定主軸方向（預設橫軸），設定：row | row-reverse | column | column-reverse；
flex-wrap：設定容器子元素是否換行（預設不換行），設定：nowrap | wrap | wrap-reverse；
flex-flow：flex-direction與flex-wrap屬性的簡寫形式，設定： |
justify-content:設定子元素在主軸上的分布形式（預設從開始位置排列）設定：flex-start | flex-end | center | space-between | space-around
align-items：定義子元素在交叉軸上的的排列對齊形式（預設拉伸）設定：flex-start | flex-end | center | baseline（子元素文字的baseline） | stretch(子元素拉伸至父元素大小）
align-content：定義多行子元素在交叉軸上的分布形式（預設從開始位置排列）設定：flex-star | flex-end | center | space-between | space-around | stretch;
**align-self：**改變單個子元素的交叉對齊方式（預設繼承）。設定：atuo | flex-start | flex-end | center | baseline | stretch；
**order：**子元素顯示的排列順序，數值越小，排列越靠前（預設為0）設定：；
flex-grow、flex-shrink 縮放、flex-basis | auto權重大於width、flex
flex布局筆記
父容器配置display flex以後,就有一些flex布局專用的屬性可以設定了主要是以下幾個 1 flex direction 這個屬性決定了父容器中的子元素的排列方向,一共有四個屬性 column 從上到下 row 從左到右 column reverse 從下到上 row reverse 從右到...
Flex布局筆記
採用 flex 布局的元素，稱為 flex 容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex 專案 flex item 簡稱 專案 總結flex布局原理 就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式 flex direction屬性值 屬...
flex 布局筆記
1，今天遇到乙個問題，就是當元素布局設定為了flex後，裡面的內容只有文字，但是對text align 屬性設定無效，仔細想了下，是因為把display 設定為了flex後，flex將裡面的文字也認為是乙個子元素 其實就是子元素。只不過是文字節點而已 子元素布局可以通過align items 設定y...