阅读 736

CSS Flexbox弹性盒子模型总结

1. 背景

弹性盒子布局指在提供一个为容器内的items进行更有效率的排列,分配空间以及布局的方式,弹性的意思是即便items的尺寸是未知或者动态的也可以使用!

这种布局的理念主要是给容器一种能力可以调节修改items的宽度高度和顺序来充分利用容器内可用的空间---甚至可以适应几乎所有的设备和屏幕尺寸。

更重要的是,弹性盒子布局的方向是不可知的,这个与常规的布局相反(块布局是垂直方向的而行内则是水平基准的),虽然方向这个概念对于pages来说很好,但是它缺乏灵活性来支持一些更大的更复杂的应用(尤其是当方向改变,尺寸变化,拉伸缩小时)

注意:弹性盒子模型更适用于组件化的应用以及小规模布局,大规模布局可以用Grid布局

2. 基础和术语

这部分介绍弹性盒子模型中容器和其中Item的属性

2.1 容器属性

image

display

我们需要通过display属性来定义一个容器为Flexbox

.container {
  display: flex; /* or inline-flex */
}
复制代码

flex-direction

image

通过该属性可以定义容器内item主轴的方向,items就会沿着主轴排列。Flexbox是单方向布局模型。你可以考虑把容器内item横着排列或者竖着排列。

注意:下面的一些图示和示例都按照flex-direction为row的情况编写。

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
复制代码
  • row(default):横向正向排列
  • row-reverse:横向反向排列
  • column:纵向正向排列
  • column-reverse:纵向反向排列

flex-wrap

image

默认情况下,弹性容器内的items倾向于在单行内布局。你可以通过这个属性来允许容器尝试多行布局。

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
复制代码

nowrap(default):只允许单行布局 wrap:允许多行布局 wrap-reverse:允许多行布局(反向)

flex-flow

这个属性只是上面两个属性缩写,默认属性是row nowrap:

flex-flow: <‘flex-direction’> || <‘flex-wrap’>
复制代码

justify-content

image
这个属性定义了items沿着主轴的排列方式,它可以帮助所有布局在一行的弹性item s合理的通过不同方式来使用剩余的空间,同时也会对溢出的items进行分配:

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
复制代码
  • flex-start(default):左对齐(依据flex-direction)
  • flex-end:右对齐(同上)
  • start:左对齐(不过不是根据flex-direction,而是根据根元素的writing-mode属性,这是用于决定整个页面行布局的方向)
  • end:右对齐(同上)
  • left:左对齐(容器的左边沿,若flex-direction属性不适用,那具体表现等同start)
  • right:右对齐(同上)
  • center:居中
  • space-between:沿主轴方向,等间距排列,首末子组件与父组件相距0
  • space-around:沿主轴方向,等间距排列,首末子组件与父组件相距1/2个间距

注意不同的浏览器对上述属性支持有差异的,目前适配比较好的属性包括flex-start,flex-end和center。

最后我们可以添加一个额外的属性safe和unsafe:

  • safe:确保你无法将那些本身就渲染出屏幕外的且浏览器content没办法到达进行处理
  • unsafe:上述操作可以

align-items

image
这个定义了items沿着次轴(主轴交叉轴,例如主轴是X轴,次轴就是Y轴)的排列方式,具体内容和上面属性类似:

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
复制代码
  • stretch(default):拉伸item来充满容器,但遵守min-width和max-width属性
  • flex-start/start/self-start:左对齐,不同点在于根据flex-direction还是writing-mode
  • flex-end/end/self-end:右对齐,区别同上
  • center:居中
  • baseline:与他们的基线对齐

align-content

image

这个同样也是针对次轴进行排列,和上述不同的是这个属性针对是多行的情况下,如果只有一行这个属性是没用的(可以用上一个属性代替)

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
复制代码

具体属性就不说明了。

2.2 items属性

image

order

image

这个属性用于决定flex容器中items排列的顺序,order越大越往后

.item {
  order: <integer>; /* default is 0 */
}
复制代码

flex-grow

image

这个属性定义了item是否有能力在有必要的情况下扩展自己的尺寸,定义了在flex容器中item自身可以占用的空间比例。

如果所有的item这个值都设置为1,那么容器内可用空间将会均等分配给所有的子item,如果一个子item的属性值是2,它将会占有其他item空间的2倍

.item {
  flex-grow: <number>; /* default 0 */
}
复制代码

flex-shrink

这个属性定义了一个item可用缩小的能力,用法类似上面属性:

.item {
  flex-shrink: <number>; /* default 1 */
}
复制代码

flex-basis

这个属性定义了一个元素在剩余空间进行分配之前的默认尺寸,例如20%,5rem这样。

auto关键词意味着让容器看着item自己的宽度或高度来决定(目前暂时是通过main-size关键词来实现的),会根据flex-grow的值进行分配

content关键词意味着默认尺寸参考item的内容大小,这个属性还没实现,暂时用不了...

.item {
  flex-basis: <length> | auto; /* default auto */
}
复制代码

flex

flex-grow,flex-shrink,flex-basis三者属性的缩写方式。

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

比较推荐用这个属性来代替上面写法。

align-self

image

这个属性用于单个item覆盖容器的默认排列方式(通过align-items指定的)

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
复制代码

3. 浏览器支持

通过不同Flexbox版本区分:

  • (new) means the recent syntax from the specification (e.g. display: flex;)
  • (tweener) means an odd unofficial syntax from 2011
  • (e.g. display: flexbox;) (old) means the old syntax from 2009 (e.g. display: box;)

image

4. 参考资料

CSS-trick的指导

React-Native之Flex布局

flex布局中align-items 和align-content的区别

文章分类
前端
文章标签