Flex布局教程,弹性布局Flex

By admin in 4858美高梅 on 2019年5月17日

作者: 阮一峰

弹性布局

一、Flex布局是怎样?

一、Flex 布局是何许?

网页布局(layout)是CSS的3个主要应用。

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm\_source=tuicool

Flex意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何多少个器皿都能够钦定为Flex布局。

Flex 是 Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的布帆无恙。

4858美高梅 1

1、Flex布局是怎么?

Flex是Flexible
博克斯的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

只顾:设为Flex布局今后,子成分的float、clear和vertical-align属性将失效。

其它二个容器都足以内定为 Flex 布局。

布局的历史观消除方案,基于盒状模型,依赖 display属性
+ position属性
+ float质量。它对于那三个特殊布局特别不方便人民群众,比方,笔直居中就不轻巧达成。

别的3个器皿都能够内定为Flex布局。

.box{ display: flex;}
行内成分也能够采取Flex布局。
.box{ display: inline-flex;}
Webkit内核的浏览器,必须抬高-webkit
前缀。
.box{ display: -webkit-flex; /* Safari */ display: flex;}
只顾,设为Flex布局今后,子成分的float、clear和vertical-align属性将失效。

4858美高梅,贰、基本概念

.box{display:flex;}

4858美高梅 2

贰、基本概念

采纳Flex布局的因素,称为Flex容器(flex
container),简称”容器”。它的享有子成分自动产生容器成员,称为Flex项目(flex
item),简称”项目”。
容器默许存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross
axis)。主轴的起先地点(与边框的交叉点)叫做main start
,停止地方叫做main end
;交叉轴的启幕地方叫做cross start
,停止地点叫做cross end

品类暗中认可沿主轴排列。单个项目占有的主轴空间叫做main size
,攻克的6续轴空间叫做cross size

动用Flex布局的成分,称为Flex成分,简称“容器”。它的具有子元素自动造成容器成员,称为Flex项目,简称“项目”。

行内元素也得以选拔 Flex 布局。

二零零六年,W3C提议了1种新的方案—-Flex布局,能够方便、完整、响应式地完成各类页面布局。近来,它曾经获得了全数浏览器的辅助,那意味,未来就会很安全地选用那项功用。

③、容器的质量

以下陆性情子设置在容器上。
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

容器暗中认可存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross
axis)。主轴的发端地方(与边框的交叉点)叫做 main start ,结束地点叫做
main end ;交叉轴的起始地点叫做 cross start ,结束地方叫做 cross end。

.box{display:inline-flex;}

4858美高梅 3

3.1 flex-direction属性

flex-direction
本性决定主轴的来头(即项目标排列方向)。
.box { flex-direction: row | row-reverse | column | column-reverse;}
它只怕有伍个值。
row
(暗许值):主轴为水平方向,源点在左端。
row-reverse
:主轴为水平方向,源点在右端。
column
:主轴为垂直方向,起源在上沿。
column-reverse
:主轴为垂直方向,起源在下沿。

品种私下认可沿主轴排列。单个项目占用的主轴空间叫做 main size
,侵夺的交叉轴空间叫做 cross size。

Webkit 内核的浏览器,必须抬高-webkit前缀。

Flex布局将成为现在布局的首推方案。本文介绍它的语法,下1篇作品交由常见布局的Flex写法。

3.2 flex-wrap属性

默许景况下,项目都排在一条线(又称”轴线”)上。flex-wrap
属性定义,若是一条轴线排不下,怎么样换行。
.box{ flex-wrap: nowrap | wrap | wrap-reverse;}

它或者取八个值。
(1)nowrap
(默认):不换行。
(2)wrap
:换行,第贰行在上头。
(3)wrap-reverse
:换行,第二行在俗世。

3、容器的性质

.box{display:-webkit-flex;/* Safari */display:flex;}

以下内容主要参照了上面两篇文章:A Complete Guide to
Flexbox 和 A
Visual Guide to CSS3 Flexbox
Properties。

3.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写情势,暗中认可值为row
nowrap。
.box { flex-flow: <flex-direction> || <flex-wrap>;}

以下陆个属性设置在容器上。

注意,设为 Flex
布局未来,子成分的float、clear和vertical-align属性将失效。

一、Flex布局是何等?

Flex是Flexible
Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的得心应手。

任何多个器皿都得以钦赐为Flex布局。

  1. .box{display: flex;}

 

行内成分也能够运用Flex布局。

  1. .box{display:inline-flex;}

 

