flexbox

justify-content: flex-start | flex-end | center | space-between | space-around
Applies to: flex containers; Initial: flex-start
flex项目在主轴上的对齐方式

align-items: flex-start | flex-end | center | baseline | stretch
Applies to: flex containers; Initial: stretch
flex项目在与主轴垂直方向的轴上的对齐方式

align-content: flex-start | flex-end | center | space-around | space-between | stretch
Applies to: multi-line flex containers; Initial: stretch
有多行的flex项目的对齐方式

align-self: flex-start | flex-end | center | baseline | stretch
Applies to: flex items; Initial: auto
单个flex项目的对齐方式

(flex-start)
(flex-end)
(center)

flex-grow
flex项目的放大比例,默认0,即使有剩余空间也不放大

(flex-grow: 1)
(flex-grow: 1)
(flex-grow: 2)

flex-shrink
flex项目的缩小比例,默认1,空间不足项目会缩小,设置0则不缩小

(flex-shrink: 0)
(flex-shrink: 0)
(flex-shrink: 0)
(flex-shrink: 0)
(flex-shrink: 0)
(flex-shrink: 0)

flex-basis
分配多余空间之前flex项目占用的空间(主轴方向),默认auto

(flex-basis: 200px)
(flex-basis: 200px)
(flex-basis: 200px)

flex: flex-grow flex-shrink flex-basis
flex值为单值,如果是无单位数,作为flex-grow,宽度值,作为flex-basis,或者none(0 0 auto)|auto(1 1 auto)|initial(0 1 auto)
flex值为双值,第一个是flex-grow,第二个为flex-shrink(无单位数)或者flex-basis(宽度)
flex-grow未设置则值是1,flex-shrink未设置则值是1

(flex: 200px; = flex: 1 1 200px)
(flex: 1; = flex: 1 1 0%)
Comments
Write a Comment