父容器配置display:flex以後,就有一些flex布局專用的屬性可以設定了主要是以下幾個:
1)flex-direction
這個屬性決定了父容器中的子元素的排列方向,一共有四個屬性:
column 從上到下
row 從左到右
column-reverse 從下到上
row-reverse 從右到左
2)flex-wrap
這個屬性是設定當flex-direction為row或者是row-reverse時,是否自動換行的問題.這個屬性目前在我的開發中用的會比較多,一共有三個屬性:
nowrap 不換行
wrap 換行,但是第一行在上面,向下擠
warp-reverse 換行,但是第一行以下面,向上擠
3)flex-flow
這個我基本不用,因為他是flex-direction與flex-wrap的簡寫形式,我一般不寫這種合在一起的,不過用法如下:
flex-flow:row nowrap
上面的**,也是這個屬性的預設值.
4)justify-content
水平對齊方式,主要有五個屬性:
flex-start 左對齊
flex-end 右對齊
center 居中
space-between 兩端對齊,這種情況下,各元素之間的間隔會是一樣的
space-around 子元素兩側自帶乙個相等的間距,這裡要具體說明一下,如果子元素兩側自帶的間距是1,那麼子元素與子元素間的間距就是2,但最邊上兩個子元素與父元素的間距則只有1,就像是給子元素加了乙個左右margin為1一樣.但是這個1,是平均出來的.這個排版布局,估計我是很少用到了.理解起來容易, 解釋起來吃力…
5)align-items
豎直方向上的對齊方式,主要有五個屬性,其實和上面的justify-content很類似:
flex-start 頂部對齊
flex-end 底部對齊
center 垂直居中對齊
baseline 第一行文字底部對齊(完全沒想到過這個屬性會在什麼時候用出來…)
stretch 高度百分百,鋪滿,對齊,子元素只要沒設定高度,都會是百分百的高度.
6)align-content
多行對齊設定,這個功能我暫時還沒用到,也實在是有點記不住功能,直接從網上先把屬性扒下來吧…一共有六個屬性:
flex-start 頂部對齊
flex-end 底部對齊
center 多行垂直居中,第一行與最後一行離上下邊框的距離相等
space-between 第一行最後一行居頂居底,中間的行間距相等
space-around 每一行上下間距相等,如果每一行上下自帶的間距是1,那麼行與行間的間距就是2,但頂部與底部兩行與父元素的上下間距則只有1,就像是給子元素加了乙個上下margin為1一樣,與justify-content的這個屬性很類似,只不過乙個是左右間距,乙個是上下間距
strech 行與間之間沒有間距,直接鋪滿父元素的高度
有些排版只設定父元素可能不能滿足,所以還需要給子元素設定一些flex相關的屬性以達到排版的目的,主要有以下幾個屬性:
1)order
這個屬性很神奇,可以直接打亂子元素的順序,也就是說order設定後,子元素並不需要按html中所排列的正序或者反序排列,可以是亂序,這個屬性我覺得很強大,雖然暫時還沒用上,但是他的作用不可替代,如果是老式的布局,在不改變html排列結構的前提下,除了用position做複雜的設定以外,我完全想不到更簡單的辦法…
order的屬性就是直接寫數字,只支援整數,預設值為0.
2)flex-grow
這個屬性基本上可以在一定程度上替代百分比,而且支援動態,多屏,響應式的適配,如果父元素很寬,子元素加起來還沒有父元素寬,這個放大比例就會決定子元素的寬度,比如乙個父元素的寬度為4.子元素排列並沒有撐滿父元素.給子元素都加上flex-grow:1的屬性,那麼子元素的寬度將平分這個父元素的寬度,這個1就是佔的比例,這個屬性有個預設值,是0,也就是說不管父元素多寬,子元素是不縮放的,這樣的話,可以完成很多響應式的設計,在父元素變化的時候,子元素有的寬度不變,有的按比例放大.屬性必須是大於等於0的整數.
3)flex-shrink
屬性和上面的很類似, 只不過設定的是縮小比例,不過預設值,是1,表示空間不足時預設是所有子元素都將等比縮小的,如果這裡有想某乙個元素不縮小時,一定要設定這個屬性為0.屬性必須是大於等於0的整數.
4)flex-basis
這個屬性是為了上面的兩個屬性的子元素無法滿足的情況,比如想固定寬度,這個寬度,預設為子元素的寬度,但是也可以設定成其它的值
5)flex
flex屬性是flex-grow, flex-shrink和flex-basis的簡寫，預設值為0 1 auto,我一般用來做某元素定長,某元素佔據剩餘長度的功能.但是到了現在才發現,其實我寫flex:1的意思,其實就只是flex-grow:1的意思.
6)align-self
flex布局筆記
flex基本術語 display 定義乙個父容器，設定 display flex inline flex flex direction 設定主軸方向 預設橫軸 設定 row row reverse column column reverse flex wrap 設定容器子元素是否換行 預設不換行 設...
Flex布局筆記
採用 flex 布局的元素，稱為 flex 容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex 專案 flex item 簡稱 專案 總結flex布局原理 就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式 flex direction屬性值 屬...
flex 布局筆記
1，今天遇到乙個問題，就是當元素布局設定為了flex後，裡面的內容只有文字，但是對text align 屬性設定無效，仔細想了下，是因為把display 設定為了flex後，flex將裡面的文字也認為是乙個子元素 其實就是子元素。只不過是文字節點而已 子元素布局可以通過align items 設定y...