弹性盒模型与事先的布局格局是一心两样的二种,纵然照旧选用div+css的艺术

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

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常用的属性,上面的实例很多只是给了代码,没有给效果图,是因为希望正在学习弹性盒子模型的老同志们最好把代码实际的敲一下,并且亲自品尝不一样的属性值,来分析分裂属性带来的不等的功能。
弹性盒子模型难度不大,可是却与历史观的布局方案有很大的差距。

flex布局格局属性

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

何以选用弹性盒子模型

弹性盒子模型在支付手机端的时候利用效用较高,在微信小程序开发的时候也是运用频率格外高的技巧,可以因此多少个实例来看一下弹性盒子的功利:

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

代码结果如下:

皇冠现金app 1

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

代码效果如下:

皇冠现金app 2

俺们得以因此至极简单的性能设置来调整对其格局,例如:
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代码效果如下:

皇冠现金app 3

弹性盒模型flex布局介绍

弹性盒模型(flexbox)又称为弹性布局,是css3中新指出的一种布局形式,通过弹性布局,可以让子元素自动调整幅度和中度,从而完结很好的填充任何例外屏幕大小的来得设备的来得空间。
弹性盒模型与事先的布局形式是截然两样的三种,即便依然采取div+css的法门,不过却将从前运用的转移给替换成了弹性布局。从而使页面元素布局方式越来越的简约。
不同于大家前面所学习的网格系统,弹性布局进一步适用于选用组件以及小比例布局。
在头里,flex经历了三遍迭代,每五回迭代都发生了不一样的语法,如今大家上学听从最终版本的语法。因为事先版本在选拔的时候需求考虑包容问题,而新颖版本,所有的浏览器都支持无前缀的终点规范。

弹性盒子模型认知

flex布局格局是一个完整的布局模块,而不是只某个属性。flex的布局重点依靠父容器和因素结合。
父容器称之为flex container(flex容器) 而其子元素称之为flex
item(flex元素)。
而全方位flex布局的着力在于 对其情势、排布和种种。

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

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

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

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
皇冠现金app,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>

弹性盒子模型的选取

想要使用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>

推行的功用如下:

皇冠现金app 4

必要名词解释

在利用弹性盒子模型从前,需要通晓一些弹性盒模型的底蕴概念名词。

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

皇冠现金app 5

布局方案

历史观的布局方案大多选取div+css+float+position+display来兑现,然而随着css3中弹性盒子模型的生产,在前者布局方案中就又多出了一项彪悍的选项。
而因为目前在切磋小程序,发现中间使用弹性盒子布局效能更好功用更高一点,所以就将事先学习弹性盒模型的相关知识点整理出来,给大家享受。

弹性盒子模型的施用

想要使用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>

举办的法力如下:

皇冠现金app 6

何以采纳弹性盒子模型

弹性盒子模型在付入手机端的时候使用频率较高,在微信小程序开发的时候也是应用成效非常高的技巧,可以透过几个实例来看一下弹性盒子的裨益:

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

代码结果如下:

皇冠现金app 7

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

代码效果如下:

皇冠现金app 8

咱俩得以由此分外不难的性能设置来调动对其艺术,例如:
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代码效果如下:

皇冠现金app 9

布局方案

观念的布局方案大多使用div+css+float+position+display来贯彻,然而随着css3中弹性盒子模型的生产,在前端布局方案中就又多出了一项彪悍的选项。
而因为近期在商量小程序,发现中间使用弹性盒子布局作用更好效用更高一些,所以就将事先学习弹性盒模型的相干知识点整理出来,给大家享用。

弹性盒子模型

弹性盒模型flex布局介绍

弹性盒模型(flexbox)又称为弹性布局,是css3中新提议的一种布局情势,通过弹性布局,可以让子元素自动调整幅度和中度,从而达到很好的填写任何例外显示屏大小的显得设备的来得空间。
弹性盒模型与事先的布局格局是截然分化的二种,就算如故拔取div+css的方法,然而却将事先使用的变更给替换成了弹性布局。从而使页面元素布局方式越来越的简要。
不一样于我们前边所学习的网格系统,弹性布局越发适用于选拔组件以及小比例布局。
在前头,flex经历了三回迭代,每一趟迭代都发出了区其余语法,近年来大家学习坚守最后版本的语法。因为从前版本在利用的时候须要考虑包容问题,而最新版本,所有的浏览器都支持无前缀的终极规范。

要求名词解释

在使用弹性盒子模型以前,须求了然一些弹性盒模型的根基概念名词。

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

皇冠现金app 10

flex布局情势属性

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

弹性盒子模型认知

flex布局情势是一个完好无损的布局模块,而不是只某个属性。flex的布局主要看重父容器和要素构成。
父容器称之为flex container(flex容器) 而其子元素称之为flex
item(flex元素)。
而全套flex布局的主题在于 对其方法、排布和一一。

弹性盒子模型

相关文章