flex弹性盒模型

最后更新于:2018-04-05 11:08:42

弹性盒模型布局优势

  • 通过将弹性元素拉伸或缩小来充满可用空间和避免溢出。这种方式解决了新内容的溢出问题并且以开发者期望的情况实施布局。
  • 给予弹性元素成比例的尺寸。
  • 弹性容器内的弹性元素可以从任意方向布局。可以解决在不同媒体查询中元素的顺序问题。使得可见内容的顺序独立于HTML渲染顺序,有利于站点的响应式设计。

基本概念

flex-1

  • 主轴(main axis),主轴区域(main dimension)。弹性容器的主轴指的是弹性元素主要沿着哪个方向布局。它在主轴区域中延伸。
  • 主轴起点(main-Start),主轴终点(main-end)。弹性元素被放置于容器中从主轴起点到主轴终点放置。
  • 主轴尺寸(main size),主轴尺寸属性(main size property)。一个弹性元素的主轴尺寸指的是其在主轴区域内的长度。其主轴尺寸属性指的是其对应的属性。
  • 侧轴(cross axis),侧轴区域(cross dimension)。侧轴垂直于主轴。它在侧轴区域中延伸。
  • 侧轴起点(cross-Start),侧轴终点(cross-end)。浮动行被元素填充,并且在容器中沿侧轴方向从起点向终点分布。
  • 侧轴尺寸(cross size),侧轴尺寸属性(cross size property)。一个弹性元素的侧轴尺寸指的是其在侧轴区域内的长度。其侧轴尺寸属性指的是其对应的属性。

兼容性

flex-2

弹性容器的属性

// 转化为盒模型
.flexbox {
    display: flex || inline-flex
}
  1. flex-direction

定义了弹性元素如何在弹性容器中排列。

// 四个值
flex-direction: row(从左到右) || row-reverse(从右到左) || column(从上到下) || column-reverse(从下到上)
  1. flex-wrap

定义了弹性元素是否换行,以及换行后的起点。

// 三个值
flex-wrap:nowrap(不换行) || wrap(换,最后行在下) || wrap-reverse(换,最后行在上面)
  1. flex-flow

flex-directionflex-wrap的简写。

// 默认 row nowrap
flex-flow: <flex-direction> || <flex-wrap>;
  1. justify-content

定义了弹性元素在容器内的对齐方式。

// 五个值
justify-content:  flex-start(左对齐) || flex-end(右对齐) || center(居中) || space-between(两边对齐,等分) || space-around;(元素两侧间隔相等,中间大一倍)
  1. align-items

定义元素在侧轴的对齐方式。

//五个值
align-items: flex-start(上对齐) || flex-end(下对齐) || center(中点对齐) || baseline(元素第一行文字的基线对齐) || stretch(默认值);
  1. align-content

定义了容器内每行沿侧轴的对齐方式。与justify-content属性在主轴方向对齐单独元素的方式相似。如果容器内只有一行,该属性无效。

align-content: flex-start || flex-end || center || space-between || space-around || stretch 默认值:stretch

弹性元素的属性

  1. order

定义弹性元素出现的顺序,值越小越靠前,默认值0.

order: 0;
  1. align-self

用来单独设置弹性元素在侧轴的对齐方式,功能与align-items相同。可以覆盖align-items属性。

align-self: auto | flex-start | flex-end | center | baseline | stretch 默认值:auto
  1. flex-grow

定义了弹性元素的放大比例

flex-grow: 0;//默认值
  1. flex-shrink

定义了弹性元素缩小的比例

flex-grow: 0;//默认值
  1. flex-basis

定义了弹性框伸缩的基准,不接受负值,类似于width属性。

flex-basis: auto;//默认值
  1. flex

flex属性是flex-grow, flex-shrinkflex-basis的简写,默认值为0 1 auto。后两个属性可选。

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

参考文档:

  1. http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html;
  2. https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex;