1.聲明Flex容器
父容器display:flex; 此時(shí)子容器的塊狀元素消失變成inline-block ,成為flex項(xiàng)目
flex-container ?和flex-items
2.Flex容器的屬性
flex-direction :row ? || row-reverse ||center ||column ||column-reverse
讓你決定Flex項(xiàng)目如何排列疚沐。它可以是行(水平)灭红、列(垂直)或者行和列的反向(使項(xiàng)目整體排列)
flex-direction: row-reverse;
flex-direction:?row;
flex-direction:?column;?/*豎直排列*/
flex-direction:?column-reverse;/*反向豎直排列*/
flex-wrap 當(dāng)項(xiàng)目充滿(mǎn)容器是否換行
wrap 換行(默認(rèn))
nowrap 不換行
flex-flow:flex-direction flex-wrap的簡(jiǎn)寫(xiě)
justify-content :flex-start||flex-end||center||space-between||space-around
每個(gè)項(xiàng)目水平排列的樣式
justify-content: flex-end; /*右邊對(duì)齊*/
justify-content:?flex-start;?/*左邊對(duì)齊*/
justify-content:?center;?/*居中對(duì)齊*/
justify-content:?space-between;?/*兩端對(duì)齊?讓除了第一個(gè)和最一個(gè)Flex項(xiàng)目的兩者間間距相同(兩端對(duì)齊)*/
justify-content:?space-around;?/*讓每個(gè)Flex項(xiàng)目具有相同的空間朝卒。*/
align-items:flex-start||flex-end||center||stretch||baseline
每個(gè)項(xiàng)目豎直排列的樣式
align-items: flex-end; /*底部*/
align-items: flex-start; /*頂部*/
align-items: center; /*中間*/
align-items: baseline;
height: 500px; /*使用align-items時(shí)注意給容器加上高度*/
align-content:和align-items相似
3.flex項(xiàng)目的屬性
order || flex-grow || flex-shrink ||flex-basis ||align-self
order:顯示的順序數(shù)值越大越往后面顯示
li:first-child{
order: 1;
}
li:nth-child(2){
order: 2;
}
flex-grow 控制有多余空間變大
0 代表關(guān) ??
? 1 ? 開(kāi)
flex-shrink 控制沒(méi)有多余空間縮小
0 代表關(guān)
1 ? 開(kāi)
有兩個(gè)彈性項(xiàng)目。一個(gè)的 flex-grow 屬性值是 1义桂,另一個(gè)是 2,那么會(huì)出現(xiàn)啥情況呢蹈垢?
兩個(gè)項(xiàng)目上的伸展開(kāi)關(guān)都打開(kāi)了慷吊。不過(guò),伸展度是不同的曹抬,1?和?2溉瓶。
二者都會(huì)填滿(mǎn)可用空間,不過(guò)是按比例的沐祷。
它是這樣工作的:前一個(gè)占?1/3?的可用空間嚷闭,后一個(gè)占?2/3?的可用空間。
flex: 1 1 auto; /*能伸能縮*/
flex:?1?0?auto;?/*能伸不能縮*/
flex:?0?0?auto;?/*不能伸不能縮??固定寬度*/
flex:?0?1?auto;?/*不能伸能縮*/
flex: 1 1 auto 根據(jù)內(nèi)容決定大小
flex: 1 1 0? 相同寬度
當(dāng)在Flex項(xiàng)目上使用 margin: auto 時(shí)赖临,值為 auto 的方向(左胞锰、右或者二者都是)會(huì)占據(jù)所有剩余空間