Flex布局整理

Flex布局整理

含义

Flex布局的目标是提供一种更有效的布局方式，来对齐和分配容器中的各个item的空间，即使它们的大小是未知的和/或动态的。
Flex布局的主要思想是使容器能够更改其项目的宽度/高度（和顺序），以最好地填充可用空间。Flex容器会扩展项目以填充可用空间，或收缩它们以防止溢出。

Flex布局的属性分类

父级属性(Flex Container)	子级属性(Flex Item)
display(根据属性值设置布局为块级/内联/弹性)	order(在flex容器中的出现顺序,order值越小排序越靠前，默认为0)
flex-direction(确定主轴，确定item在container中的方向)	flex-grow(决定item在container中占用多少可用空间)
flex-wrap(所有的item是多行布局还是单行)	flex-shrink(定义item收缩的能力，负数无效)
flex-flow(flex-direction和flex-wrap的合并)	flex-basis(分配剩余空间之前，设置item的默认大小)
justify-content(确定沿主轴方向的对齐方式)	flex(flex-grow/flex-shrink/flex-basis三个属性的组合)
align-items(定义item在横轴上的布局方式)	align-self(在align-items设置对齐方式的情况下，设置单个item的对齐方式)
align-content(item在横轴上的对齐方式)

PS：float、clear和vertical-align对Flex Layout没有影响。

容器属性介绍

flex-direction

设置主轴，确定flex-item在容器中的排列方向，属性值包含：row | row-reverse | column | column-reverse
各属性布局如图所示

flex-wrap

设置flex-items布局时单行还是多行，属性值包含：nowrap | wrap | wrap-reverse。如图所示：

flex-flow

flex-flow属性时flex-direction和flex-wrap属性的组合，格式如下:

.container {
  flex-flow: column wrap;
}

justify-content

justify-content确定沿主轴方向的对齐方式，属性值：flex-start | flex-end | center | space-between | space-around | space-evenly
start | end | left | right （部分浏览器不支持）

flex-start

flex-end

center

space-between：item均匀分布，first item在开始的位置，last-item在end上

space-around：item均匀分布，并且周围空间相等

space-evenly：任意两个item之间的间隔相等

align-items

align-items定义item在横轴上的布局方式，其属性值包含：stretch | flex-start | flex-end | center | baseline
不常用属性值：first baseline | last baseline | start | end | self-start | self-end

align-content

align-content定义item在横轴上的布局方式。属性值包含；flex-start|flex-end|center|space-between|space-around|space-evenly|stretch，其属性值含义同上。
只有一行时，设置该属性无效

order

order属性指定flex item的排序，默认值为0，数值越大排序越靠后。如图所示：flex item 1的order设置为2，flex item 2 order值设置为1。

flex-grow

flex-grow属性决定item在container剩余空间中占用多少可用空间，如图设置flex item 1的flex-grow: 5

flex-shrink

flex-shrink控制flex container空间不足以包含flex items时，flex items怎样缩小所占空间，来防止溢出container。其默认值为1，flex items根据自身的flex-basis值做相应调整。负数无效。如图所示flex item 1设置如下：

.flex-item1{
	flex-shrink: 2;
    flex-basis: 250px;
}

flex item 2 和 3设置如下：

.flex-item1{
	flex-shrink: 1;
    flex-basis: 250px;
}

flex-basis

flex-basis 定义了分配剩余空间之前，item的默认大小。在flex-shrink上已经使用了

flex

flex属性是flex-grow、flex-shrink和flex-basis三种属性的集合。对flex设置如下:

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

flex 默认为 0 1 auto

align-self

在align-items设置对齐方式的情况下，设置自身的对齐方式。其属性值包含：auto | flex-start | flex-end | center | baseline | stretch
如图：

Flex布局的各项属性就介绍完毕了。主要参考了Guide to Flexbox