而是随着css3中弹性盒子模型的出产,即使仍旧采用div+css的点子

弹性盒子模型

弹性盒子模型

布局方案

历史观的布局方案大多使用div+css+float+position+display来促成,不过随着css3中弹性盒子模型的生产,在前端布局方案中就又多出了一项彪悍的选项。
而因为最近在切磋小程序,发现中间使用弹性盒子布局作用更好效能更高一些,所以就将事先学习弹性盒模型的连锁知识点整理出来,给大家分享。

布局方案

观念的布局方案大多使用div+css+float+position+display来兑现,可是随着css3中弹性盒子模型的出产,在前端布局方案中就又多出了一项彪悍的选项。
而因为如今在讨论小程序,发现中间使用弹性盒子布局作用更好作用更高一些,所以就将事先学习弹性盒模型的相关知识点整理出来,给我们享用。

弹性盒模型flex布局介绍

弹性盒模型(flexbox)又称为弹性布局,是css3中新指出的一种布局方式,通过弹性布局,可以让子成分自动调整幅度和高度,从而达到很好的填写任何例外屏幕大小的显得设备的显得空间。
弹性盒模型与事先的布局形式是全然两样的三种,虽然依旧采纳div+css的方法,不过却将事先使用的转移给替换成了弹性布局。从而使页面成分布局方式更为的简单。
差别于我们前面所学习的网格系统,弹性布局更为适用于拔取组件以及小比例布局。
在以前,flex经历了五次迭代,每两回迭代都暴发了不一样的语法,近年来大家学习坚守最后版本的语法。因为前边版本在拔取的时候要求考虑兼容难点,而新颖版本,所有的浏览器都帮衬无前缀的终点规范。

弹性盒模型flex布局介绍

弹性盒模型(flexbox)又叫做弹性布局,是css3中新指出的一种布局格局,通过弹性布局,可以让子成分自动调整幅度和可观,从而达成很好的填充任何例外显示屏尺寸的突显设备的显示空间。
弹性盒模型与从前的布局方式是全然不同的二种,尽管还是采取div+css的办法,不过却将从前运用的变通给替换成了弹性布局。从而使页面成分布局方式特别的粗略。
不一致于大家前面所学习的网格系统,弹性布局进一步适用于采取组件以及小比例布局。
在事先,flex经历了一遍迭代,每三遍迭代都暴发了不一样的语法,方今大家上学坚守最后版本的语法。因为事先版本在动用的时候须要考虑包容难点,而最新版本,所有的浏览器都协助无前缀的顶点规范。

弹性盒子模型认知

flex布局格局是一个整机的布局模块,而不是只某个属性。flex的布局首要借助父容器和因素结合。
父容器称之为flex container(flex容器) 而其子元素称之为flex
item(flex成分)。
而整个flex布局的主导在于 对其格局、排布和种种。

弹性盒子模型认知

flex布局格局是一个一体化的布局模块,而不是只某个属性。flex的布局重点依靠父容器和要素构成。
父容器称之为flex container(flex容器) 而其子元素称之为flex
item(flex成分)。
而整整flex布局的骨干在于 对其方法、排布和顺序。

弹性盒子模型的运用

想要使用flex布局,首先要利用display:flex 大概display:inline-flex来安装父容器。
display:flex
给父成分设置完毕后,那么一切父成分会化为弹性容器,不过是一个块级成分。
display:inline-flex给父成分设置落成后,那么一切父成分会变成弹性容器,不过是一个行内块级成分,有些类似于inline-block的效能。

