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