Webkit内核的浏览器,必须抬高-webkit前缀。

  1. .box{
  2. display:-webkit-flex;/* Safari */
  3. display: flex;
  4. }

 

注意,设为Flex布局现在,子成分的floatclearvertical-alignFlex布局教程,弹性布局Flex。属性将失效。

3.4 justify-content属性

justify-content
特性定义了品种在主轴上的对齐方式。
.box { justify-content: flex-start | flex-end | center | space-between |
space-around;}
它可能取四个值,具体对齐格局与轴的主旋律有关。上面要是主轴为从左到右。
flex-start
(默认值):左对齐
flex-end
:右对齐
center
: 居中
space-between
:两端对齐,项目里面包车型地铁距离都分外。
space-around
:各个品种两侧的区间相等。所以,项目里面的距离比项目与边框的间隔大学一年级倍。

flex-direction           flex-wrap           flex-flow

justify-content         align-items        align-content

二、基本概念

二、基本概念

选择Flex布局的要素,称为Flex容器(flex
container),简称”容器”。它的富有子成分自动形成容器成员,称为Flex项目(flex
item),简称”项目”。

4858美高梅 4

容器暗许存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross
axis)。主轴的启幕地点(与边框的交叉点)叫做main start,结束地方叫做main end;交叉轴的初阶地点叫做cross start,甘休地方叫做cross end

品类私下认可沿主轴排列。单个项目攻克的主轴空间叫做main size,占有的接力轴空间叫做cross size

3.5 align-items属性

align-items
天性定义项目在陆续轴上怎么对齐。
.box { align-items: flex-start | flex-end | center | baseline |
stretch;}
它大概取伍个值。具体的对齐情势与交叉轴的势头有关,上边如果交叉轴从上到下。
flex-start
:交叉轴的起源对齐。
flex-end
:交叉轴的终点对齐。
center
:交叉轴的中式点心对齐。
baseline
: 项指标率先行文字的基线对齐。
stretch
(暗许值):假如项目未设置高度或设为auto,将占满整个容器的高度。

1.flex-direction属性

应用 Flex 布局的因素,称为 Flex 容器(flex
container),简称”容器”。它的装有子元素自动产生容器成员,称为 Flex
项目(flex item),简称”项目”。

3、容器的习性

以下陆个天性设置在容器上。

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

3.6 align-content属性

align-content
属性定义了多根轴线的对齐方式。借使项目唯有壹根轴线,该属性不起功用。
.box { align-content: flex-start | flex-end | center | space-between |
space-around | stretch;}
该属性或许取四个值。
flex-start
:与交叉轴的起源对齐。
flex-end
:与交叉轴的极端对齐。
center
:与交叉轴的中式点心对齐。
space-between
:与接力轴两端对齐,轴线之间的距离平均遍布。
space-around
:每根轴线两侧的区间都等于。所以,轴线之间的距离比轴线与边框的距离大学一年级倍。
stretch
(暗中同意值):轴线占满整个交叉轴。

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

4858美高梅 5

3.1 flex-direction属性

flex-direction性能决定主轴的矛头(即项指标排列方向)。

  1. .box {
  2. flex-direction: row | row-reverse | column | column-reverse;
  3. }

 

4858美高梅 6

它或许有四个值。

  • row(私下认可值):主轴为水平方向,源点在左端。
  • row-reverse:主轴为水平方向,源点在右端。
  • column:主轴为垂直方向,源点在上沿。
  • column-reverse:主轴为垂直方向,起源在下沿。

4、项指标习性

以下5个属性设置在项目上。
order

flex-grow(规定占的比重)

flex-shrink

flex-basis

flex

align-self

.box{

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

}

容器私下认可存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross
axis)。主轴的初叶地点(与边框的交叉点)叫做main start,甘休地点叫做main
end;交叉轴的发端地点叫做cross start,甘休地点叫做cross end。

3.2 flex-wrap属性

暗中同意情形下,项目都排在一条线(又称”轴线”)上。flex-wrap质量定义,即使一条轴线排不下,如何换行。

4858美高梅 7

  1. .box{
  2. flex-wrap: nowrap | wrap | wrap-reverse;
  3. }

 

它大概取八个值。

(1)nowrap(默认):不换行。

4858美高梅 8

(2)wrap:换行,第贰行在上头。

4858美高梅 9

(3)wrap-reverse:换行,第②行在世间。

4858美高梅 10

4.1 order属性

order
天性定义项目标排列顺序。数值越小,排列越靠前,默感觉0。
.item { order: <integer>;}

row(暗许值):主轴为水平方向,源点在左端

品种暗许沿主轴排列。单个项目攻克的主轴空间叫做main
size,侵夺的六续轴空间叫做cross size。

3.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap品质的简写格局,私下认可值为row nowrap

  1. .box {
  2. flex-flow:<flex-direction>||<flex-wrap>;
  3. }

 

4.2 flex-grow属性

flex-grow
属性定义项目的加大比例,默感到0
,即只要存在剩余空间,也不放大。
.item { flex-grow: <number>; /* default 0 */}
要是全部项指标flex-grow
个性都为1,则它们将等分剩余空间(假设某个话)。即使二个品种的flex-grow
属性为贰,其余项目都为一,则前者攻陷的剩余空间将比其余项多一倍。

row-reverse: 主轴为水平方向,源点在右端

3、容器的个性

3.4 justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

  1. .box {
  2. justify-content: flex-start | flex-end | center | space-between | space-around;
  3. }

 

4858美高梅 11

它或者取5个值,具体对齐方式与轴的动向有关。下面假如主轴为从左到右。

  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-between:两端对齐,项目里面包车型地铁间隔都等于。
  • space-around:各个连串两侧的距离相等。所以,项目里面的间隔比项目与边框的间距大学一年级倍。

4.3 flex-shrink属性

flex-shrink
属性定义了等级次序的紧缩比例,默以为一,即假使空间不足,该类型将减弱。
.item { flex-shrink: <number>; /* default 1 */}

假诺全体项目标flex-shrink
品质都为一,当空间不足时,都将等比例收缩。若是3个体系的flex-shrink
天性为0,别的项目都为1,则空间不足时,前者不裁减。
负值对该属性无效。

column: 主轴为垂直方向,起源在上沿

以下陆天性格设置在容器上。

3.5 align-items属性

align-items质量定义项目在交叉轴上怎样对齐。

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

 

4858美高梅 12

它或然取四个值。具体的对齐方式与交叉轴的大方向有关,上面倘使交叉轴从上到下。

  • flex-start:交叉轴的起源对齐。
  • flex-end:交叉轴的巅峰对齐。
  • center:交叉轴的中式点心对齐。
  • baseline: 项目标首先行文字的基线对齐。
  • stretch(暗许值):若是项目未设置中度或设为auto,将占满整个容器的莫斯中国科学技术大学学。

4.4 flex-basis属性

flex-basis
品质定义了在分配多余空间在此之前,项目侵夺的主轴空间(main
size)。浏览器依据那特性子,总结主轴是或不是有结余空间。它的私下认可值为auto
,即项指标自然大小。
.item { flex-basis: <length> | auto; /* default auto */}

它能够设为跟width
或height
质量同样的值(举例350px),则项目将占用一定空间。

column-reverse: 主轴为垂直方向,起源在下沿

flex-direction

3.6 align-content属性

align-content性子定义了多根轴线的对齐形式。倘若项目只有壹根轴线,该属性不起功效。

  1. .box {
  2. align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  3. }

 

4858美高梅 13

该属性可能取多少个值。

  • flex-start:与交叉轴的源点对齐。
  • flex-end:与交叉轴的极端对齐。
  • center:与交叉轴的中式点心对齐。
  • space-between:与接力轴两端对齐,轴线之间的距离平均布满。
  • space-around:每根轴线两侧的区间都等于。所以,轴线之间的距离比轴线与边框的距离大学一年级倍。
  • stretch(默许值):轴线占满整个交叉轴。

4.5 flex属性

flex
属性是flex-grow
, flex-shrink
和 flex-basis
的简写,暗中认可值为0 1 auto
。后三个天性可选。
.item { flex: none | [ <‘flex-grow’> <‘flex-shrink’>? ||
<‘flex-basis’> ]}

该属性有八个快捷值:auto(壹 一 auto) 和 none (0 0 auto)。
提出事先选择那天性子,而不是单独写八个分别的属性,因为浏览器会推算相关值。

2.flex-wrap属性

flex-wrap

四、项指标性质

以下5个本性设置在档次上。

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

4.6 align-self属性

align-self
质量允许单个项目有与别的种类区别的对齐形式,可覆盖align-items
质量。私下认可值为auto
,表示继续父成分的align-items
性格,借使未有父成分,则如出1辙stretch

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