当父容器设置了那本脾性之后,里面的子成分默许的成套变成flex item
(flex元素)
Tip:flex布局与我们后面所学习的布局格局是属于别的一套布局方案,所以在行使了flex布局之后,如Block”,“inline”,“float”
和 “text-align” 等片段属性会失效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container-flex {
            width: 600px;
            border:1px solid #ccc;
            display:flex;
        }
        .container-inline {
            width: 600px;
            border:1px solid #ccc;
            display:inline-flex;
        }
        .container-flex div {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .container-inline div {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="container-flex">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div class="container-flex">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div class="container-inline">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div class="container-inline">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

推行的效果如下:

图片 1

弹性盒子模型的采纳

想要使用flex布局,首先要采纳display:flex 或者display:inline-flex来安装父容器。
display:flex
给父成分设置落成后,那么所有父成分会成为弹性容器,不过是一个块级成分。
display:inline-flex给父成分设置已毕后,那么一切父成分会化为弹性容器,不过是一个行内块级成分,有些近乎于inline-block的出力。

当父容器设置了那么些个性之后,里面的子成分暗中同意的漫天变成flex item
(flex成分)
Tip:flex布局与大家以前所学习的布局形式是属于其余一套布局方案,所以在拔取了flex布局之后,如Block”,“inline”,“float”
和 “text-align” 等局地属性会失效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container-flex {
            width: 600px;
            border:1px solid #ccc;
            display:flex;
        }
        .container-inline {
            width: 600px;
            border:1px solid #ccc;
            display:inline-flex;
        }
        .container-flex div {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .container-inline div {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="container-flex">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div class="container-flex">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div class="container-inline">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div class="container-inline">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

执行的听从如下:

图片 2

必备名词解释

在接纳弹性盒子模型在此以前,要求明白部分弹性盒模型的根基概念名词。

main axis 主轴
cross axis 交叉轴/侧轴 与主轴垂直
main start 主轴源点边
main end 主轴终点边
cross start 交叉轴源点边
cross end 交叉轴终点边

图片 3

须要名词解释

在使用弹性盒子模型此前,需求领悟一些弹性盒模型的基础概念名词。

main axis 主轴
cross axis 交叉轴/侧轴 与主轴垂直
main start 主轴源点边
main end 主轴终点边
cross start 交叉轴起源边
cross end 交叉轴终点边

图片 4

为何使用弹性盒子模型

弹性盒子模型在付出手机端的时候使用频率较高,在微信小程序开发的时候也是应用频率非凡高的技术,能够经过几个实例来看一下弹性盒子的裨益:

实例1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #item-container {
            display: flex;/*启用flex布局*/
            background-color: pink;
        }
        .square {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .circle {
            border-radius: 50%;
            width: 150px;
            height: 150px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="item-container">
        <div class="circle"></div>
        <div class="square"></div>
        <div class="circle"></div>
    </div>
</body>
</html>

代码结果如下:

图片 5

在上述实例中要求小心的点:
① 启用flex布局 display:flex

父成分的子成分在父成分设置了display:flex之后,子元素会自动的成为弹性盒子的子成分,
被称为flex items
③ 默认处境,所有的 flex-item 会依据 flex 容器的顶部和右侧对齐。

实例2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #item-container {
            display: flex;/*启用flex布局*/
            background-color: pink;
            justify-content:flex-start;/*默认*/
            justify-content:flex-end;/*在主轴的末端对其*/
            justify-content:center;/*在主轴的中间对其*/
            justify-content:space-between;/*在整个主轴中平均分配空间,无论其中有多少个元素*/
            justify-content:space-around;/*Flex-item 默认会被均匀的分布,但是每一个
                                        都会在其给定的空间内居中显示。*/
            align-items:center;/*让items在垂直方向上居中*/
        }
        .square {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .circle {
            border-radius: 50%;
            width: 150px;
            height: 150px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="item-container">
        <div class="circle"></div>
        <div class="square"></div>
        <div class="circle"></div>
    </div>
</body>
</html>

代码效果如下:

图片 6

我们得以经过十分不难的属性设置来调动对其艺术,例如:
justify-content: flex-start / flex-end /center /space-between
/space-around
大家也可以经过align-items:center 属性让 items 在笔直方向居中。

实例3:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #item-container {
            display: flex;/*启用flex布局*/
            background-color: pink;
            justify-content:flex-start;/*默认*/
            justify-content:flex-end;/*在主轴的末端对其*/
            justify-content:center;/*在主轴的中间对其*/
            justify-content:space-between;/*在整个主轴中平均分配空间,无论其中有多少个元素*/
            justify-content:space-around;/*Flex-item 默认会被均匀的分布,但是每一个
                                        都会在其给定的空间内居中显示。*/
            align-items:center;/*让items在垂直方向上居中*/
        }
        .square {
            width: 200px;
            height: 200px;
            background-color: orange;
            order: -1; /*让正方形显示在第一位而不是中间*/
        }
        .circle {
            border-radius: 50%;
            width: 150px;
            height: 150px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="item-container">
        <div class="circle"></div>
        <div class="square"></div>
        <div class="circle"></div>
    </div>
</body>
</html>

实例3 和 实例2
大体相似,可是在.square类里设有一句order:-1,可以变动成分的渲染顺序。这一个是弹性盒模型中一个不行了得的一个地点。

实例3代码效果如下:

图片 7

何以采纳弹性盒子模型

弹性盒子模型在付下手机端的时候使用频率较高,在微信小程序开发的时候也是行使功用非常高的技术,能够通过几个实例来看一下弹性盒子的益处:

实例1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #item-container {
            display: flex;/*启用flex布局*/
            background-color: pink;
        }
        .square {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .circle {
            border-radius: 50%;
            width: 150px;
            height: 150px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="item-container">
        <div class="circle"></div>
        <div class="square"></div>
        <div class="circle"></div>
    </div>
</body>
</html>

代码结果如下:

图片 8

在上述实例中要求小心的点:
① 启用flex布局 display:flex

父成分的子成分在父元素设置了display:flex之后,子元素会自行的成为弹性盒子的子成分,
被称为flex items
③ 暗中同意景况,所有的 flex-item 会根据 flex 容器的顶部和左手对齐。

实例2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #item-container {
            display: flex;/*启用flex布局*/
            background-color: pink;
            justify-content:flex-start;/*默认*/
            justify-content:flex-end;/*在主轴的末端对其*/
            justify-content:center;/*在主轴的中间对其*/
            justify-content:space-between;/*在整个主轴中平均分配空间,无论其中有多少个元素*/
            justify-content:space-around;/*Flex-item 默认会被均匀的分布,但是每一个
                                        都会在其给定的空间内居中显示。*/
            align-items:center;/*让items在垂直方向上居中*/
        }
        .square {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .circle {
            border-radius: 50%;
            width: 150px;
            height: 150px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="item-container">
        <div class="circle"></div>
        <div class="square"></div>
        <div class="circle"></div>
    </div>
</body>
</html>

代码效果如下:

图片 9

我们可以透过格外简单的属性设置来调整对其情势,例如:
justify-content: flex-start / flex-end /center /space-between
/space-around
作者们也足以透过align-items:center 属性让 items 在笔直方向居中。

实例3:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #item-container {
            display: flex;/*启用flex布局*/
            background-color: pink;
            justify-content:flex-start;/*默认*/
            justify-content:flex-end;/*在主轴的末端对其*/
            justify-content:center;/*在主轴的中间对其*/
            justify-content:space-between;/*在整个主轴中平均分配空间,无论其中有多少个元素*/
            justify-content:space-around;/*Flex-item 默认会被均匀的分布,但是每一个
                                        都会在其给定的空间内居中显示。*/
            align-items:center;/*让items在垂直方向上居中*/
        }
        .square {
            width: 200px;
            height: 200px;
            background-color: orange;
            order: -1; /*让正方形显示在第一位而不是中间*/
        }
        .circle {
            border-radius: 50%;
            width: 150px;
            height: 150px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="item-container">
        <div class="circle"></div>
        <div class="square"></div>
        <div class="circle"></div>
    </div>
</body>
</html>

实例3 和 实例2
大体相似,可是在.square类里设有一句order:-1,可以转移成分的渲染顺序。那一个是弹性盒模型中一个丰盛了得的一个方面。

实例3代码效果如下:

图片 10

flex布局方式属性

在flex整个系统当中,大体上得以分为两类,一类是给父容器设置的属性,一类是给父容器中子成分设置的品质。

flex布局格局属性

在flex整个系统当中,大体上可以分为两类,一类是给父容器设置的习性,一类是给父容器中子元素设置的特性。

弹性容器属性 — 给父元素设置的性质

1.flex-direction
定义内部因素怎样在flex容器中布局,定义了主轴的动向(是多亏反)。

语法:

row | row-reverse | column | column-reverse
row 暗许值,子成分会排列在一行 从主轴左侧初叶
row-reverse 子成分会排列在一行。但是是从左边起先
column 子元素垂直显示,从侧轴初阶点初始
column-reverse 垂直呈现,然而从甘休点初始

实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {
            width: 100%;
            height: 500px;
            border:1px solid #ccc;
            display:flex;
            flex-direction: row-reverse;
            flex-direction: column;
            flex-direction: column-reverse;
        }
        .container div {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

2.flex-wrap 决定容器内的子成分是被胁持放在一行中如故是被放在两个行上
。假若允许换行,那本性子允许你控制行的堆叠方向。

语法:
nowrap | wrap | wrap-reverse
nowrap 所有的成分被摆在一行 暗许值
wrap 当一行成分过多,则允许成分 换行
wrap-reverse 将侧轴起点和终点颠倒

实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    .container {
        width: 600px;
        height: 500px;
        border:1px solid #ccc;
        display:flex;
        flex-wrap:wrap;
        flex-wrap:wrap-reverse;
    }
    .container div {
        width: 200px;
        height: 100px;
        background-color: orange;
    }
</style>
</head>
<body>
<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</div>
</body>
</html>

3.justify-content
属性定义了浏览器怎样分配顺着父容器主轴的弹性(flex)成分之间及其周围的长空。

语法:
flex-start | flex-end | center | space-between | space-around
flex-start :
从行首开端排列。每行第二个弹性成分与行首对齐,同时负有继续的弹性成分与前一个对齐。默许
flex-end :
从行尾开端排列。每行最后一个弹性成分与行尾对齐,其余因素将与后一个对齐
center :
伸缩元素向每行中点排列。每行第二个成分到行首的距离将与每行最终一个因素到行尾的离开相同
space-between :
在每行上均匀分配弹性成分。相邻成分间距离相同。每行第二个成分与行首
对齐,每行最后一个因素与行尾对齐。
space-around :
在每行上均匀分配弹性成分。相邻成分间距离相同。每行首个因素到行首的离开和每行最终一个要素到行尾的偏离将会是隔壁成分之间相距的59%。

实例代码:

参照上边的实例2.

4.align-items
属性以与justify-content相同的法子在侧轴方向中将当前行上的弹性成分对齐。

语法:
flex-start | flex-end | center | baseline | stretch
align-items: flex-start; 对齐到侧轴起源
align-items: flex-end; 对齐到侧轴终点
align-items: center; 在侧轴上居中
align-items: baseline; 与基准线对齐
align-items: stretch; 拉伸成分以适应 暗中同意值

实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    #item-container {
        display: flex;/*启用flex布局*/
        background-color: pink;
        justify-content:space-around;
        align-items:baseline;/*与基准线对齐*/
    }
    .square {
        width: 200px;
        height: 200px;
        background-color: orange;
    }
    .circle {
        border-radius: 50%;
        width: 150px;
        height: 150px;
        background-color: green;
    }
    .container {
        width: 500px;
        height: 600px;
        border:1px solid #ccc;
        display:flex;
        align-items: stretch;
    }
    .container div {
        width: 100px;
        background-color:red;
        border:1px solid green;
    }
</style>
</head>
<body>
<div id="item-container">
    <div class="circle"></div>
    <div class="square"></div>
    <div class="circle"></div>
</div>
<!-- <div class="container">
    <div>1</div>
    <div>2</div>
</div> -->
</body>
</html>

5.align-content 多行对其艺术,假如惟有一行,则失效。

语法:
flex-start | flex-end | center | space-between | space-around |
stretch
flex-start : 与交叉轴的源点对其
flex-end : 与交叉轴的终极对其
center : 与交叉轴的中点对其
space-between : 与接力轴两端对其,轴线之间的距离平均分布
space-around:
所有行在容器中平均分布,相邻两行间距相等。容器的垂直轴起源边和终端边分别与第一行和终极一行的离开是隔壁两行间距的49%。
stretch :拉伸所有行来填满剩余空间。剩余空间平均的分配给每一行

实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {
            width: 600px;
            height: 900px;
            border:1px solid #ccc;
            display:flex;
            flex-wrap:wrap;
            align-content:flex-start;
            align-content:flex-end;
            align-content:center;
            align-content:space-between;
            align-content:space-around;
            align-content:stretch; /*默认*/
        }
        .container div {
            width: 200px;
            height: 80px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</body>
</html>

弹性容器属性 — 给父成分设置的品质

1.flex-direction
概念内部因素怎么着在flex容器中布局,定义了主轴的样子(是多亏反)。

语法:

row | row-reverse | column | column-reverse
row 暗中同意值,子成分会排列在一行 从主轴右边初叶
row-reverse 子成分会排列在一行。然则是从左边先河
column 子成分垂直彰显,从侧轴开首点早先
column-reverse 垂直突显,不过从截止点先导

实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {
            width: 100%;
            height: 500px;
            border:1px solid #ccc;
            display:flex;
            flex-direction: row-reverse;
            flex-direction: column;
            flex-direction: column-reverse;
        }
        .container div {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

2.flex-wrap 操纵容器内的子成分是被胁持放在一行中大概是被放在多少个行上
。如若允许换行,这一个天性允许你控制行的堆叠方向。

语法:
nowrap | wrap | wrap-reverse
nowrap 所有的要素被摆在一行 暗许值
wrap 当一行成分过多,则允许成分 换行
wrap-reverse 将侧轴源点和终点颠倒

实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    .container {
        width: 600px;
        height: 500px;
        border:1px solid #ccc;
        display:flex;
        flex-wrap:wrap;
        flex-wrap:wrap-reverse;
    }
    .container div {
        width: 200px;
        height: 100px;
        background-color: orange;
    }
</style>
</head>
<body>
<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</div>
</body>
</html>

3.justify-content
属性定义了浏览器怎么样分配顺着父容器主轴的弹性(flex)元素之间及其周围的长空。

语法:
flex-start | flex-end | center | space-between | space-around
flex-start :
从行首早先排列。每行第四个弹性元素与行首对齐,同时拥有继续的弹性成分与前一个对齐。暗中同意
flex-end :
从行尾开端排列。每行最终一个弹性元素与行尾对齐,其余因素将与后一个对齐
center :
伸缩成分向每行中点排列。每行第二个因素到行首的离开将与每行最后一个要素到行尾的偏离相同
space-between :
在每行上均匀分配弹性成分。相邻成分间距离相同。每行第二个因素与行首
对齐,每行最终一个要素与行尾对齐。
space-around :
在每行上均匀分配弹性成分。相邻成分间距离相同。每行第二个因素到行首的离开和每行最终一个要素到行尾的偏离将会是隔壁成分之间相距的四分之一。

实例代码:

参照下面的实例2.

4.align-items
属性以与justify-content相同的不二法门在侧轴方向司令员当前行上的弹性成分对齐。

语法:
flex-start | flex-end | center | baseline | stretch
align-items: flex-start; 对齐到侧轴源点
align-items: flex-end; 对齐到侧轴终点
align-items: center; 在侧轴上居中
align-items: baseline; 与基准线对齐
align-items: stretch; 拉伸成分以适应 默许值

实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    #item-container {
        display: flex;/*启用flex布局*/
        background-color: pink;
        justify-content:space-around;
        align-items:baseline;/*与基准线对齐*/
    }
    .square {
        width: 200px;
        height: 200px;
        background-color: orange;
    }
    .circle {
        border-radius: 50%;
        width: 150px;
        height: 150px;
        background-color: green;
    }
    .container {
        width: 500px;
        height: 600px;
        border:1px solid #ccc;
        display:flex;
        align-items: stretch;
    }
    .container div {
        width: 100px;
        background-color:red;
        border:1px solid green;
    }
</style>
</head>
<body>
<div id="item-container">
    <div class="circle"></div>
    <div class="square"></div>
    <div class="circle"></div>
</div>
<!-- <div class="container">
    <div>1</div>
    <div>2</div>
</div> -->
</body>
</html>

5.align-content 多行对其方法,若是唯有一行,则失效。

语法:
flex-start | flex-end | center | space-between | space-around |
stretch
flex-start : 与交叉轴的起源对其
flex-end : 与交叉轴的巅峰对其
center : 与交叉轴的中点对其
space-between : 与接力轴两端对其,轴线之间的距离平均分布
space-around:
所有行在容器中平均分布,相邻两行间距相等。容器的垂直轴源点边和终极边分别与第一行和最终一行的离开是相邻两行间距的一半。
stretch :拉伸所有行来填满剩余空间。剩余空间平均的分配给每一行

实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {
            width: 600px;
            height: 900px;
            border:1px solid #ccc;
            display:flex;
            flex-wrap:wrap;
            align-content:flex-start;
            align-content:flex-end;
            align-content:center;
            align-content:space-between;
            align-content:space-around;
            align-content:stretch; /*默认*/
        }
        .container div {
            width: 200px;
            height: 80px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</body>
</html>

弹性成分属性 — 给子成分设置的属性

order
order属性规定了弹性容器中的可伸缩项目在布局时的依次。成分依照order属性的值的增序进行布局。拥有一致order属性值的元素依照它们在源代码中冒出的相继进行布局。

语法:
order:

align-self 定义flex子项单独在侧轴(纵轴)方向上的对齐格局

语法:
stretch|center|flex-start|flex-end|baseline

flex-grow 定义弹性盒子成分扩张比率
flex-shrink 定义弹性盒子成分的减弱比率
flex-basis 指定了flex
item在主轴方向上的启幕大小。假如不拔取box-sizing来
改变盒模型的话,那么那特特性就控制了flex item的始末盒content-box)的宽
只怕高(取决于主轴的动向)的尺寸大小。

Tip:要求留意的是,在上头的末梢的flex-grow、flex-shrink、flex-basis
三脾特性最好相互搭配使用。

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#main {
    width: 350px;
    height: 100px;
    border: 1px solid #c3c3c3;
    display: flex;
}

#main div {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100px;
}

#main div:nth-of-type(2) {
    flex-shrink: 3;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
</div>
</body>
</html>

ok,上面大约就是有些常用的弹性盒子模型flex-box常用的质量,上边的实例很多只是给了代码,没有给效果图,是因为希望正在上学弹性盒子模型的老同志们最好把代码实际的敲一下,并且亲自品尝不一样的属性值,来分析不一致属性带来的例外的成效。
弹性盒子模型难度不大,然而却与古板的布局方案有很大的差距。

弹性成分属性 — 给子成分设置的个性

order
order属性规定了弹性容器中的可伸缩项目在布局时的次第。成分依照order属性的值的增序举行布局。拥有一致order属性值的成分根据它们在源代码中冒出的相继进行布局。

语法:
order:

align-self 定义flex子项单独在侧轴(纵轴)方向上的对齐格局

语法:
stretch|center|flex-start|flex-end|baseline

flex-grow 定义弹性盒子成分伸张比率
flex-shrink 定义弹性盒子成分的收缩比率
flex-basis 指定了flex
item在主轴方向上的起来大小。如若不利用box-sizing来
变动盒模型的话,那么那么些性情就决定了flex item的情节盒content-box)的宽
只怕高(取决于主轴的势头)的尺码大小。

Tip:须要注意的是,在上头的末梢的flex-grow、flex-shrink、flex-basis
四个本性最好互相搭配使用。

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#main {
    width: 350px;
    height: 100px;
    border: 1px solid #c3c3c3;
    display: flex;
}

#main div {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100px;
}

#main div:nth-of-type(2) {
    flex-shrink: 3;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
</div>
</body>
</html>

ok,上面大致就是有些常用的弹性盒子模型flex-box常用的天性,上边的实例很五只是给了代码,没有给效果图,是因为希望正在上学弹性盒子模型的老同志们最好把代码实际的敲一下,并且亲自品尝差其他属性值,来分析差异属性带来的不比的成效。
弹性盒子模型难度不大,可是却与传统的布局方案有很大的差异。

相关文章

网站地图xml地图