什么是flex布局
flex布局即為彈性布局，使用display:flex進行布局，此布局使得盒模型布局更易使用，值得注意的是設為flex布局后，子元素的float、clear和vertical-align屬性將失效，
flex的使用
當元素使用flex后，該元素則成為flex容器(container)，其容器屬性有：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content，該容器中的元素則成為flex專案(item)，其專案屬性有：order、flex-grow、flex-shrink、flex-basis、flex、align-self(此6屬性父元素必須為flex容器，否則失效)，下面僅對容器屬性做說明，
flex-direction
共有4個值：row(默認值) | row-reverse | column | column-reverse;
flex-direction：row，從左至右依次排列，
flex-direction：row-reverse，從右到左依次排列，
flex-direction:column;從上到下依次排列，
flex-direction:column-reverse;從下到上依次排列
flex-wrap
共有3個值：nowrap（默認值） | wrap | wrap-reverse;
flex-wrap: nowrap;不換行，
flex-wrap：wrap ；換行，
flex-wrap: wrap-reverse;換行，但第一排在下面，
flex-flow
該屬性是flex-direction與flex-wrap屬性的簡寫，flex-flow有他們所有的值，
justify-content
該屬性有五個值：flex-start(默認值) | flex-end | center | space-between | space-around;
justify-content:flex-start;左對齊
justify-content:flex-end;右對齊，
justify-content:center;居中，
justify-content:space-between;均勻分布，但沒有額外margin，
justify-content:space-around; 均勻分布，有額外margin，
align-items
五個值：flex-start | flex-end | center | baseline | stretch（默認值）;
align-items:flex-start;頂部對齊
align-items:flex-end;底部對齊
align-items:center;垂直居中
align-items:stretch;若子元素未設定高或為auto，將占滿整個容器的高度，
align-items:baseline;子元素第一行文字基線對齊，
align-content
共6個值：flex-start | flex-end | center | space-between | space-around | stretch(默認值);
align-content：flex-start；從頂部對齊，
align-content：flex-end；從底部對齊，
align-content:center;從中部對齊，
align-content:space-between;頂部底部都占用，
align-content:space-around;均勻分布，
align-content:stretch;子元素無高度時自動鋪滿，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/434432.html
標籤：Html/Css
上一篇：突破限制，CSS font-variation 可變字體的魅力
下一篇：關于節流和防抖的封裝