您的位置:新葡亰496net > 新葡亰官网 > 完全指南,Flexbox布局学习笔记

完全指南,Flexbox布局学习笔记

发布时间:2019-10-13 08:31编辑:新葡亰官网浏览(93)

    一抬手一动脚端支出小记 – Flexbox

    2015/11/12 · 新葡亰496net,CSS · Flexbox

    原稿出处: Taobao前端团队(FED)- 凌恒   

    新葡亰496net 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"属性,由哪一个对着侧轴方向决定。

    新葡亰496net 2

     

     

    Flexbox属性

    Flex-direction: 属性决定主轴的样子(即项指标排列方向)。

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

    新葡亰496net 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:每一种种类两边的间距相等,所以,项目里面的间距比项目与边框的间隔大学一年级倍。新葡亰496net 4

     

    Display值:

    Flex:弹性容器为块级。

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

    Align-content属性定义弹性容器的垂直轴方向上额外层空间中时,如何排布每一行。当弹性容器独有一行时无意义

    默认值:stretch;

    flex-start:全部行从垂直轴起源初阶填写。第一行的垂直轴源点边和容器的垂直轴源点边对齐。接下来的每一行紧面前一行。

    flex-end:全体行从垂直轴终点开首填写。第一行的垂直轴终点边和容器的垂直轴终点边对齐。接下来的每一行紧眼前一行。

    center:全数行朝向容器的基本填充。每行相互紧挨,相对于容器居中对齐。容器的垂直轴源点边和率先行的间隔相等于容器的垂直轴终点边和末段一行的离开。

    space-between:全部行在容器中平均遍布。相邻两行间距相等。容器的垂直轴起源边和终极边分别与第一行和结尾一行的边对齐。

    space-around:全体行在容器中平均遍布,相邻两行间隔相等。容器的垂直轴起源边和终端边分别与第一行和尾声一行的偏离是隔壁两行间隔的四分之二。

    stretch:拉伸全数行来填满剩余空间。剩余空间平均的分红给每一行

    新葡亰496net 5

     

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

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

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

    Center: 侧轴的中点对齐。

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

    Stretch(暗中认可值):借使项目未安装中度或设为auto,将占满整个容器的万丈。

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

    如若全数子项的flex-grow属性都为1,则他们将等分剩余空间(借使容器有多余空间的话),假设三个等级次序的flex-grow属性为2,其余子项都为1,则前面三个攻陷剩余空间将比任何子项多一倍。

    新葡亰496net 6

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

    借使想急速的利用flex布局,请阅读到底层。

    什么是 Flexbox

    说起 Flexbox,我们应该都不面生,网络上也会有 N 多的教程。不过在这里间照旧轻易说一下,就当回想知识了吗。

    CSS 2.1 定义了三种布局方式 ― 由三个盒与其兄弟、祖先盒的关联决定其尺寸与任务的算法:

    • 块布局 ― 为了表现文书档案而设计出来的布局情势;
    • 行内布局 ― 为了表现文本而布署出来的布局情势;
    • 报表布局 ― 为了用格子呈现 2D 数据而布置出来的布局格局;
    • 一定布局 ― 为了丰裕直接地定位元素而设计出来的布局形式,定位成分基本与此外因素毫非亲非故。

    而 Flexbox(伸缩布局)是为着表现复杂的采纳与页面而设计出来的,一种越发惠及实用,能够在鲜为人知只怕动态尺寸的情况下自便分配容器空间的布局格局。

    要证实 Flexbox 的布局模型,就不可能不要放标准上的那张图:

    新葡亰496net 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(侧轴方向)
      • 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)的属性。

    新葡亰496net 8

    Flex

    新葡亰496net 9

    Flexbox

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

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

    flex container 弹性容器:包蕴着弹性项目标父成分,通过设置display属性为flex或inline-flex来定义弹性容器

    flex item弹性项目:弹性容器的每一个子元素都叫作弹性项目。弹性容器直接包涵的文本将被包覆成无名氏弹性单元。


    FlexBox 弹性盒布局入眼不外乎五个部分,叁个是container 容器,三个是items 子项。

    使用 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 ,这样容器里面包车型地铁子元素能够均分容器的长空。当然,可以为某些子成分钦点多少个开间,那样多余的子成分就能够平分剩下的空中。

    如下图中的品牌墙:

    新葡亰496net 10

    Flexbox使用示例:

    水平竖直居中:

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

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

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

     

    把常备的盒布局形成弹性盒布局的议程是给父级容器‘display:flex’(大概display:inline-flex),思虑到webkit内核宽容性,写的时候要加-webkit前缀;设置为flex弹性布局未来子成分的float,clear,vertical-align属性将会失效。

    flex-basis

    以此本性,依然要多少说一说的。那本性格是新版规范内部涉及的习性。它用来陈说伸缩成分( flex-item )的上马主轴尺寸和基准值,也等于在依赖伸缩比率计算剩余空间布满之前的尺寸值,如若在  flex 中简易了这一个值,则默许值是 0 , 专心未有单位 。它的另多少个取值是  auto ,那一年,成分的上马主轴长度和基准值正是它本身的主轴长度,即在于本人的剧情长度。

    五个取值的界别如下图:

    新葡亰496net 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

    要害用来创立主轴,进而定义伸缩项目放置在伸缩容器的势头。

    新葡亰496net 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;

    新葡亰496net 13

    justify-content

    7. align-content(flex container)

    用来调准伸缩行在伸缩容器里的对齐格局。

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

    新葡亰496net 14

    align-content

    8. align-items(flex container)

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

    新葡亰496net 15

    align-items

    9. align-self(flex items)

    用来在独立的伸缩项目上覆写私下认可的对齐格局。

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

    新葡亰496net 16

    align-self

    10. flex-grow(flex items)

    基于必要来定义伸缩项目标恢弘技术。接受七个不带单位的值作为叁个比重。

    一言九鼎用于决定伸缩容器剩余空间按比例应该扩展多少空间。

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

    假使具备伸缩项目该属性设置了1,那么每一种门类就安装为二个轻重相等的结余空间;假诺给内部贰个伸缩项目设置为2,那么那几个种类所占的剩余空间是此外项目所占剩余空间的2倍。

    新葡亰496net 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))截然相反,flexbox 布局是来势毫无干系的。即便正规布局工作很契合页面,但它们缺少灵活性(未有双关语)来支撑大型或复杂的应用程序(非常是当提到到方向变化、大小调解、拉伸、减少等)时。

    在意:Flexbox 布局最相符应用程序的零部件和Mini布局,而网格布局则相符更加大面积的布局。

     

    下一场子项加上属性flex:整数数字(表示比例),恐怕不加属性flex属性,设置宽只怕高(跟主轴方向有关)固定数值,比方100px;则子项不受弹性盒布局的限制;容器除本条子项之外任何有flex的子项按比例分红宽度。

    要求在乎的点

    • 低版本安卓下多数用的是老版本的标准,所以会招致某个主题素材:
      • 在使用比例伸缩时会因为盒子内容大小不等导致内容不恐怕等分的难题,那一年可以为这几个成分增添 width: 0%; 将其原始大小设为 0(比方 UC 浏览器,Motorola MX4,三星(Samsung) N7100);
      • 旧版需要伸缩成分( flex-item )必需是块级成分,所以 inline 成分需求设置display: block; 技艺够平常展现。有一部分一加手提式有线电话机的浏览器上便是那般的(比如:Vivo X3SW);
      • Flex item 里面假诺有二个块成分,设置了 margin-top,会油不过生溢出的主题材料,展现就是 margin 无效。须要在此个因素上加多  overflow:hidden;  来使其常规展现。
    • 因为 Flexbox 有新版和旧版规范,新版的多少属性(举个例子:flex-wrap),老版规范下并不支持,出于宽容性,最佳制止采纳;
    • text-overflow: ellipsis; 在 display: flex; 成分上是未曾效应的。

    基本功和术语

    是因为 flexbox 是一个完全的模块,并不是三个独立的特性,它事关到不菲东西,包罗它的万事属性。个中一些是要在容器上设置的(父成分,称为“flex容器”),而任何的则是安装在子成分上(称为“flex项/成分”)。

    若果平常布局是依赖块(block)和内联(inline)流方向,那么 flex 布局则基于“flex流方向(flex-flow direction)”。 请看一看规范中的下图,其解说了 flex 布局背后的要紧思索。

    新葡亰496net 18

     基本上,弹性项(flex items)将沿着主轴(main axis)(从 main-start 到 main-end)或侧轴(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 对弹性元素没有影响。

     

    新葡亰496net 19

    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 收藏 评论

    新葡亰496net 20

    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);
    }
    

     

    (1)主轴(main axis):通过这么些伸缩盒子天性,能够很好的田间处理伸缩项目在伸缩盒子中的布局方向。那个趋势可以是从左到右,从上到下,从下到上,从右到左。这一个主轴的大势能够经过flex-direction属性来定义值分别为row,row-reverse,column,column-reverse。

    有关小说

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

    (2)主轴源点(main start)和终端(main end):伸缩项目从主轴源点初始布局到极点结束。属性justify-content正是依附主轴的源点和终极赋予start,center,end等值来布局的。

    别的财富

    • 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

    (3)主轴长度(main size):伸缩项目在主轴方向上的增进率恐怕中度便是项目标主轴长度。

    Bugs

    Flexbox 当然不是从未它的 bug/缺陷/issue。笔者日前所见到的最佳的有关它们的征集是 Philip Walton 和 Greg Whitworth 的 Flexbugs。那是叁个用来追踪全数 bug/缺陷/issue 的怒放源代码的地方,所以本人感到最佳只是将它链接在那。

     

    (4)侧轴(cross axis):与主轴垂直的轴是侧轴,所以说,侧轴的主旋律是由主轴决定的。

    浏览器援助

    根据 flexbox 的“版本”拆分:

    • (new) 表示专门的学业中新型的语法(举例 display: flex;)
    • (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 协理新语法。

     

    (5)侧轴的起源(cross start)和终点(cross end):伸缩项目充满伸缩行,并且伸缩行从侧轴起源先河布局容器到侧轴终点截至。

    (6)侧轴长度(cross size):伸缩项目在侧轴方向上的增长幅度可能中度正是体系的侧轴长度。

    容器是父级盒子,分为主轴(main axis)和纵轴(cross axis)

    1.flex-direction

    私下认可是比照主轴展现。然则也可通过flex-direction属性设置主轴方向。四个值代表的主轴方向:

    row: 从左到右

    row-reverse: 从右到左

    colum: 从上到下

    完全指南,Flexbox布局学习笔记。colum-reverse: 从下到上

    新葡亰496net 21

    图形来自网络

    2.flex-wrap

    flex-wrap设置当内容超过之后是还是不是折行。

    nowrap:不换行,而是经过缩小每三个男女的增加率来挤在一行。

    wrap: 换行。

    wrap-inverse: 换行,可是折行方向相反,(举例暗中认可是折到下一行,不过那个性情会招致折到上一行)。

    效果图如下:

    新葡亰496net 22

    图片来自互联网

    3.flex-flow

    flex-direction 和 flex-wrap 的组成写法。

    4.justify-content

    不通晓什么标准翻译 justify 这一个词。它的效果与利益是概念了如何分配剩余的空白区域。

    flex-start:主轴方向

    flex-end: 主轴反方向

    center: 挤在这里中

    space-between: 中间有空白。

    space-around: 中间和两侧都有空白。当中两边的空域是中间的一半肥瘦,可以清楚为各样孩子两边都有同一宽度的空域,而且空白不统一。

    效果图:

    新葡亰496net 23

    图片来自网络

    5.align-items

    align-items属性定义项目在时有时无轴上怎么对齐。

    .box{align-items:flex-start | flex-end | center | baseline | stretch;}

    如上是关于container的属性,接下去看一下items 的品质设置。

    新葡亰496net 24

    完全指南,Flexbox布局学习笔记。图片源于网络

    1.align-self

    单独在最近儿女上覆盖了 align-items 属性。

    2.order

    order:<integer>给子项排序。

    3.flex-grow

    概念了主轴上,孩子分配剩余空白区域的比例。

    4.flex-shrink

    概念减少比例,假如孩子的总宽度当先了容器宽度(主轴),然他们按百分比来压缩一定的升幅进而能够在容器中装下。

    5.flex-basis

    分配空白之前,子项的大幅,默许是 `auto`,也即是孩子本身的幅度。

    6.flex

    flex属性是flex-grow,flex-shrink和flex-basis的简写,容器的分配比例(推荐使用)

    常用:

    1)父盒子评释flex布局;(尽管未有设置布局方向,暗许水平布局)

    display:flex;

    宽容性写法:

    display: -webkit-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    安装主轴(水平方向)对齐情势

    justify-content:space-between;

    安装交叉轴(垂直方向)对齐情势

    align-items:center;

    2)子盒子

    父盒子分配比例:

    flex:1;

    包容性写法:

    .flex-1{ -webkit-box-flex:1;  -webkit-flex:1;  -ms-flex:1;  flex:1;}

    也能够直接设置width固定宽度,剩余盒子按百分比分配。

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:完全指南,Flexbox布局学习笔记

    关键词: