Flexbox布局学习笔记,css之弹性布局

我对Flexbox布局模式的理解

2016/06/18 · CSS · Flexbox

本文作者: 伯乐在线 - Tw93 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

Flexbox,一种CSS3的布局模式,也叫做弹性盒子模型,用来为盒装模型提供最大的灵活性。首先举一个栗子,之前我们是这样实现一个div盒子水平垂直居中的。在知道对象高宽的情况下,对居中元素绝对百分比定位,然后通过margin偏移的方式来实现。

<style> .container{ width: 600px; height: 400px; border: 1px solid #000; position: relative; } .box{ width: 200px; height: 100px; border: 1px solid #000; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top:-50px; } </style> <div class="container"> <div class="box"></div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
    .container{
        width: 600px;
        height: 400px;
        border: 1px solid #000;
        position: relative;
    }
    .box{
        width: 200px;
        height: 100px;
        border: 1px solid #000;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top:-50px;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

假如使用了flex后,实现起来就简单了,而且不需要自己去算,也不需要绝对定位,只需要通过对伸缩容器定义两个属性,justify-content定义伸缩项目沿着主轴线的对齐方式为center, align-items定义伸缩项目在侧轴(垂直于主轴)的对齐方式为center,具体如下:

<style> .container{ width: 600px; height: 400px; border: 1px solid #000; display: flex; justify-content:center; align-items:center; } .box{ width: 200px; //宽度可以为任意 height: 100px; //高度可以为任意 border: 1px solid #000; } </style> <div class="container"> <div class="box"></div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
.container{
    width: 600px;
    height: 400px;
    border: 1px solid #000;
    display: flex;
    justify-content:center;
    align-items:center;
}
.box{
    width: 200px;  //宽度可以为任意
    height: 100px; //高度可以为任意
    border: 1px solid #000;
}
</style>
<div class="container">
    <div class="box"></div>
</div>

其实Flexbox的优秀特性并不是这一些,首先来一张它的属性图吧~

图片 1

首先我们来分析下这一张图,从第一个子节点可以看到Flexbox由Flex容器和Flex项目组成,容器即父元素,项目即子元素。他们之间的一些关系可以这样来表示:

图片 2

这张图可以在接下来的属性分析中用到。

  • flex主要用于响应式页面设计,兼容各种宽度的设备
    flex布局写法:

flex布局有主轴和侧轴两个轴(main axis和cross axis),这两个轴是可以互换的。

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布局,因为这种布局方式很灵活。容器的子元素可以任意方向进行排列。

Flex容器

默认情况下,主轴是整个容器的宽,侧轴是高。

Flexbox模型和术语:

flex布局模型不同于块和内联模型布局(计算依赖于块和内联的流方向),flex布局依赖于flex directions。即:Flexbox是布局模块,而不是一个简单的属性,它包含父元素(flex container)子元素(flex items)的属性。

图片 3

Flex

图片 4

Flexbox

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

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

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

flex item弹性项目:弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。

display:flex

当我们使用flexbox布局时候,需要先给父容器的display值定位flex(块级)或者inline-flex(行内级)。

当使用了这个值以后,伸缩容器会为内容建立新的伸缩格式化上下文(FFC),它的上下文展示效果和BFC根元素相同(BFC特性:浮动不会闯入伸缩容器,且伸缩容器的边界不会与其内容边界叠加)。

伸缩容器不是块容器,因此有些设计用来控制块布局的属性,在伸缩布局中不适用,特别是多栏(column),float,clear,vertical-align这些属性。

div{
display:flex;
}

flex容器的所有属性,即父容器

Flexbox使用示例:

水平竖直居中:

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

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

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

flex-direction

[flex-direction]属性用来控制上图中伸缩容器中主轴的方向,同时也决定了伸缩项目的方向。

  • flex-direction:row;也是默认值,即主轴的方向和正常的方向一样,从左到右排列。
  • flex-direction:row-reverse;和row的方向相反,从右到左排列。
  • flex-direction:column;从上到下排列。
  • flex-direction:column-reverse;从下到上排列。 以上只针对ltr书写方式,对于rtl正好相反了。

网页展示效果如下:

图片 5

行内元素flex布局:

flex-direction:设置主轴为容器的宽或高,侧轴与之相应的改变,控制flex项目的排序

主轴和侧轴是可以通过flex-direction属性来定义的。对应的属性如下:

flex-direction : row ;   //默认值,主轴为宽,从左往右

flex-direction : row-reverse ;  //主轴为宽 , 从右往左,包括div的排列顺序也会倒置,从右往左排起

flex-direction : column ;   //主轴为高,侧轴为宽,从上往下

flex-direction : column ;   //主轴为高,侧轴为宽,从下往上,div排列顺序也倒置

Flexbox属性:

1. dispaly(flex container)

display: other values | flex | inline-flex;

2. flex-direction(flex container)

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

主要用来创建主轴,从而定义伸缩项目放置在伸缩容器的方向。

图片 6

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;

图片 7

justify-content

7. align-content(flex container)

用来调准伸缩行在伸缩容器里的对齐方式。

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

图片 8

align-content

8. align-items(flex container)

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

图片 9

align-items

9. align-self(flex items)

用来在单独的伸缩项目上覆写默认的对齐方式。

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

图片 10

align-self

10. flex-grow(flex items)

根据需要来定义伸缩项目的扩展能力。接受一个不带单位的值作为一个比例。

主要用来决定伸缩容器剩余空间按比例应该扩展多少空间。

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

如果所有伸缩项目该属性设置了1,那么每个项目就设置为一个大小相等的剩余空间;如果给其中一个伸缩项目设置为2,那么这个项目所占的剩余空间是其他项目所占剩余空间的2倍。

图片 11

flex-grow

11. flex-shrink(flex items)

根据需要来定义伸缩项目收缩的能力。

12. flex-basis(flex items)

用来设置伸缩基准值,剩余的空间按比例进行伸缩。

13. flex(flex items)

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

-

flex-warp

[flex-wrap]属性控制伸缩容器是单行还是多行,也决定了侧轴方向(新的一行的堆放方向)。

  • flex-wrap:nowrap;伸缩容器单行显示,默认值;
  • flex-wrap:wrap;伸缩容器多行显示;伸缩项目每一行的排列顺序由上到下依次。
  • flex-wrap:wrap-reverse;伸缩容器多行显示,但是伸缩项目每一行的排列顺序由下到上依次排列。

网页效果见图;

图片 12

span{
display:inline-flex;
}

justify-content : 主轴对齐(针对主轴),控制flex项目的对齐形式

先要清楚设定的主轴是什么,再来设置这个属性,属性值如下:

justify-content : flex-start   //默认值,按照flex-direction设置的主轴顺序对齐排列

justify-content : flex-end  //按照flex-direction设置的主轴顺序的结尾进行对齐排列

justify-content : center  //中间点向两边延伸对齐

justify-content : space-between //在主轴上,即布局方式的两端作为同时开始的位置,向中间排列,每个子元素之间的间隔相等

justify-content : space-around //每个子元素两边都拥有相等间隔,且子元素彼此的间隔不会重叠,所以子元素之间的间隔比子元素与边框的间隔大一倍

flex-flow

[flex-flow]属性为flex-direction(主轴方向)和flex-wrap(侧轴方向)的缩写,两个属性决定了伸缩容器的主轴与侧轴。

  • flex-flow:[flex-direction][flex-wrap];默认值为row nowrap;

举两个栗子:

  • flex-flow:row;也是默认值;主轴是行内方向,单行显示,不换行;
  • flex-flow:row-reverse wrap;主轴和行内方向相反,从右到左,项目每一行由上到下排列(侧轴)。

网页效果如下:

图片 13

这里大家可以多自己去试试不同的组合。

webkit内核的浏览器,必须加上-webkit-前缀

align-items :侧轴对齐,和 justify-content 主轴对齐的原理一样

先要清楚设定的侧轴是什么,再来设置这个属性,属性值如下:

align-items : flex-start ;   //默认值  

align-items : flex-end ; 

align-items : center;   //侧轴上居中对齐

align-items : baseline ;  //伸缩flex项目与它们的基线对齐,即第一行文字的基线对齐

align-items : stretch ;  //将伸缩flex项目从侧轴起点拉伸到侧轴终点

justify-content

[justify-content]用于定义伸缩项目在主轴上面的的对齐方式,当一行上的所有伸缩项目都不能伸缩或可伸缩但是已经达到其最大长度时,这一属性才会对多余的空间进行分配。当项目溢出某一行时,这一属性也会在项目的对齐上施加一些控制。

  • justify-content:flex-start;伸缩项目向主轴的起始位置开始对齐,后面的每元素紧挨着前一个元素对齐。
  • justify-content:flex-end;伸缩项目向主轴的结束位置对齐,前面的每一个元素紧挨着后一个元素对齐。
  • justify-content:center;伸缩项目相互对齐并在主轴上面处于居中,并且第一个元素到主轴起点的距离等于最后一个元素到主轴终点的位置。以上3中都是“捆绑”在一个分别靠左、靠右、居中对齐。
  • justify-content:space-between;伸缩项目平均的分配在主轴上面,并且第一个元素和主轴的起点紧挨,最后一个元素和主轴上终点紧挨,中间剩下的伸缩项目在确保两两间隔相等的情况下进行平分。
  • justify-content:space-around;伸缩项目平均的分布在主轴上面,并且第一个元素到主轴起点距离和最后一个元素到主轴终点的距离相等,且等于中间元素两两的间距的一半。完美的平均分配,这个布局在阿里系中很常见。

还是看demo理解起来快一点:

图片 14

图片 15

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

flex-wrap : 伸缩flex项目在主轴上的换行方式

每个伸缩容器都有且只有一个伸缩行。使用flex-wrap你可以为伸缩容器创建多个伸缩行。

对应的属性值如下:

flex-wrap : nowrap  //不换行  (默认值)

flex-wrap : wrap  //换行,第一行在上方(这里指的主轴为宽时,当为高时,左右之分)

flex-wrap : wrap-reverse  // 换行,第一行在下方(这里指的主轴为宽时,当为高时,左右之分)

align-items

[align-items]用来定义伸缩项目在侧轴的对齐方式,这类似于[justify-content]属性,但是是另一个方向。(flex-directon和flex-wrap是一对,justify-content和align-items是一对,前者分别定义主轴和侧轴的方向,后者分别定义主轴和侧轴中项目的对齐方式)。

  • align-items:flex-start;伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起点的边。
  • align-items:flex-end;伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边。
  • align-items:center;伸缩项目的外边距在侧轴上居中放置。
  • align-items:baseline;如果伸缩项目的行内轴与侧轴为同一条,则该值与[flex-start]等效。 其它情况下,该值将参与基线对齐。
  • align-items:stretch;伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。

下面demo只展示center和stretch的栗子,其他几个可以参考flex-start和flex-end那样。

图片 16

注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效

  • flex布局的六个属性
    | flex-direction | flex-wrap | flex-flow | justify-content | align-items| align-content |

flex-direction

[flex-direction]属性用来控制上图中伸缩容器中主轴的方向,同时也决定了伸缩项目的方向。

  • flex-direction:row;也是默认值,即主轴的方向和正常的方向一样,从左到右排列。
  • flex-direction:row-reverse;和row的方向相反,从右到左排列。
  • flex-direction:column;从上到下排列。
  • flex-direction:column-reverse;从下到上排列。 以上只针对ltr书写方式,对于rtl正好相反了。

网页展示效果如下:

图片 17

主轴方向示意图

flex-warp

[flex-wrap]属性控制伸缩容器是单行还是多行,也决定了侧轴方向(新的一行的堆放方向)。

  • flex-wrap:nowrap;伸缩容器单行显示,默认值;
  • flex-wrap:wrap;伸缩容器多行显示;伸缩项目每一行的排列顺序由上到下依次。
  • flex-wrap:wrap-reverse;伸缩容器多行显示,但是伸缩项目每一行的排列顺序由下到上依次排列。

网页效果见图:

图片 18

如何换行示意图

flex-flow

[flex-flow]属性为flex-direction(主轴方向)和flex-wrap(侧轴方向)的缩写,两个属性决定了伸缩容器的主轴与侧轴。

  • flex-flow:[flex-direction][flex-wrap];默认值为row nowrap;

举两个栗子:

  1. flex-flow:row;也是默认值;主轴是行内方向,单行显示,不换行;
  2. flex-flow:row-reverse wrap;主轴和行内方向相反,从右到左,项目每一行由上到下排列(侧轴)。

网页效果如下:

图片 19

主轴方向与换行示意图

justify-content

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

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

图片 20

主轴对齐方式示意图

align-items

[align-items]用来定义伸缩项目在侧轴的对齐方式,这类似于[justify-content]属性,但是是另一个方向。(flex-directon和flex-wrap是一对,justify-content和align-items是一对,前者分别定义主轴和侧轴的方向,后者分别定义主轴和侧轴中项目的对齐方式)。

  • align-items:flex-start;伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起点的边。
  • align-items:flex-end;伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边。
  • align-items:center;伸缩项目的外边距在侧轴上居中放置。
  • align-items:baseline;如果伸缩项目的行内轴与侧轴为同一条,则该值与[flex-start]等效。 其它情况下,该值将参与基线对齐。
  • align-items:stretch;伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。
![](https://upload-images.jianshu.io/upload_images/8887507-00093565e3b25cd7)

侧轴对齐方式示意图

align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
相当于同时在主轴和侧轴上设置对齐方式

图片 21

主轴 侧轴

flex项目

终于写到关于伸缩项目的相关属性了,主要是3个,order,flex(flex-grow,flex-shrink,flex-basis的组合),align-self;用来比较多的是前两个。

order

有一种用法比较多,想设置一组中有两个元素一个排第一,另外一个排最后,主需要将第一个的order:-1;另一个为order:0;这样就好了。

譬如我们想控制一个container中有4个box,想box4为一个显示,box1为最后一个显示。只需要 这样

<style>
.container{
        display: flex;
    }
    .box1{
        order:1;
    }
    .box4{
        order:-1;
    }
</style>
<div class="container">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
</div>

图片 22

排序示意图

flex

[flex]属性可以用来指定可伸缩长度的部件,是flex-grow(扩展比例),flow-shrink(收缩比例),flex-basis(伸缩基准值)这个三个属性的缩写写法,建议大家采用缩写的方式而不是单独来使用这3个属性。

  • flex:none | [ <'flex-grow'> ?<'flew-shrink'> || <'flow-basis'>]
    // flex-grow是必须得flex-shrink和flow-basis是可选的

  • flex-grow:;其中number作为扩展比例,没有单位,初始值是0,主要用来决定伸缩容器剩余空间按比例应扩展多少空间。

  • flex-grow:;其中number作为收缩比例,没有单位,初始值是1,也就是剩余空间是负值的时候此伸缩项目相对于伸缩容器里其他伸缩项目能收缩的空间比例,在收缩的时候收缩比率会以[flex-basis]伸缩基准值加权。

  • flex-basis:|auto;默认是auto也就是根据可伸缩比率计算出剩余空间的分布之前,伸缩项目主轴长度的起始数值。若在「flex」缩写省略了此部件,则「flex-basis」的指定值是长度零。

图片 23

分配多余空间

align-self

[align-self]用来在单独的伸缩项目上覆写默认的对齐方式,这个属性是用来覆盖伸缩容器属性align-items对每一行的对齐方式。也就是说在默认的情况下这两个值是相等的。

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

align-content : 堆栈伸缩行,对齐的不是伸缩flex项目,而是整个主轴行

align-content会更改flex-wrap的行为。它和align-items相似,但是不是对齐伸缩项目,它对齐的是伸缩行。

对应的属性值:

align-content : stretch

align-content :flex-start

align-content :flex-end

align-content :center

align-content :space-between

align-content :space-around

align-content

[align-content]属性可以用来调准伸缩行在伸缩容器里的对齐方式,这与调准伸缩项目在主轴上对齐方式的[justify-content]属性类似。只不过这里元素是以一行为单位。请注意本属性在只有一行的伸缩容器上没有效果。当使用flex-wrap:wrap时候多行效果就出来了。

JavaScript

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

1
align-content: flex-start || flex-end || center || space-between || space-around || stretch;
  • align-content: stretch;默认值,各行将会伸展以占用剩余的空间。
  • 其他可以参考[justify-content]用法。

具体图片来至w3.org官方文档;

图片 24

太麻烦。写不下去了,摔。

flex-flow :设置主轴与换行

flex-flow: [flex-direction] [flex-wrap]

Flex项目

终于写到关于伸缩项目的相关属性了,主要是3个,order,flex(flex-grow,flex-shrink,flex-basis的组合),align-self;用来比较多的是前两个。

order

有一种用法比较多,想设置一组中有两个元素一个排第一,另外一个排最后,主需要将第一个的order:-1;另一个为order:0;这样就好了。

譬如我们想控制一个container中有4个box,想box4为一个显示,box1为最后一个显示。只需要 这样

<style> .container{ display: flex; } .box1{ order:1; } .box4{ order:-1; } </style> <div class="container"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
.container{
        display: flex;
    }
    .box1{
        order:1;
    }
    .box4{
        order:-1;
    }
</style>
<div class="container">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
</div>

显示效果就这样了:

图片 25

flex项目的所有属性,即子元素的属性

flex

[flex]属性可以用来指定可伸缩长度的部件,是flex-grow(扩展比例),flow-shrink(收缩比例),flex-basis(伸缩基准值)这个三个属性的缩写写法,建议大家采用缩写的方式而不是单独来使用这3个属性。

JavaScript

flex:none | [ <'flex-grow'> ?<'flew-shrink'> || <'flow-basis'>] // flex-grow是必须得flex-shrink和flow-basis是可选的

1
2
flex:none | [ <'flex-grow'> ?<'flew-shrink'> || <'flow-basis'>]
// flex-grow是必须得flex-shrink和flow-basis是可选的
  • flex-grow:;其中number作为扩展比例,没有单位,初始值是0,主要用来决定伸缩容器剩余空间按比例应扩展多少空间。
  • flex-grow:;其中number作为收缩比例,没有单位,初始值是1,也就是剩余空间是负值的时候此伸缩项目相对于伸缩容器里其他伸缩项目能收缩的空间比例,在收缩的时候收缩比率会以[flex-basis]伸缩基准值加权。
  • flex-basis:|auto;默认是auto也就是根据可伸缩比率计算出剩余空间的分布之前,伸缩项目主轴长度的起始数值。若在「flex」缩写省略了此部件,则「flex-basis」的指定值是长度零。

flex-basis用图来表示就是这样:

图片 26

order : 设置flex项目的显示顺序

设置伸缩项目的 order 可以调整它们渲染时的顺序

order : 0 ; //默认值为0, 数值越小,越靠前,可以设置负数

align-self

[align-self]用来在单独的伸缩项目上覆写默认的对齐方式,这个属性是用来覆盖伸缩容器属性align-items对每一行的对齐方式。也就是说在默认的情况下这两个值是相等的。

JavaScript

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

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

align-self : 侧轴对齐

允许单个子元素与其他子元素不一样的对齐方式,可以覆盖父元素设定的align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同stretch(填充满)

align-self : stretch ; //填充满真个侧轴

align-self : flex-start ;   //以侧轴的开始头对齐

align-self : flex-end ; //以侧轴的末尾对齐

align-self : center ;  //以侧轴的中点对齐

align-self  : baseline ;  //伸缩flex项目与它们的基线对齐,即第一行文字的基线对齐

图片 27

align-self各属性值的示例图

我的看法

讲了这么多他们的使用,我们来看一看flexbox布局的兼容性。

具体大家可以见这个网站:caniuse

图片 28

在PC端其实很乐观了,基本上主流的浏览器都已经兼容了flex的使用,但是到了移动端就不是那么好了,特别是国内浏览器,考虑到uc浏览器占了大头,但是uc从图中看到只兼容flex最老的一个版本,也就是2009年的版本,即display:box;很多现在flex的优秀特性到了它上面都不兼容了,所以建议大家在使用的时候,假如2009版本可以满足开发要求的话,还是去使用2009版本,这样风险更小。

但是假如想兼容多个浏览器,可以采用优雅降级的方式来使用,这里推荐一个scss的sass-flex-mixin,这样就可以使用最新的写法,并且兼容大部分浏览器了。

相信flexbox布局在以后的移动端会用得越来越多的。

1 赞 13 收藏 评论

flex-grow  //定义子元素的放大比例,默认为0(不放大),前提是父容器有                     空余空间

关于作者:Tw93

图片 29

简介还没来得及写 :) 个人主页 · 我的文章 · 5 ·  

图片 30

flex-shrink  //定义子元素的缩小比例,默认值为1,不能为负数,前提是父                       容器有空余空间

flex-basis  //在子元素分配空余空间前,设定指定的子元素的空间大小,默                       认auto(原值)

flex : 伸缩性,是flex-grow   flex-shrink   flex-basis 三部分的合并

flex :flex-grow  [flex-shrink]  [flex-basis] //后两者为可选择填写

当 flex :number 时,其实设置的就是flex-grow,默认值是0,表示不放大,不参与伸缩

flex: 0    //表示不放大,不参与伸缩,需要给该项目设置宽度,最好给一个flex-basis设置它的主               轴宽度

当 flex : 2 时,就是把所有flex不为0的可伸缩项目的数值加起来设为count,则该flex:2的项 目,所占的剩余的全部空间的2/count大小

flex: none    //一个flex属性值被设为none的伸缩项目,在任何情况都不会发生伸缩。

flex: initial   // 一个flex属性值被设为initial的伸缩项目,在有剩余空间的情况下不会有任何变                          化,但是在必要的情况下会被收缩。

注意:

多列组中所有column-*属性、float、clear、vertical-align属性在flex容器上没有作用

本文由星彩网app下载发布于前端技术,转载请注明出处:Flexbox布局学习笔记,css之弹性布局

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。