CSS弹性布局

CSS2.1定义了 4 中布局方式

• 块布局:设计初衷是用于布局文档.指设置 display:block
• 内联布局:设置的初衷是布局文本,display:inline
• 表格布局:设置的初衷用于表格格式布局的二维数据
• 定位布局 设计的初衷是精确定位 position;absolute绝对布局

display:flex声明发生了什么

给任意元素设置 display:flex,弹性布局就会被创建,flex 的子项会发生变化.

• flex 子项块状化
  flex的父容器设置的 flex,flex 的子项也会发生相应的变化.inline/inline-block/block会变化成 block
• flex子项浮动失效
  flex 子项的浮动 float:left/float:right都会失效
• flex 子项支持 z-index属性
  即使 flex 子项的 position 属性的计算值是 static,flex 子项也是支持 z-index属性,如果 z-index属性不是 auto,则会创建新的层叠上下文
• flex 子项的 margin 不会合并
  flex 子项的 margin 的值不会合并,这一点和普通块级元素不一样
• flex 子项是格式化的尺寸
  flex 容器是用 margin:auto会对剩余空间智能分配
• flex子项其他变化
  flex 子项如果设置了绝对定位,则会脱离弹性布局.flex子项表现为收缩,如果需要设置建议的尺寸,则可以给 flex 子项使用 flex-basic属性
  flex 子项默认是水平布局,这个特性是有 flex-direction属性决定的,而且就算 flex-子项的宽度超出了 flex 容器,flex 子项也不会换行.换行属性是由 flex-wrap属性决定的

flex-direction属性与整体布局方向

flex-direction属性用来控制 flex 子项的整体布局方向,决定是从左往右排序.flex-dirction属性有以下语法

• row: row 是默认值,表示 flex 子项显示为水平排序.方向为当前文档水平流方向.row 的方向收文档 direction 影响
• row-reverse 表示 flex 子项显示为水平排序.当方向和 row 属性相反
• column 表示 flex 子项显示为垂直排序.默认情况下从上往下进行排序
• column-reverse 表示 flex 子项显示为垂直排序,但是方向和 column 属性相反

flex-wrap属性和整体的换行表现

flex-wrap属性用来控制 flex 子项单行显示还是换行显示,以及在换行显示情况下,没一行内容是否在垂直方向的反向显示.

• nowrap: nowrap 表示 flex子项不换行.如果 flex 子项超出了 flex 容器的宽度总和,那么 flex 子项会发生溢出的现象.如果给每个 flex 子项设置 max-weight的宽度为 100%,那么 flex 的子项会自适应宽度
• wrap:wrap表示当 flex 子项总和宽度大于 flex 容器的时候,flex 子项会进行换行
• wrap-reverse 表示宽度不足的时候,flex 子项会换行,但是与 wrap 的方向相反

flex-flow 属性

flex-flow属性是 flex-dirction属性和 flex-wrap属性的缩写.表示弹性布局的流动性特性

CSS 全新的对齐特性综述

CSS 在 flex 中属性名称基本上是几个固定单词的组合,且这些单词在整个 CSS 世界中是通用的含义

• justify 表示水平方向样式的设置
• align 表示垂直方向的样式设置
• items 表示全体元素的样式设置
• content 表示整体布局样式设置
• self 表示元素自身样式设置,其一定应用到子元素上
  因此,justify-content 表示整体布局中的水平对齐方式,align-content表示整体布局中的垂直布局

justify-content 整体水平对齐

justify-content 属性在弹性布局中常用的语法如下

• normal 值,表示根据环境的不同,可以采取不同的对齐方式
• flex-start 默认对齐方式,它是一个 逻辑 CSS 属性,与文档的方向相关,默认表现是整体布局左对齐
• flex-end 是逻辑 CSS 属性,与文档的流方向相关,默认表现为整体布局中的对右对齐.注意如果 flex 容易设置了 overflow 滚动,同时应用了 justify-content:flex-end,滚动会消失
• center 表现为整体居中对齐,这个属性多用在弹性布局有对行且个数不确定的场景下
• space-between 表示多余的空间间距只在元素中间分配
• space-around 表示每个 flex 子项两边都环绕互不干扰的等宽间距,最终在视觉上表现边缘两侧的空白只有中间空白的一半
• space-eventy 表示每个 flex子项两侧空白间距完全相等

垂直对齐属性 align-items和 align-self

align-item和 align-self属性的一个区别是 align-self属性是设置在具体的某个 flex 子项上,而 flex-items 属性是设置在 flex 容器上,器控制 flex 子项的垂直对齐方式,align-self默认值是 auto,其余的数据值个 align-items 属性值一致.属性如下

• auto 是 align-self 属性的默认方式,表示 flex 子项的垂直对齐方式是由 flex 容器的 align-items决定的
• flex-start 是逻辑 css 属性,与文档流方向相关,默认表现形式为 flex子项顶部对齐
  -flex-end 是逻辑 CSS 属性,与文档流方向相关,默认是 flex 子项底部对齐
• center 表示子项都垂直居中对齐
• baseline 表示 flex 子项参与基线的对齐
  如果 flex-direction是 colum 或者 column-reverse,则 flex 子项的垂直对齐方式不应该使用 align-items 控制,而是应该使用 justify-content属性控制

align-content 属性与整体布局的垂直布局

align-content属性和 align-items属性的区别在于 align-items属性设置的是每一个 flex 子项的垂直对齐方式,而 align-content 属性是将所有作为一个整体进行垂直对齐设置.align-content 属性如下所示

• flex-start 是一个逻辑属性,与文档流方向相关,默认表现为顶部堆砌
• flex-end 是逻辑属性,与文档流方向相关,默认底部堆砌
• center 表现为整体的垂直对齐
• space-between 表现上下两行两端对齐,剩下的每一行元素等分剩余空间
• space-around 表现每一行上下享有独立不重叠的空白空间
• space-evenly 表现每一行上下的空白空间的大小一致

order 属性

我们可以通过 order 属性来改变 flex 子项的顺序位置.order 属性越小优先级别越高

flex 属性

flex 属性是弹性布局的精髓,因此弹性布局就是 flex 属性的作用.flex 属性是 flex-grow flex-shinrk flex-basic这 3 个属性的缩写.我们先了解下flex 常用的几个声明
表示的是什么意思?

• flex:1 等同于 flex:1 1 0%,flex:1 2 等同于flex: 1 2 0%,即 flex-basic使用的不是默认 auto,而是使用的是 0%
• flex:100px 等同于 flex:1 1 100px ,即 flex-grow使用的不是默认的 0,而是使用的 1
• flex:auto 等同于设置 flex:1 1 auto,其作用和他的名称一样,表示自动,即 flex 子项自动填充剩余空间或者自动收缩
• flex:none 等同于 flex:0 0 auto 表示没有,即 flex 子项没有弹性,适用于固定尺寸元素

flex-grow flex-shrink flex-basic属性

flex-basic 属性用来表示基础宽度
flex-grow 属性表示宽度还有剩余的时候
flex-shrink 属性表示宽度不足的时候

flex:0 和 flex:none区别

flex:0等同设置 flex:0 1 0%,flex:none等同设置了 flex:0 0 auto.

• flex:0 元素尺寸不会弹性增大,但是会弹性的收缩,考虑到此时 flex-basic属性是 0%,表示基础尺寸为 0,因此设置 flex:0的元素表现为最小内容宽度
• flex:none 的尺寸同样不会弹性增大,但是也不会收缩,可以理解为元素的尺寸没有弹性变化,考虑到此时的 flex-basic属性是 auto,即基础的尺寸右内容决定,因此 flex:none 的元素最终尺寸通常表现为最大的内容宽度
• flex:auto 等同于设置了 flex:1 1 auto,元素可以弹性增大,也可以弹性的减少,但是 flex:1容器不足时会优先最小内容尺寸,flex:auto在容器不足时会优先最大化内容尺寸.当希望元素充分利用剩余空间,但是元素各自的尺寸又需要按照各自内容进行分配的时候,即适合使用 flex:auto

弹性布局最后一行不对齐的处理

如果每一行个数固定

如果没一行的行数是固定的,则可以使用两种方式实现最后一行对齐

• 模拟 space-between属性和间隙大小,使用 margin 对对吼一行内容出现的间隙进行控制.下面以每一行 4 个为例,最后一行对齐

.list:not(:nth-child(4n)) {
  margin-right:calc(4%/3)
}

要实现最后一行对齐,理论上最好使用 gap 属性设置间隙

• 根据元素的个数最后一个元素设置动态的 margin 值

flex 子项宽度不固定

• 给最后一个元素设置 margin-right:auto
• 使用伪元素在列表的末尾创建一个 flex 子项,并设置 flex:auto或设置 flex:1

如果每一行行数不固定

如果每一行的行数不固定,则上面的方法都失效,需要使用其他的方式实现最最后一行对齐.可以使用空白标签进行填充占位,具体的占位数量由最多列数的个数决定