关于css:Flex布局

7次阅读

共计 1689 个字符，预计需要花费 5 分钟才能阅读完成。

container 款式
items 款式
container 是一个容器，而 items 则是蕴含在容器里的项。

display：flex
将一个元素变成 flex 容器；

1.flex-direction: 扭转 items 的流动方向（主轴）

row 从左到右
column 从上到下
row-reverse 从右到左
column-reverse 从下到上

2.flex-wrap：扭转折行，默认值是 nowrap
备注：当给 container 固定的宽度时，往容器外面增加宽度肯定 items 时，当增加的 items 数量加起来的宽度大于 container 时，往后逐步增加的 items 会因为要使 items 共处一行，而使得本人自身的宽度发生变化。

nowrap
wrap
wrap-reverse

3.jusify-content: 规定主轴对齐形式（默认主轴就是横轴）默认值是 flex-start

flex-start items 往流动的始端顶
flex-end items 往流动的末端顶
center
space-between
space-around 在 container 容器还留有空白空间时，该属性的应用会将空白空间划分为多个局部围绕在各个 items 间接。
space-evenly 各个 items 旁的空白空间宽度是一样的

4.align-items: 规定次轴对齐形式（默认次轴就是纵轴）默认值是 stretch

flex-start
flex-end
center
stretch 当各个 items 外面的内容大小不一样，从而导致各个 items 的高度不统一时，应用该属性会让其余 items 的高度与容器外面高度最高的 items 项保持一致。
baseline

5.align-content: 当有多行内容时

flex-start 当容器的高度大于总 items 的高度时，会使得 items 之间留有空白空间，应用该属性会使得所有 items 项个体往上聚拢。将空白空间都留在下方
flex-end 当容器的高度大于总 items 的高度时，会使得 items 之间留有空白空间，应用该属性会使得所有 items 项个体往下聚拢。将空白空间都留在上方
center 当容器的高度大于总 items 的高度时，会使得 items 之间留有空白空间，应用该属性会使得所有 items 项个体往中聚拢。将空白空间均匀散布在高低两边
stretch 让空白空间在各个 items 之间均匀散布
space-between
space-around

1.order：默认值是 0
规定 container 外面 items 的排列程序，order 由小到大排列

2.flex-grow 默认值是 0
能够通过该属性扩充 items 的宽度

.item:first-child{flex-glow:1;}
.item:nth-child{flex-glow:2;}
.item:last-child{flex-glow:1;}

备注：相当于将 container 容器的宽度平均分，第一个和最初一个取得一份宽度，两头那份取得两份的宽度。

3.flex-shrink 默认值是 1
能够通过该属性将 items 的宽度进行缩放
属性值为 0 代表避免 items 被进行缩放

4.flex-basis
能够通过该属性管制基准宽度
默认值是 auto

总体缩写：
flex:flex-grow flex-shrink flex-basis

5.align-self
能够通过该属性定制 align-items
备注：align-items 是用来规定纵轴对齐形式的，比方你规定 align-items 的值是 flex-start，那么容器里的所有 items 都会往上顶，退出你想独自管制某一项的对齐形式，能够通过 align-self 属性来扭转。只须要在某个 items 项的选择器中退出该属性就行了，比方 align-self:flex-end.

须要留神的几个款式及属性