只是随着css3中弹性盒子模型的生产,弹性盒模型与事先的布局形式是截然两样的二种

弹性盒子模型

弹性盒子模型

布局方案

传统的布局方案大多选拔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 :
在每行上均匀分配弹性元素。相邻元素间距离相同。每行首个元素到行首的相距和每行最终一个因素到行尾的距离将会是相邻元素之间离开的一半。

实例代码:

参照上面的实例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>

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

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常用的品质,上面的实例很多只是给了代码,没有给效果图,是因为梦想正在攻读弹性盒子模型的同志们最好把代码实际的敲一下,并且亲自尝试差其余属性值,来分析差别性质带来的例外的机能。
弹性盒子模型难度不大,不过却与历史观的布局方案有很大的出入。