运动端支出小记,完全指南
分类:前端技术

移步端支出小记 – Flexbox

2015/11/12 · CSS · Flexbox

原稿出处: Taobao前端团队(FED卡塔尔- 凌恒   

图片 1

在付出活动端页面包车型地铁时候,出去布局方便和减少代码量的思谋,使用了 Flexbox 的布局格局,在里头也遭受了一些标题,轻易记录下。

W3C解释:

In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shriking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

flexbox的现身是为了解决复杂的web布局,因为这种布局方式很灵敏。容器的子成分能够随便方向拓宽排列。

  • 原文:A Complete Guide to Flexbox
  • 作者:Chris Coyier
  • 原作最终更新:July 20, 2017
  • 译者:leotso

Flexbox,flexbox布局

Flexbox模型

  • 主轴、主轴方向(main axis |main dimension):顾客代理沿着一个伸缩容器的主轴配置伸缩项目,主轴是主轴方向的拉开。

  • 主轴源点、主轴终点(main-start |main-end):伸缩项指标铺排从容器的主轴源点边开始,往主轴终点边甘休。

  • 主轴长度、主轴长度属性(main size |main size property):伸缩项目标在主轴方向的宽窄或可观正是项目标主轴长度,伸缩项目的主轴长度属性是width或height属性,由哪二个对着主轴方向决定。

  • 侧轴、侧轴方向(cross axis |cross dimension):与主轴垂直的轴称作侧轴,是侧轴方向的拉开。

  • 侧轴源点、侧轴终点(cross-start |cross-end):填满项目标伸缩行的布局从容器的侧轴源点边开端,往侧轴终点边甘休。

  • 侧轴长度、侧轴长度属性(cross size |cross size property):伸缩项目标在侧轴方向的大幅或可观正是种类的侧轴长度,伸缩项目标侧轴长度属性是"width"或"height"属性,由哪三个对着侧轴方向决定。

图片 2

 

 

Flexbox属性

Flex-direction: 属性决定主轴的主旋律(即项指标排列方向卡塔 尔(英语:State of Qatar)。

  • Row : (默许值) 主轴为水平方向,起源在左端。
  • Row-reverse: 主轴为水平方向,源点在右端。
  • Column : 主轴为垂直方向,起源在上沿。
  • Column-reverse : 主轴为垂直方向,起源在下沿。

图片 3

 

 

Flex-wrap:属性 暗中认可景况下,项目都排在一条线(又称轴线卡塔 尔(阿拉伯语:قطر‎上。Flex-wrap属性定义,假如一条轴线排不下,怎么着换行。

  • Nowrap:(默认) 不换行
  • Wrap:换行,第生机勃勃行在上面。
  • Wrap-reverse:换行,第意气风发行在世间。

 

Flex-flow: 属性是flex-direction属性和flex-wrap属性的简写情势,暗许值为row nowrap。

 

Justify-content:定义了项目在主轴上的对齐方式。

  • Flex-start(默认值): 左对齐。
  • Flex-end:右对齐。
  • Center:居中。
  • Space-between:两端对齐,项目里面包车型客车间隔相等。
  • Space-around:各个门类两边的间距相等,所以,项目里面包车型大巴间距比项目与边框的间距大学一年级倍。图片 4

 

Display值:

Flex:弹性容器为块级。

inline-flex;弹性容器为行级成分。

Align-content属性定义弹性容器的垂直轴方向上额外层空间间时,怎么着排布每黄金时代行。当弹性容器独有黄金年代行时无坚决守护

默认值:stretch;

flex-start:全体行从垂直轴起源起首填写。第生机勃勃行的垂直轴起源边和容器的垂直轴起点边对齐。接下来的每意气风发行紧前面风流罗曼蒂克行。

flex-end:全数行从垂直轴终点初叶填写。第风流洒脱行的垂直轴终点边和容器的垂直轴终点边对齐。接下来的每意气风发行紧面前后生可畏行。

center:全体行朝向容器的骨干填充。每行相互紧挨,相对于容器居中对齐。容器的垂直轴起源边和第意气风发行的相距相等于容器的垂直轴终点边和终极生龙活虎行的间距。

space-between:全部行在容器中平均布满。相邻两行间隔相等。容器的垂直轴起源边和极端边分别与第生机勃勃行和末段大器晚成行的边对齐。

space-around:全数行在容器中平均分布,相邻两行间距相等。容器的垂直轴源点边和终点边分别与第豆蔻梢头行和尾声生龙活虎行的偏离是隔壁两行间隔的八分之四。

stretch:拉伸全数行来填满剩余空间。剩余空间平均的分配给每豆蔻梢头行

图片 5

 

Align-items属性:定义项目在侧轴上哪些对齐。

Flex-start: 侧轴的起源对齐。

Flex-end:侧轴的终点对齐。

Center: 侧轴的中式点心对齐。

Baseline:项指标率先行文字的基线对齐。

Stretch(暗许值):如若项目未设置中度或设为auto,将占满整个容器的中度。

Flex-grow属性:定义子项的放大比例,默以为0,即假设容器存在剩余空间,也不放大。

如若持有子项的flex-grow属性都为1,则他们将等分剩余空间(假如容器有多余空间的话卡塔尔,假诺多个类别的flex-grow属性为2,别的子项都为1,则后边多个攻下剩余空间将比其余子项多风度翩翩倍。

图片 6

Flexbox模型 主轴、主轴方向(main axis |main dimension):顾客代理沿着一个伸缩容器的主轴配置伸缩项目,主轴是主轴方向的延...

什么是 Flexbox

提起 Flexbox,大家应该都不生分,互联网上也许有 N 多的教程。然则在这里间还是轻松说一下,就当回看知识了呢。

CSS 2.1 定义了八种布局方式 ― 由多个盒与其兄弟、祖先盒的关系决定其尺寸与地方的算法:

  • 块布局 ― 为了彰显文书档案而规划出来的布局形式;
  • 行内布局 ― 为了表现文本而规划出来的布局形式;
  • 报表布局 ― 为了用格子展现 2D 数据而设计出来的布局方式;
  • 固定布局 ― 为了丰硕直白地定位成分而规划出来的布局形式,定位成分基本与别的因素毫无关。

而 Flexbox(伸缩布局卡塔尔国是为了表现复杂的行使与页面而设计出来的,豆蔻年华种特别有益于有效,能够在无人问津大概动态尺寸的意况下率性分配容器空间的布局形式。

要证实 Flexbox 的布局模型,就必定要放标准上的那张图:

图片 7

  • main axis(主轴)
    • main dimension(主轴方向卡塔尔
    • The main axis of a flex container is the primary axis along which flex items are laid out. It extends in the main dimension.
    • 主轴是伸缩项目在伸缩容器里遍及所依据的关键轴线,在主轴方向上延伸。
  • main-start(主轴起源卡塔 尔(阿拉伯语:قطر‎
    • main-end(主轴终点)
    • The flex items are placed within the container starting on the main-start side and going toward the main-end side.
    • 伸缩项目从容器的主轴起源开首放置,直到主轴终点。
  • main size(主轴尺寸卡塔尔国
    • main size property(主轴尺寸属性卡塔尔国
    • A flex item’s width or height, whichever is in the main dimension, is the item’s main size. The flex item’s main size property is either the width or height property, whichever is in the main dimension.
    • 伸缩项目在主轴方向上的长或许宽是那个类其余主轴尺寸。叁个伸缩项目标主轴属性是在主轴方向上的长或然宽属性。
  • cross axis(侧轴)
    • cross dimension(侧轴方向卡塔 尔(英语:State of Qatar)
    • The axis perpendicular to the main axis is called the cross axis. It extends in the cross dimension.
    • 和主轴垂直的轴叫做侧轴,它在侧轴方向上延伸。
  • cross-start(侧轴源点卡塔尔国
    • cross-end(侧轴终点卡塔尔
    • Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.
    • 含有伸缩成分的伸缩行从容器的侧轴起源初步放置,直到侧轴终点。
  • cross size(侧轴尺寸卡塔尔国
    • cross size property(侧轴尺寸属性卡塔尔国
    • The width or height of a flex item, whichever is in the cross dimension, is the item’s cross size. The cross size property is whichever of width or height that is in the cross dimension.
    • 伸缩项目在侧轴方向上的长依然宽是它的侧轴尺寸。侧轴尺寸属性则是在侧轴方向上的长只怕宽属性。

Flexbox模型和术语:

flex布局模型分化于块和内联模型布局(总括信任于块和内联的流方向卡塔尔国,flex布局信任于flex directions。即:Flexbox是布局模块,实际不是八个简便的质量,它包罗父元素(flex container)子元素(flex items)的属性。

图片 8

Flex

图片 9

Flexbox

main axis | main dimension 主轴、主轴方向

cross axis | cross dimension 侧轴、侧轴方向

flex container 弹性容器:富含着弹性项指标父元素,通过设置display属性为flex或inline-flex来定义弹性容器

flex item弹性项目:弹性容器的各样子成分都称之为弹性项目。弹性容器直接富含的文件将被包覆成无名弹性单元。


使用 Flexbox

今昔大多数的主流浏览器都曾经支撑了 Flexbox 也许它的旧版语法。假诺是运用在移动端,基本上是都扶植的。为了合作新老版本的语法,能够如此使用( Less 卡塔 尔(阿拉伯语:قطر‎:

LESS

//父元素 .flex-box() { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } //子元素 .flex(@v) { -webkit-box-flex: @v; -moz-box-flex: @v; -webkit-flex: @v; -ms-flex: @v; flex: @v; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//父元素
.flex-box() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
//子元素
.flex(@v) {
  -webkit-box-flex: @v;
  -moz-box-flex:  @v;
  -webkit-flex:  @v;
  -ms-flex:  @v;
  flex:  @v;
}

 

为子成分设置了  flex: 1 ,那样容器里面包车型大巴子成分可以均分容器的半空中。当然,可以为有个别子元素钦赐叁个宽度,这样多余的子元素就能够平分剩下的空间。

平日来讲图中的品牌墙:

图片 10

Flexbox使用示例:

水平竖直居中:

<div class="parent"><div class="child"></div></div>

将 .parent 的 display 属性设置为 flex,将 .child 的 margin 设置为 auto。

在Flex容器中,当项目边距设置为 auto 时,设置自动的垂直边距使该项目完全居中八个轴。

 

flex-basis

其生机勃勃性格,依然要略微说一说的。这天性情是新版标准内部涉及的属性。它用来陈说伸缩成分( flex-item 卡塔尔的始发主轴尺寸和基准值,也正是在依照伸缩比率总计剩余空间布满以前的尺寸值,纵然在  flex 中简单了那么些值,则暗中同意值是 0 , 静心未有单位 。它的另叁个取值是  auto ,此时,成分的最初主轴长度和基准值正是它本身的主轴长度,即在于自身的剧情长度。

多少个取值的界别如下图:

图片 11

看图更易于精晓一些:值为 0 时,成分分配的是容器的空间。而当班值日为 auto 时,它分配的是减去成分内容之后剩余的容器空间。

在值为 auto 时,它的显示跟老版 Flex 规范的伸缩比例表现是均等的,假设盒子内容大小不肖似,则每一种盒子最终分配的长台湾空中大学小也不周围。

进而,在管理此人展馆示至极时,要在要素上加一个  width: 0%;  来使其展现的常规。实际上, flex-basis: 0;  的表现便是为要素加上二个相通width: 0%;  的属性,来分配容器空间。

Flexbox 那个模块有为数不菲的特性,这里只介绍最宗旨的使用,更加多内容详实规范或者 Google。

Flexbox属性:

1. dispaly(flex container)

display: other values | flex | inline-flex;

2. flex-direction(flex container)

flex-direction: row | row-reverse | column | column-reverse

重大用来创设主轴,进而定义伸缩项目放置在伸缩容器的趋势。

图片 12

Flex-direction

3. order(flex items)

暗许景况下,伸缩项目是依据文书档案流现身前后相继顺序排列。而"order"属性能够调控伸缩项目在其伸缩容器中出现的顺序。

order: <integer>

4.flex-wrap(flex container)

首要用于定义伸缩容器里是单行照旧多行呈现,侧轴的取向决定了新行堆叠的取向。

flex-wrap: nowrap | wrap | wrap-reverse

nowrap(暗许值卡塔尔国:伸缩容器单行展现。

wrap:伸缩容器多行展现。

wrap-reverse:伸缩容器多行呈现,方向与wrap相反。

5.flex-flow(flex container)

flex-direction 和 flex-wrap 属性的缩写版本。

6.justify-content(flex container):

概念伸缩项目沿着主轴线的对齐模式。当风度翩翩行上的兼具伸缩项目都不可能伸缩,只怕可伸缩不过已经实现最大尺寸时,那风流洒脱天性才会对剩下的上空实行分红。当项目溢出某黄金年代行时,该属性也会在档案的次序的对齐上强加一些决定。

justify-content: flex-start | flex-end | center | space-between | space-around;

图片 13

justify-content

7. align-content(flex container)

用来调准伸缩行在伸缩容器里的对齐情势。

align-content: flex-start | flex-end | center | space-between | space-around | strench;

图片 14

align-content

8. align-items(flex container)

align-items: flex-start | flex-end | center | baseline | stretch;

图片 15

align-items

9. align-self(flex items)

用来在单身的伸缩项目上覆写默许的对齐情势。

align-self: auto | flex-start| flex-end| center | baseline | stretch;

图片 16

align-self

10. flex-grow(flex items)

据书上说须求来定义伸缩项目标扩张手艺。接收三个不带单位的值作为三个百分比。

最主要用以决定伸缩容器剩余空间按百分比应当扩张多少空间。

flex-grow: <number>;  /* 默认为0 */

设若全数伸缩项目该属性设置了1,那么每个品种就设置为贰个抑扬顿挫也便是的结余空间;假诺给当中一个伸缩项目设置为2,那么那么些项目所占的剩余空间是其余连串所占剩余空间的2倍。

图片 17

flex-grow

11. flex-shrink(flex items)

基于要求来定义伸缩项目裁减的力量。

12. flex-basis(flex items)

用来设置伸缩基准值,剩余的长空按比例举办伸缩。

13. flex(flex items)

flex-grow、flex-shrink 和 flex-basis 3个属性的缩写。

-

背景

Flexbox 布局 (Flexible Box) 模块 (近期是 W3C 的八个末段征集专门的学业草案(Last Call Working Draft)卡塔 尔(阿拉伯语:قطر‎目的在于提供风流倜傥种更实惠的措施,在容器的项之间处理布局、对齐和空间分配,固然它们的深浅未知况兼/或是动态变化的(由此称为“flex”卡塔尔。

Flex 布局背后的紧要观念是让容器能够改换其项的小幅度/中度(和各类卡塔 尔(阿拉伯语:قطر‎,以最佳地填写可用空间(首假若为着适应种种呈现设备和显示器大小卡塔尔。叁个flex 容器扩充其项来填充可用的闲暇空间,可能减少它们以防止溢出。

最关键的是,flexbox 布局与常规布局(基于垂直的块(block卡塔 尔(阿拉伯语:قطر‎、基于水平的内联(inline卡塔 尔(英语:State of Qatar)卡塔 尔(阿拉伯语:قطر‎截然相反,flexbox 布局是大势非亲非故的。即使正规布局工作很相符页面,但它们贫乏灵活性(未有双关语卡塔尔来支撑大型或复杂的应用程序(特别是当提到到方向变化、大小调解、拉伸、减少等卡塔 尔(阿拉伯语:قطر‎时。

小心:Flexbox 布局最切合应用程序的机件和Mini布局,而网格布局则契合越来越大局面包车型地铁布局。

 

亟待注意的点

  • 低版本安卓下多数用的是老版本的专门的学问,所以会以致部分难点:
    • 在接Nabi例伸缩时会因为盒子内容大小不等引致内容不能等分的标题,那时可认为这么些成分加多 width: 0%; 将其原来大小设为 0(举例 UC 浏览器,BlackBerry MX4,三星(Samsung卡塔 尔(阿拉伯语:قطر‎ N7100卡塔 尔(阿拉伯语:قطر‎;
    • 旧版供给伸缩成分( flex-item 卡塔 尔(英语:State of Qatar)必得是块级成分,所以 inline 元素要求安装display: block; 手艺够符合规律展现。有部分国产手提式有线电话机的浏览器上便是那般的(举例:Vivo X3SW卡塔尔国;
    • Flex item 里面纵然有三个块成分,设置了 margin-top,会产出溢出的主题材料,表现就是 margin 无效。要求在这里个因素上增多  overflow:hidden;  来使其常规呈现。
  • 因为 Flexbox 有新版和旧版标准,新版的多少属性(举个例子:flex-wrap卡塔尔国,老版标准下并不扶植,出于宽容性,最佳幸免选拔;
  • text-overflow: ellipsis; 在 display: flex; 成分上是不曾效果的。

底工和术语

由于 flexbox 是一个总体的模块,并不是多少个独立的属性,它涉及到大多事物,包涵它的方方面面品质。此中一些是要在容器上安装的(父成分,称为“flex容器”卡塔 尔(英语:State of Qatar),而其他的则是设置在子成分上(称为“flex项/成分”卡塔 尔(阿拉伯语:قطر‎。

假若寻常布局是根据块(block卡塔尔和内联(inline卡塔 尔(阿拉伯语:قطر‎流方向,那么 flex 布局则依据“flex流方向(flex-flow direction卡塔尔国”。 请看风流倜傥看规范中的下图,其解释了 flex 布局背后的注重理念。

图片 18

 基本上,弹性项(flex items卡塔 尔(英语:State of Qatar)将沿着主轴(main axis卡塔尔(从 main-start 到 main-end卡塔 尔(英语:State of Qatar)或侧轴(cross axis卡塔尔(从 cross-start 到 cross-end卡塔尔布局。

  • main axis - flex容器的主轴是非同一般的轴,flex项被沿其放置。小心,它不必然是水平的;那取决 flex-direction 属性的值(见下卡塔尔国。
  • main-start | main-end - flex 项放在容器内,从 main-start 到 main-end。
  • main size - 多少个弹性项的宽度或可观,任何一个在主维度上,便是这些项的主尺寸。flex 项的 main size 属性是“宽度”或“中度”属性之风度翩翩,任何三个都足以是 main size。
  • cross axis - 垂直于主轴的轴称为横轴。它的可行性在于主轴方向。
  • cross-start | cross-end - Flex行充满了flex项,并将其放置到容器中,行起头于Flex容器的 cross-start 端,并向 cross-end 端方向前行。
  • cross size - 叁个 flex 项的上升的幅度或可观,任何二个在侧维度上,正是该项的 cross size。cross size属性是在侧维度上的“宽度”或“中度”中那一个。

Properties for the Parent

(flex container)

Properties for the Children

(flex items)

 

# display

定义一个 flex 容器;inline 或 block 取决于给定的值。它为所有直接的子元素提供一个 flex 上下文。
    .container {
        display: flex; /* or inline-flex */
    }
注意,CSS 列对 flex 容器没有影响。
 

# flex-direction

确定主轴, 用来定义 flex 容器中的 flex 项的放置方向。Flexbox 是(除了可选的 wrap)一个单向布局概念。可以将 flex 项看作主要是在水平的行或垂直的列中布局的。
    .container {
        flex-direction: row | row-reverse | column | column-reverse;
    }
 
  • row (default): 从左到右(如果元素的 dir 属性为 ltr);从右到左(如果元素的 dir 属性为 rtl)
  • row-reverse: 从右到左(如果元素的 dir 属性为 ltr);从左到右(如果元素的 dir 属性为 rtl)
  • column: 自上而下
  • column-reverse: 自下而上

# flex-wrap

默认情况下,flex 项都将尝试放置在一行上。你可以根据需要使用该属性来更改默认行为以支持换行。
    .container{
        flex-wrap: nowrap | wrap | wrap-reverse;
    }
 
  • nowrap (default): 所有 flex 项位于一行中
  • wrap: flex 项将从上到下多行排列
  • wrap-reverse: flex 项将从下到上多行排列
 

# flex-flow (适用于:父 flex 容器元素)

这是一个简化的 flex-direction 和 flex-wrap 属性,它们一起定义了 flex 容器的主和侧轴。默认是 row nowrap。
    flex-flow: <‘flex-direction’> || <‘flex-wrap’>
 

# justify-content

该属性定义了浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间。它帮助分配剩余的空闲空间当无论在一行中的所有 flex 项是固定大小的还是弹性的但是达到它们的最大尺寸的时候。 当它们溢出行时,该属性也能这些项的对齐方式发挥一些控制作用。
    .container {
        justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
    }
 
  • flex-start (default): 从行首开始排列。每行第一个弹性元素与行首对齐,同时所有后续的弹性元素与前一个对齐
  • flex-end: 从行尾开始排列。每行最后一个弹性元素与行尾对齐,其他元素将与后一个对齐
  • center: 伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同
  • space-between: 在每行上均匀分配元素;第一个元素位于行首,最后一个元素位于行尾
  • space-around: 元素在行内均匀分布,在元素周围的间距相等。注意,视觉上的间距不相等,因为所有元素在其两边都有相等的空白。第一个元素距离容器边缘有一个单位的空白,而元素之间有两个单位的空白因为下一个元素也有其自己的空白边距。
  • space-evenly: 元素到容器边缘及元素之间间距相等地均匀分布方式。
 

# align-items

该属性定义弹性元素沿当前行的侧轴方向上如何布局的默认行为。可以将其理解为 justify-content 应用于侧轴的版本(垂直于主轴)。
    .container {
        align-items: flex-start | flex-end | center | baseline | stretch;
    }
 
  • flex-start: 元素侧轴起点的边缘与行的侧轴起点对齐
  • flex-end: 元素侧轴终点的边缘与行的侧轴终点对齐
  • center: 元素在侧轴方向上居中对齐
  • baseline: 所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线
  • stretch (default): 弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。(同时遵守 min-width/max-width 属性的设置

# align-content

该属性设置当在侧轴方向上有额外空间的时候弹性容器中行的对齐方式,类似于在主轴上 justify-content 属性对个体元素的对齐方式。
注意:该属性在弹性容器中仅有一行弹性元素的情况下没有效果。
    .container {
        align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    }
 
  • flex-start: 所有行从侧轴起点开始填充。第一行的侧轴起点边和容器的侧轴起点边对齐。接下来的每一行紧跟前一行
  • flex-end: 所有行从侧轴末尾开始填充。最后一行的侧轴终点和容器的侧轴终点对齐。同时所有后续行与前一个对齐
  • center: 所有行朝向容器的中心填充。每行互相紧挨,相对于容器居中对齐。容器的侧轴起点边和第一行的距离相等于容器的侧轴终点边和最后一行的距离
  • space-between: 所有行在容器中平均分布。相邻两行间距相等。容器的侧轴起点边和终点边分别与第一行和最后一行的边对齐
  • space-around: 所有行在容器中平均分布,相邻两行间距相等。容器的侧轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半
  • stretch (default): 拉伸所有行来填满剩余空间。剩余空间平均的分配给每一行
 

# order

默认情况下,flex 元素按源顺序排列。同时,order 属性可以控制它们在弹性容器中出现的顺序。
    .item {
        order: <integer>;
    }
 

# flex-grow

该属性定义弹性盒子项(flex item)的拉伸因子,它定义了一个 flex 项在必要时可以拉伸的能力。它接受一个无单位数值,作为一个比例。它规定了 flex 项在 flex 容器内可占据的可用空间的大小。
如果所有项的 flex-grow 属性都设置为 1,那么容器中的剩余空间将平均分配给所有的子元素。如果其中一个子元素的值为 2,那么其对剩余空间的占用将比其他项多一倍(或者至少尝试一下)。
    .item {
        flex-grow: <number>; /* default 0 */
    }
负值是无效的。
 

# flex-shrink

这定义了一个 flex 项在必要时收缩的能力。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。
    .item {
        flex-shrink: <number>; /* default 1 */
    }
负值是无效的。
 

# flex-basis

这定义了在剩余空间被分配之前,元素的默认大小。它可以是一个长度(例如 20%,5rem 等)或一个关键字。auto 关键字的意思是“看我的 width 或 height 属性”(这是由关键字 main-size 临时完成的,直到废弃为止)。content 关键字的意思是“基于项中内容的大小调整尺寸” ———— 这个关键字还没有得到很好的支持,所以很难测试,也很难知道它的同胞属性 max-content、min-content 和 fit-content 是什么。
    .item {
        flex-basis: <length> | auto; /* default auto */
    }
如果设置为0,则不将内容周围的额外空间考虑在内。如果设置为 auto,额外的空间将基于它的 flex-grow 属性值分配。 查看此图
 

# flex

这是一个简写属性,可以同时设置 flex-grow, flex-shrink 与 flex-basis。第二和第三个参数(flex-shrink 和 flex-basis)是可选的。默认为 0 1 auto。
    .item {
        flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    }
建议使用这个简写属性,而不是设置单个属性。
 

# align-self

这允许对单个 flex 元素覆盖默认对齐(或者由 align-item 指定的对齐)。
属性值请参考对 align-items 属性的解释。
    .item {
        align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }
 
注意,float,clear 和 vertical-align 对弹性元素没有影响。

 

By the way

再有一个一蹴而就的 CSS 属性,在移动端已经主导协理了,正是 box-sizing: border-box;。它在采纳 padding 时十三分有用,能够幸免 width ,padding 的猜想。能够如此子用:

LESS

.box-sizing(@v) { -webkit-box-sizing: @v; -moz-box-sizing: @v; box-sizing: @v; }

1
2
3
4
5
.box-sizing(@v) {
  -webkit-box-sizing: @v;
  -moz-box-sizing: @v;
  box-sizing: @v;
}

唯独,要留神,在此种盒模型下,边框的肥瘦也会算在宽窄里。

1 赞 6 收藏 评论

图片 19

Examples

让我们从叁个极度轻松的事例开头,解决三个大约平日的标题:完美地居中。假若您接受flexbox,那就无法再轻易了。

.parent {
    display: flex;
    height: 300px; /* Or whatever */
}
.child {
    width: 100px;  /* Or whatever */
    height: 100px; /* Or whatever */
    margin: auto;  /* Magic! */
}

那就借助于在 flex 容器中设置 “auto” 的 margin 摄取额外的空间。因而,设置一个笔直的 margin 为 auto,将使这么些 flex 项全面地在多个轴上居中。

 

近年来大家来选取更加多的品质。 思忖一个独具6个因素的 list,全部因素都有多个定点的尺码,在美学难题上,但它们能够是机关大小的。大家意在它们在档案的次序轴上均匀地遍布,那样当大家调度浏览器的大小时,一切都很好(未有media query!卡塔 尔(阿拉伯语:قطر‎。

.flex-container {
    /* We first create a flex layout context */
    display: flex;

    /* Then we define the flow direction and if we allow the items to wrap
     * Remember this is the same as:
     * flex-direction: row;
     * flex-wrap: wrap;
     */
    flex-flow: row wrap;

    /* Then we define how is distributed the remaining space */
    justify-content: space-around;
}

成就。其余的都只是有些样式的难点。 上面是本例在 CodePen 上的叁个pen。一定要去CodePen,试着调节你的窗口大小,看看会生出哪些。

 

 

让我们尝试别的。若是大家在大家的网址上有二个右对齐的领航,但大家目的在于它在上游大小的显示器上居中对齐,而在小的装置上是单列的。非常轻巧。

/* Large */
.navigation {
    display: flex;
    flex-flow: row wrap;
    /* This aligns items to the end line on main-axis */
    justify-content: flex-end;
}

/* Medium screens */
@media all and (max-width: 800px) {
    .navigation {
        /* When on medium sized screens, we center it by evenly distributing empty space around items */
        justify-content: space-around;
    }
}

/* Small screens */
@media all and (max-width: 500px) {
    .navigation {
        /* On small screens, we are no longer using row direction but column */
        flex-direction: column;
    }
}

 

 

让大家使用弹性成分的狡滑来尝试一些更风趣的专业。四个运动优先(mobile-first卡塔尔的带有全宽(full-width卡塔 尔(阿拉伯语:قطر‎页头和页脚的三列布局哪些,並且独自于源顺序。

.wrapper {
    display: flex;
    flex-flow: row wrap;
}

/* We tell all items to be 100% width */
.header, .main, .nav, .aside, .footer {
    flex: 1 100%;
}

/* We rely on source order for mobile-first approach
* in this case:
* 1. header
* 2. nav
* 3. main
* 4. aside
* 5. footer
*/


/* Medium screens */
@media all and (min-width: 600px) {
    /* We tell both sidebars to share a row */
    .aside { flex: 1 auto; }
}

/* Large screens */
@media all and (min-width: 800px) {
    /* We invert order of first sidebar and main
     * And tell the main element to take twice as much width as the other two sidebars
     */
    .main { flex: 2 0px; }

    .aside-1 { order: 1; }
    .main { order: 2; }
    .aside-2 { order: 3; }
    .footer { order: 4; }
}

https://codepen.io/team/css-tricks/pen/jqzNZq

 

Flexbox 前缀

Flexbox 供给有个别经销商(vendor卡塔 尔(阿拉伯语:قطر‎的前缀来支撑尽大概多的浏览器。它不光含有带有中间商前缀的松手修饰属性,还满含实际完全两样的质量和值名。那是因为 Flexbox 标准已经随着时光的延迟而改造,创建了四个“旧的”、“过渡的”和“新的”版本。

唯恐管理这生龙活虎主题材料的最佳方法是编辑新的(和尾声的)语法,并由此 Autoprefixer 运营您的CSS,它亦可很好地管理回落难题。

照旧,这里有五个 Sass 的 @mixin 来帮衬管理局地前缀,那也让您通晓须求做些什么:

@mixin flexbox() {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
@mixin flex($values) {
    -webkit-box-flex: $values;
    -moz-box-flex: $values;
    -webkit-flex: $values;
    -ms-flex: $values;
    flex: $values;
}
@mixin order($val) {
    -webkit-box-ordinal-group: $val;
    -moz-box-ordinal-group: $val;
    -ms-flex-order: $val;
    -webkit-order: $val;
    order: $val;
}
.wrapper {
    @include flexbox();
}
.item {
    @include flex(1 200px);
    @include order(2);
}

 

连带小说

  • A Complete Guide to Grid
  • Almanac entries on Grid properties, like grid-row / grid-column

任何能源

  • Flexbox in the CSS specifications
  • Flexbox at MDN
  • Flexbox at Opera
  • Diving into Flexbox by Bocoup
  • Mixing syntaxes for best browser support on CSS-Tricks
  • Flexbox by Raphael Goetter (FR)
  • Flexplorer by Bennett Feely

Bugs

Flexbox 当然不是绝非它的 bug/缺欠/issue。笔者近来所观望标最棒的有关它们的搜聚是 Philip Walton 和 Greg Whitworth 的 Flexbugs。那是四个用来追踪全部 bug/缺欠/issue 的绽开源代码的地点,所以小编觉着最棒只是将它链接在那。

 

浏览器帮衬

根据 flexbox 的“版本”拆分:

  • (new) 表示职业中新型的语法(举个例子 display: flex;卡塔 尔(英语:State of Qatar)
  • (tweener) 那是二〇一一年来讲的风度翩翩种奇异的私行语法(举例display: flexbox;卡塔 尔(阿拉伯语:قطر‎
  • (old) 表示从二零零六开首的旧的语法(例如 display: box;卡塔 尔(阿拉伯语:قطر‎

Chrome

Safari

Firefox

Opera

IE

Android

iOS

20- (old)

3.1 (old)

2-21 (old)

12.1 (new)

10 (tweener)

2.1 (old)

3.2 (old)

21 (new)

6.1 (new)

22 (new)

11 (new)

4.4 (new)

7.1 (new)

 

至于如何混合语法以获得最佳浏览器支持的更加多音讯,请参照他事他说加以调查 this article (CSS-Tricks) 或者 this article (DevOpera)。One plus浏览器 10 扶持新语法。

 

本文由pc28.am发布于前端技术,转载请注明出处:运动端支出小记,完全指南

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文