Flex容器属性共6个属性
flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content
flex-direction
flex-direction
属性有四个属性值,控制Flex项目沿着主轴的排列方向。
row (水平排列)
column(垂直排列)
row-reverse(水平反向)
column-reverse(垂直反向)
flex-wrap
flex-wrap
属性有三个属性值:wrap || nowrap || wrap-reverse;
wrap(会换行排列)
nowrap(不会换行排列)
wrap-reverse(会换行排列,但反向)
flex-flow
flex-flow
是flex-direction
和flex-wrap
两个属性的速记属性。
flex{
flex-flow: row wrap;
}
flex{
flex-direction: row;
flex-wrap: wrap;
}
这两个flex样式的效果是相同的。都是水平排列+换行。
flex-flow:column wrap 为垂直排列+换行。
justify-content
justify-content
属性可以接受下面五个值之一:flex-start || flex-end || center || space-between || space-around
flex-start(左对齐)
flex-end(右对齐)
center(居中对齐)
space-between(两端对齐(除第一个和最后一个间距相同))
space-around(间距都相同(但第一个的开始和最后一个结束是其它间距的一半))
align-items
align-items
属性可以接受这些属性值:flex-start || flex-end || center || stretch || baseline
flex-start(顶部对齐)
flex-end(底部对齐)
center(居中对齐)
stretch(高度会和容器高度一样)
baseline(沿自己的基线对齐(主要用于容器高度不一样时,让文字基线对齐))
align-content
align-content
属性用于多行的Flex容器(即wrap属性)。它也是用来控制Flex项目在Flex容器里的排列方式
stretch(填满容器,里面的间距是flex项目自身设置的margin值)
flex-start(顶部对齐)
flex-end(底部对齐)
center(居中对齐)
Flex项目属性
order || flex-grow || flex-shrink || flex-basis
order(排序,从底到高,默认0,可接受正值或负值)
flex-grow和flex-shrink(可接受0或大于0的正数,属性控制Flex项目在容器有多余的空间如何放大(扩展),在没有额外空间又如何缩小。)
flex-basis(默认为auto,宽度会自动调整根据flex项目中的内容)当给了宽度 (可以取任何用于width
属性的任何值。比如 % || em || rem || px
等)
flex速记
flex
是flex-grow
、flex-shrink
和flex-basis
三个属性的速记(简写)
li {
flex: 0 1 auto;
}
li {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
这两段相等。
注意它们之间的顺序。flex-grow
第一,然后是flex-shrink
,最后是flex-basis
。缩写成GSB,可以帮助你更好的记忆。
align-self(改变一个弹性项目沿着侧轴的位置,而不影响相邻的弹性项目)
align-self: auto || flex-start || flex-end || center || baseline || stretch