flexbox布局

flexbox是2009年W3C提出的一种全新的可伸缩的CSS布局方式。依赖flexbox,我们可以更简单、高效的完成可伸缩式页面的布局.flexbox一共经历了三个版本,分别为老,tweener,新的,这三种版本下的显示属性值不一样,分别为“显示:盒”,“显示:flexbox”,“显示:flex .flexbox中有两个非常重要的概念:flex容器(flex容器)和flex项目(flex项目),当我们给一个元素添加一个“显示:flex”属性后,这个元素就会变成一个flex容器,它的直接子元素就会变成flex项目成为一个flex容器成员。特别是当我们给一个元素设置成flex容器时,会在文档中生成一个伸缩容器,伸缩容器会为子元素内容生成一个伸缩容器上下文(FFC)。伸缩容器不是块容器,所以flex项目不能使用那些用来控制块元素布局的属性,例如,清晰,浮动,vertical-align属性。


flexbox容器的属性:

justify-content

对齐项目

flex-direction

flex-wrap

flex-flow

align-content

flexbox项目的属性:


flex-grow

flex-shrink

flex-basis

flex

align-self

 

 

 

 

 

 

 

 

 

 

11、flex属性是flex-grow, flex-shrink和flex-basis属性的简写形式,默认值为0 1汽车

 

12日align-self属性用于设置单个项目与其他的项目不一样的对齐方式,可覆盖容器的对齐项目属性

 




flexbox布局