Flex弹性布局详解VIP专享

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 属性值就指定了，...