该属性或许取陆个值,除了auto,别的都与align-items属性完全一致。

暗许情形下,项目都排在一条线(又称“轴线”)上。flex-wrap属性定义,借使一条轴线排不下,怎么样换行。

flex-flow

4.1 order属性

order本性定义项目标排列顺序。数值越小,排列越靠前,默以为0。

  1. .item {order:<integer>;}

 

4858美高梅 14

色子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    body{
        display: flex;
        justify-content: space-around;
    }
    .first-face{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .second-face{
        display: flex;
        justify-content: space-between;
    }
    .second-face .pip:nth-child(2){
        align-self: flex-end;
    }
    .third-face{
        display: flex;
        justify-content: space-between;
    }
    .third-face .pip:nth-child(2){
        align-self: center;
    }
    .third-face .pip:nth-child(3){
        align-self: flex-end;
    }
    .fourth-face{
        display: flex;
        justify-content: space-between;
    }
    .fourth-face .left,.fourth-face .right{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .fifth-face{
        display: flex;
        justify-content: space-between;
    }
    .fifth-face .left,.fifth-face .right{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .fifth-face .center{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .sixth-face{
        display: flex;
        justify-content: space-between;
    }
    .sixth-face .left,.sixth-face .right{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    [class$="face"]{
        margin: 16px;
        padding: 4px;
        background-color: #e7e7e7;
        width: 104px;
        height: 104px;
        border-radius: 10%;
        box-shadow:
            inset 0 5px white, 
            inset 0 -5px #bbb,
            inset 5px 0 #d7d7d7, 
            inset -5px 0 #d7d7d7;
    }
    .pip{
        display: block;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin: 4px;
        background-color: #333;
        box-shadow: inset 0 3px #111, inset 0 -3px #555;
    }
    </style>
</head>
<body>
    <div class="first-face">

    </div>
    <div class="second-face">


    </div>
    <div class="third-face">



    </div>
    <div class="fourth-face">
        <div class="left">


        </div>
        <div class="right">


        </div>
    </div>
    <div class="fifth-face">
        <div class="left">


        </div>
        <div class="center">

        </div>
        <div class="right">


        </div>
    </div>
    <div class="sixth-face">
        <div class="left">



        </div>
        <div class="right">



        </div>
    </div>
</body>
</html>

.box{

flex-wrap: nowrap | wrap | wrap-reverse;

}

justify-content

4.2 flex-grow属性

flex-grow属性定义项指标推广比例,默以为0,即即使存在剩余空间,也不放大。

  1. .item {
  2. flex-grow:<number>;/* default 0 */
  3. }

 

4858美高梅 15

假诺全部项目标flex-grow质量都为一,则它们将等分剩余空间(如果部分话)。假若多个类别的flex-grow属性为二,别的品种都为一,则前者私吞的盈余空间将比别的项多1倍。

nowrap (默认):不换行

align-items

4.3 flex-shrink属性

flex-shrink性格定义了品种的减少比例,默以为一,即若是空间不足,该项目将压缩。

  1. .item {
  2. flex-shrink:<number>;/* default 1 */
  3. }

 

4858美高梅 16

假使全数品种的flex-shrink天性都为一,当空间不足时,都将等比例收缩。要是3个类别的flex-shrink属性为0,别的种类都为壹,则空间不足时,前者不减弱。

负值对该属性无效。

wrap: 换行,第三行在上面

align-content

4.4 flex-basis属性

flex-basis属性定义了在分配多余空间此前,项目占用的主轴空间(main
size)。浏览器依照那天性情,总结主轴是还是不是有多余空间。它的暗中同意值为auto,即项指标自然大小。

  1. .item {
  2. flex-basis:<length>|auto;/* default auto */
  3. }

 

它能够设为跟widthheight品质同样的值(比方350px),则项目将占用一定空间。

wrap-reverse: 换行,第三行在江湖

3.1 flex-direction属性

4.5 flex属性

flex属性是flex-growflex-shrink 和 flex-basis的简写,私下认可值为0 1 auto。后五个属性可选。

  1. .item {
  2. flex: none |[<‘flex-grow’><‘flex-shrink’>?||<‘flex-basis’>]
  3. }

 

该属性有五个飞快值:auto (1 1 auto) 和 none (0 0 auto)。

提出优先选取那性格子,而不是独立写多少个分其他性格,因为浏览器会推算相关值。

3.flex-flow

flex-direction属性决定主轴的趋势(即项目标排列方向)。

4.6 align-self属性

align-self性格允许单个项目有与此外门类区别的对齐情势,可覆盖align-items特性。暗中同意值为auto,表示继续父成分的align-items属性,若是未有父成分,则同样stretch

  1. .item {
  2. align-self:auto| flex-start | flex-end | center | baseline | stretch;
  3. }

 

4858美高梅 17

该属性恐怕取四个值,除了auto,别的都与align-items属性完全壹致。

flex-flow属性是flex-direction属性和flex-wrap属性的简写情势,暗中同意值为 row
nowrap。

.box {flex-direction:row | row-reverse | column | column-reverse;}

Flex 参谋手册

Flex
布局参考手册和实例

 

 

.box{

flex-flow: <flex-direction> || <flex-wrap>;

}

4858美高梅 18

4.justify-content属性

它或者有五个值。

justify-content 属性定义了种类在主轴上的对齐方式。

row(私下认可值):主轴为水平方向,源点在左端。

.box{

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

}

row-reverse:主轴为水平方向,起源在右端。

flex-start(默认值):左对齐

column:主轴为垂直方向,起源在上沿。

flex-end:右对齐

column-reverse:主轴为垂直方向,起源在下沿。

center: 居中

3.2 flex-wrap属性

space-between:两端对齐,项目里面的距离都十分

暗中同意情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,假设一条轴线排不下,如何换行。

space-around :
每一个体系两侧的间隔相等。所以项目里面包车型大巴间隔比项目与边框的间距大学一年级倍

4858美高梅 19

5.align-items属性

.box{flex-wrap:nowrap | wrap | wrap-reverse;}

align-items属性定义项目在陆续轴上怎样对齐。

它大概取三个值。

.box{

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

}

(1)nowrap(默认):不换行。

flex-start : 交叉轴的起源对齐

4858美高梅 20

flex-end : 交叉轴的巅峰对齐

(二)wrap:换行,第三行在上头。

center : 交叉轴的中点对齐

4858美高梅 21

baseline : 项目的率先行文字基线对齐

(三)wrap-reverse:换行,第贰行在人世。

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

4858美高梅 22

6.align-content属性

3.3 flex-flow

align-content属性定义了多根轴线的对齐格局。如若项目唯有一根轴线,该属性不起成效。

flex-flow属性是flex-direction属性和flex-wrap属性的简写情势,暗中同意值为row
nowrap。

.box{

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

}

.box {flex-flow: ||;}

flex-start :与交叉轴的源点对齐

3.4 justify-content属性

flex-end: 与交叉轴的顶点对齐

justify-content属性定义了体系在主轴上的对齐格局。

center : 与交叉轴的中式点心对齐

.box {justify-content:flex-start | flex-end | center | space-between |
space-around;}

space-between: 与接力轴两端对齐,轴线之间的间隔平均布满

4858美高梅 23

space-around:每根轴线两侧的距离都极度。所以轴线之间的距离比轴线与边框的间隔大学一年级倍

它大概取五个值,具体对齐格局与轴的大方向有关。下边假诺主轴为从左到右。

stretch(暗中同意值):轴线占满整个交叉轴。

flex-start(默认值):左对齐

四、项指标质量

flex-end:右对齐

以下六特性子设置在类型上。

center: 居中

order              flex-grow           flex-shrink

flex-basis       flex                    align-self

space-between:两端对齐,项目里面包车型地铁区间都等于。

1.order属性

space-around:种种项目两侧的间距相等。所以,项目里面包车型地铁区间比项目与边框的区间大学一年级倍。

order属性定义项指标排列顺序。数值越小,排列越靠前,默以为0.

3.5 align-items属性

.item{

  order: <integer>;

}

align-items属性定义项目在交叉轴上怎么样对齐。

2.flex-grow属性

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

flex-grow属性定义项指标推广比例,默以为0,即假如存在剩余空间,也不放大。

4858美高梅 24

.item{

它大概取六个值。具体的对齐格局与交叉轴的样子有关,下边假诺交叉轴从上到下。

flex-grow: <number>;

flex-start:交叉轴的起源对齐。

}

flex-end:交叉轴的极端对齐。

假使持有类型的flex-grow属性都为壹,则它们将等分剩余空间(假诺部分话)。借使二个体系的flex-grow属性为二,其余品种都为1,则前者攻下的剩余空间将比其余项多一倍。

center:交叉轴的中式点心对齐。

3.flex-shrink属性

baseline: 项目标率先行文字的基线对齐。

flex-shrink属性定义了档案的次序的紧缩比例,默以为壹,即只要空间不足,该类型将减弱。

stretch(暗中认可值):若是项目未设置中度或设为auto,将占满整个容器的冲天。

.item{

flex-shrink:<number>;

}

3.6 align-content属性

若果具备项指标flex-shrink属性都为壹,当空间欠缺时,都将等比例缩短。即使三个品种的flex-shrink属性为0,别的连串都为1,则空间欠缺时,前者不收缩。负值对该属性无效。

align-content属性定义了多根轴线的对齐方式。假使项目唯有一根轴线,该属性不起成效。

4.flex-basis属性

.box {align-content:flex-start | flex-end | center | space-between |
space-around | stretch;}

flex-basis属性定义了在分配多余空间从前,项目占用的主轴空间(main
size)。浏览器依照这本性子,总括主轴是不是有结余空间。它的私下认可值为auto,即项目标当然大小。

4858美高梅 25

.item{

flex-basis: <length> | auto;

}

该属性恐怕取陆个值。

它能够设为跟width或height属性同样的值(比方350px),则项目将占用一定空间。

flex-start:与交叉轴的起源对齐。

5.flex属性

flex-end:与交叉轴的顶点对齐。

flex属性是flex-grow,flex-shrink和flex-basis的简写,暗中同意值为0 一 auto 。
后七个本性可选。

center:与交叉轴的中式点心对齐。

.item{

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

}

space-between:与接力轴两端对齐,轴线之间的间隔平均布满。

该属性有五个快速值: auto(壹 1 auto)和 none(0 0 auto)。

space-around:每根轴线两侧的距离都非凡。所以,轴线之间的间隔比轴线与边框的间隔大1倍。

建议事先采纳那么些本性,而不是单独写四个分其他属性,因为浏览器会推算相关值。

stretch(暗中同意值):轴线占满整个交叉轴。

6.align-self属性

四、项指标属性

align-self属性允许单个项目有与其它品种不均等的对齐情势,可覆盖align-items属性。暗许值为auto,表示继续父元素的align-items属性,若是未有父成分,则如出一辙stretch。

以下5个属性设置在类型上。

.item{

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

}

order

该属性恐怕取四个值,除了auto,别的都与align-items属性完全一致。

flex-grow

链接:Flex布局教程:语法篇

flex-shrink

flex-basis

flex

align-self

4.1 order属性

order属性定义项指标排列顺序。数值越小,排列越靠前,默感觉0。

.item {order:;}

4858美高梅 26

4.2 flex-grow属性

flex-grow属性定义项指标拓宽比例,默以为0,即假若存在剩余空间,也不放大。

.item {flex-grow:;/* default 0 */}

4858美高梅 27

举个例子全部品种的flex-grow属性都为一,则它们将等分剩余空间(假诺有的话)。假使二个档期的顺序的flex-grow属性为贰,别的类型都为一,则前者攻下的剩余空间将比别的项多一倍。

4.3 flex-shrink属性

flex-shrink属性定义了类别的减弱比例,默感觉一,即只要空间欠缺,该品种将缩短。

.item {flex-shrink:;/* default 1 */}

4858美高梅 28

假定具备类型的flex-shrink属性都为一,当空间欠缺时,都将等比例收缩。借使三个门类的flex-shrink属性为0,其余品类都为一,则空间欠缺时,前者不减弱。

负值对该属性无效。

4.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前,项目占有的主轴空间(main
size)。浏览器依据那本性情,总计主轴是还是不是有盈余空间。它的暗许值为auto,即项指标自然大小。

.item {flex-basis: | auto;/* default auto */}

它能够设为跟width或height属性一样的值(比如350px),则项目将占用一定空间。

4.5 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默许值为0 一auto。后多个属性可选。

.item {flex:none | [<‘flex-grow’><‘flex-shrink’>?
||<‘flex-basis’> ]}

该属性有五个神速值:auto (1 壹 auto) 和 none (0 0 auto)。

建议事先利用这些特性,而不是独立写八个分别的习性,因为浏览器会推算相关值。

4.6 align-self属性

align-self属性允许单个项目有与别的品种不等同的对齐格局,可覆盖align-items属性。暗许值为auto,表示继续父成分的align-items属性,假诺未有父成分,则如出一辙stretch。

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

4858美高梅 29

该属性大概取陆个值,除了auto,其他都与align-items属性完全壹致。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有