弹性盒模型

弹性盒子模型

布局方案

守旧的布局方案多数采取div+css+float+position+display来促成,可是随着css叁中弹性盒子模型的推出,在前者布局方案中就又多出了壹项彪悍的选项。
而因为如今在商讨小程序,发现中间使用弹性盒子布局作用更加好功能更加高1些,所以就将从前学习弹性盒模型的相干知识点整理出来,给我们大饱眼福。

弹性盒模型flex布局介绍

弹性盒模型(flexbox)又称作弹性布局,是css三中新建议的一种布局方式,通过弹性布局,能够让子成分自动调控幅度和可观,从而实现很好的填充任何例外荧屏尺寸的显示设备的显得空间。
弹性盒模型与在此之前的布局情势是全然两样的三种,即使如故选取div+css的方式,不过却将事先运用的变迁给替换来了弹性布局。从而使页面成分布局格局越来越的简短。
差别于我们后边所学习的网格系统,弹性布局越发适用于采纳组件以及小比例布局。
在事先,flex经历了1遍迭代,每三次迭代都产生了区别的语法,方今我们学习遵从最后版本的语法。因为前面版本在运用的时候须要思虑包容难点,而新颖版本,全数的浏览器都帮忙无前缀的终端规范。

弹性盒子模型认知

flex布局情势是叁个整机的布局模块,而不是只有个别属性。flex的布局重点正视父容器和因素结合。
父容器称之为flex container(flex容器) 而其子成分称之为flex
item(flex元素)。
而任何flex布局的大意在于 对其艺术、排布和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” 等1些属性会失效。

<!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>

施行的成效如下:

亚洲必赢bwin696.com 1

须要名词解释

在动用弹性盒子模型从前,必要明白一些弹性盒模型的底子概念名词。

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

亚洲必赢bwin696.com 2

干什么接纳弹性盒子模型

弹性盒子模型在开采手机端的时候利用频率较高,在微信小程序支付的时候也是选用作用11分高的本事,能够通过多少个实例来看一下弹性盒子的好处:

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

代码结果如下:

亚洲必赢bwin696.com 3

在上述实例中需求小心的点:
① 启用flex布局 display:flex
2父成分的子成分在父成分设置了display:flex之后,子成分会自行的形成弹性盒子的子成分,
被称为flex items
3 默许情况,全数的 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>

代码效果如下:

亚洲必赢bwin696.com 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>

实例三 和 实例二概况相似,不过在.square类里存在一句order:-一,能够转移成分的渲染顺序。那个是弹性盒模型中三个丰硕厉害的四个方面。

实例叁代码效果如下:

亚洲必赢bwin696.com 5

flex布局情势属性

在flex整个系统个中,轮廓上得以分为两类,壹类是给父容器设置的习性,1类是给父容器中子成分设置的脾气。

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

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

语法:

row | row-reverse | column | column-reverse
row 暗中认可值,子成分会排列在1行 从主轴左边初叶
row-reverse 子成分会排列在1行。可是是从左侧初步
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>

二.flex-wrap 调控容器内的子成分是被威吓放在壹行中依旧是被放在多少个行上
。若是允许换行,这些个性允许你调节行的堆叠方向。

语法:
nowrap | wrap | wrap-reverse
nowrap 全体的要素被摆在1行 暗许值
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>

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

语法:
flex-start | flex-end | center | space-between | space-around
flex-start :
从行首开始排列。每行第叁个弹性成分与行首对齐,同时具有继续的弹性成分与前一个对齐。暗中同意
flex-end :
从行尾开头排列。每行最后1个弹性元素与行尾对齐,别的因素将与后3个对齐
center :
伸缩成分向每行中点排列。每行第拾个成分到行首的偏离将与每行最终3个因素到行尾的相距一样
space-between :
在每行上均匀分配弹性成分。相邻成分间距离同样。每行第柒个成分与行首
对齐,每行最终3个因素与行尾对齐。
亚洲必赢bwin696.com,space-around :
在每行上均匀分配弹性成分。相邻成分间距离相同。每行第3个成分到行首的相距和每行最后2个因素到行尾的相距将会是周围成分之间距离的四分之二。

实例代码:

参考上边的实例二.

四.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 :拉伸全体行来填满剩余空间。剩余空间平均的分红给每1行

实例代码:

<!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常用的性质,上面包车型地铁实例很七只是给了代码,未有给效果图,是因为希望正在上学弹性盒子模型的同志们最棒把代码实际的敲一下,并且亲自品尝不相同的属性值,来分析分化属性带来的不相同的功能。
弹性盒子模型难度非常的小,然而却与古板的布局方案有十分的大的分裂。

相关文章