Flex 弹性布局详解2009 年,W3C 提出了一种新的方案—-Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。1.基本概念采用 Flex 布局的元素,称为 Flex 容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称”项目”。2.容器的属性** 1):flex-direction **规定盒子容器主轴方向,可以是水平方向和垂直方向,另外侧轴一定是垂直于主轴方向的。** 2):flex-wrap **规定 flex 容器主轴上放不下项目的时候,要不要进行换行,以及怎么换行。**3):flex-flow **前面两个属性的集合,可以一并设置主轴和换行的属性。**4):align-items **控制了项目在 flex 容器侧轴方向上的对齐方式。**5):justify-content **控制了项目在 flex 容器主轴方向上的对齐方式。**6):align-content **本属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。3.属性理解flex-direction 排布方向属性理解:> flex-direction:rowflex Itemflex ItemFlex 容器你左手拿着肉串,将它横着摆放在自己的眼前,你发现:咦,这不就是 flex 容器的主轴为 row的方向吗? 没错了 这个样子就是我们日常书写方式下的主轴默认值:水平从左往右。> flex-direction:row-reverse肉串太大了,你左手保持这个姿势有点累,你换成了右手,你发现:咦,这不就是 flex 容器方向的水平从右往左吗?没错了,row-reverse 就是和平时的书写方式反向的呈现。> flex-direction:column-reverse诶,右手又累了,换到左手吧,这个时候发现肉油要滴下来了,你赶忙把羊肉串竖立了起来,你发现:咦,这不就是 flex 容器主轴为 column 垂直从下到上的方向吗?没错了,主轴的方向这个时候就是从下往上,侧轴变成了水平垂直方向从左往右。 > flex-direction: column好吧,我实在想象不出来有谁会把羊肉串从上到下这么拿着,姑且你就是这么拿着的吧。这个时候,你发现,咦?这个不就是 flex 主轴从上到下的方向吗?没错了,这个时候主轴方向还是垂直方向,只是变成了从上到下。侧轴没有变化依然是水平方向从左往右。flex-wrap 项目换行属性理解:> flex-wrap:wrap运气不好,竹签断了一节,羊肉粒排不下了,没办法只能假装吃两根羊肉串了,这时候,你发现,这不就是换行吗?项目在 flex 一行中排列不下了,那么 wrap 属性值就指定了,...