而是随着css3中弹性盒子模型的出产

弹性盒子模型

布局方案

价值观的布局方案多数使用div+css+float+position+display来达成,可是随着css3中弹性盒子模型的出产,在前面二个布局方案中就又多出了风度翩翩项彪悍的选项。
而因为近年来在商讨小程序,发掘中间使用弹性盒子布局成效越来越好成效更加高级中学一年级些,所以就将事先学习弹性盒模型的相关知识点整理出来,给大家享用。

弹性盒模型flex布局介绍

弹性盒模型(flexbox)又叫做弹性布局,是css3中新提议的龙精虎猛种布局方式,通过弹性布局,能够让子成分自动调治幅度和冲天,从而达成很好的填写任何例外显示器尺寸的展现设备的显得空间。
弹性盒模型与事先的布局格局是一丝一毫差别的三种,即便依旧选用div+css的措施,可是却将事先使用的调换给替换到了弹性布局。进而使页面成分布局情势越来越的简短。
差别于大家前边所学习的网格系统,弹性布局更为适用于采取组件以至小比例布局。
在此前,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

必备名词解释

在选取弹性盒子模型以前,供给领会部分弹性盒模型的根基概念名词。

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

图片 2

何以采用弹性盒子模型

弹性盒子模型在付出手提式有线电话机端的时候使用频率较高,在微信小程序开荒的时候也是运用效能相当高的技能,能够透过多少个实例来看一下弹性盒子的功利:

实例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>

代码结果如下:

图片 3

在上述实例中须求留意的点:
① 启用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>

代码效果如下:

图片 4

我们能够透过特别简单的习性设置来调动对其艺术,举个例子:
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代码效果如下:

图片 5

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>

弹性元素属性 — 给子成分设置的性质

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常用的性格,上边的实例很六只是给了代码,未有给效果图,是因为希望正在上学弹性盒子模型的老同志们最棒把代码实际的敲一下,而且亲自品尝差异的属性值,来深入分析差异属性带来的不及的效能。
弹性盒子模型难度非常小,可是却与古板的布局方案有比一点都不小的出入。

相关文章