flex是 flexible box的縮寫,意為彈性布局,用來為盒狀模型提供最大的靈活性,任何乙個容器都可以指定為flex布局
當我們為父盒子設為flex布局以後,子元素的loat、 clear和 vertical-align-屬性將失效.
伸縮布局=彈性布局=伸縮盒布局=彈性盒布局=flex布局
採用flex布局的元素,稱為lex容器( flex container),簡稱容器」。它的所有子元素自動成為容器成員,稱為flex專案( flex item)
總結fex布局原理:
就是通過給父盒子新增fex屬性,來控制子盒子的位置和排列方式
常見父項屬性
介紹flex–direction
設定主軸的方向
justify-content
設定主軸上的子元素排列方式
flex-wrap
設定子元素是否換行
align-content
設定側軸上的子元素的排列方式(多行)
align-items
設定側軸上的子元素排列方式(單行)
flex-flow
復合屬性,相當於同時設定了flex- -direction和flex-wrap
在flex布局中,是分為主軸和側軸兩個方向,同樣的叫法有:行和列、x軸和y軸.
預設主軸方向就是x軸方向,水平向右
預設側軸方向就是y軸方向,水平向下
flex- -direction屬性決定主軸的方向(即專案的排列方向). 注意:主軸和側軸是會變化的,就看flex- -direction設定誰為主軸,剩下的就是側軸。而我們的子元素是跟著主軸來排列的屬性值
屬性值解釋
row預設值從左到右
row-reverse
從右到左
column
從上到下
column-reverse
從下到上
案例:
lang
="en"
>
>
charset
="utf-8"
>
>
titletitle
>
>
divdiv span
style
>
head
>
>
>
>
1span
>
>
2span
>
>
3span
>
div>
body
>
html
>
justify-content 屬性定義了專案在主軸上的對齊方式
注意：使用這個屬性之前一定要確定好主軸是哪個
屬性值說明flex-start
預設值從頭部開始 如果主軸是x軸，則從左到右
flex-end
從尾部開始排列
center
在主軸居中對齊（如果主軸是x軸則水平居中）
space-around
平分剩餘空間
space-between
先兩邊貼邊再平分剩餘空間（重要）
★該屬性是控制子項在側軸(預設是y軸)上的排列方式. 在子項為單項的時候使用.
屬性值說明
flex-start
從上到下
flex-end
從下到上
center
擠在一起居中(垂直居中)
stretch
拉伸(預設值
★預設情況下,專案都排在一條線(又稱」軸線」)上。fex-wrap屬性定義,flex布局中預設是不換行的.
如果超過一行,那麼會縮小子元素的寬度,從而強制顯示一行
屬性值說明
nowrap
預設值,不換行
wrap
換行設定子項在側軸上的排列方式並且只能用於子項出現換行的情況(多行),在單行下是沒有效果的.
屬性值說明
flex-start
預設值在側軸的頭開始排列
flex-end
在側軸的尾部開始排列
center
在側軸中間顯示
space-around
子項在側軸平分剩餘空間
space-between
子項在側軸先分布在兩頭,再平分剩餘空間
stretch
設定子項元素高度平分父元素高度
align-items-適用於單**況下,只有上對齊、下對齊、居中和拉伸
align-content-適應於換行(多行)的情況下(單行況下無效),可以設定上對齊、下對齊、居中、拉伸以及平均分配剩餘空間等屬性值。
總結就是單行找 align-items, 多行找 align-content-
flex屬性定義子專案佔剩餘空間的份數, 1就是佔1份,2相對於佔乙份的盒子就會使1份盒子的兩倍.
.item
lang
="en"
>
>
charset
="utf-8"
>
>
titletitle
>
>
section
section div:nth-child(1)
section div:nth-child(2)
section div:nth-child(3)
section div:nth-child(4)
style
>
head
>
>
>
>
div>
>
div>
>
div>
>
div>
section
>
body
>
html
>
控制子項自己在側軸上的對齊方式, 允許單個專案有與其他專案不一樣的對齊方式, 可覆蓋align-items屬性.
預設值auto, 表示繼承父元素的align-items屬性,如果沒有,則等同於stretch.
案例:
lang
="en"
>
>
charset
="utf-8"
>
>
titletitle
>
>
section
section div
section div:nth-child(3)
style
>
head
>
>
12 >
>
1div
>
>
2div
>
>
3div
>
section
>
body
>
html
>
預設為0,從小到大排列,即如果元素設定為-1,因為-1小於零,所以會出現到最前面
案例
section div:nth-child(3)
flex 布局以及樣式
1.flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性 2.任何乙個容器都可以用flex布局 注意，設為flex布局以後，子元素的float clear和vertical align屬性將失效 採用flex布局的元素，稱為flex容器 flex containe...
flex布局以及相關屬性
容器的屬性 父元素設定display flex 子元素即可使用flex布局。flex direction 決定專案排列方向 flex wrap 一條軸線排不下，如何換行 boxjustify content 專案在主軸上的對齊方式 水平居中時，可以使用這個屬性實現。垂直居中可以用這個屬性實現。ali...
flex布局 Flex布局
摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫，意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...