1.Flex容器属性:
flex-direction(方向)
可以决定Flex容器中主轴和纵轴的方向。当flex-direction的值为column时,垂直方向的轴就编程主轴,与其垂直的就是纵轴(水平方向的轴)。
flex-wrap(包裹)
用来决定Flex项目的宽度和超过Flex容器的宽度时,Flex项目换不换行排列。默认值:nowrap(不换行)。
justify-content(横向对齐方式)
控制主轴方向内容的宽度和Flex项目之间的间隙。
值:flex-start<default>,flex-end,center,space-between,space-around,stretch,space-evenly
align-item(纵向对齐方式)
控制纵轴方向的行为。
值:lex-start<default>,flex-end,center,stretch,baseline
flex-flow(流)
flex-direction<value> flex-wrap<value>。
Flex容器有n个Flex项目时,默认情况下,这些Flex项目从左向右排列,而且时一行排列,哪怕是超出了Flex容器的宽度。就是因为flex-direction和flex-wrap的默认值分别是row和nowrap。
css中direction的值也可以设置排版方向。
左向右排列:direction:ltr;或flex-direction:row;
右向左排列:direction:rtl或flex-direction:row-reverse。
display可以取值为flex和inline-flex。
2.Flex项目属性:
flex-basis
类似于min-width。它将根据内部内容扩展Flex项目的大小。
flex-grow
应用到一个Flex项目时,它将相对于同一行上所有其他Flex项目的大小的总和进行缩放。该值将根据指定的值自动调整。
flex-shrink
和flex-grow刚好相反
flex
是flex-grow、flex-shrink、和flex-basis的简写。
order
可以用来改变Flex项目的排列顺序。是一个『相对值』,order越大,排名越靠后。
justify-items
用于Flex项目上(TODO)。
3.什么情况下不建议使用flexbox布局?
*整体页面布局
*完全支持旧浏览器的网站
网友评论