弹性盒模型flexbox的认知与运用-
布局方案
传统的布局方案大多采纳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” 等一些属性会失效。
Document
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
施行的结果如下：
为何运用弹性盒子模型
弹性盒子模型在开发手机端的时候运用频率较高，在微信小程序开发的时候也是运用频率非常高的技术，可以通过几个实例来看一下弹性盒子的益处：
实例1：
Document
代码效果如下：
③ 默许状况，所有的 flex-item 会按照 flex 容器的顶部和左侧对齐。
实例2：
Document
代码结果如下：
我们也可以通过align-items:center 属性让 items 在垂直标的目的居中。
实例3：
Document
实例3 和 实例2 大体类似，但是在.square类里存在一句order:-1，可以更改元素的渲染次序。这个是弹性盒模型中一个非常厉害的一个方面。
实例3代码结果如下：
column-reverse 垂直显示，不外从完毕点开端
实例代码：
Document
1
2
3
2.flex-wrap 控制容器内的子元素是被强迫放在一行中或者是被放在多个行上 。要是允许换行，这个属性允许你控制行的堆叠标的目的。
语法：
nowrap | wrap | wrap-reverse
nowrap 所有的元素被摆在一行 默许值
wrap 当一行元素过多，则允许元素 换行
wrap-reverse 将侧轴起点和终点颠倒
实例代码：
Document 1 2 3 4 5 6 7 8 9 10
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; 拉伸元素以顺应 默许值
实例代码:
Document
5.align-content 多行对其方式，要是只要一行，则失效。
语法：
flex-start | flex-end | center | space-between | space-around | stretch
flex-start : 与穿插轴的起点对其
flex-end : 与穿插轴的终点对其
center : 与穿插轴的中点对其
space-between : 与穿插轴两端对其，轴线之间的隔断均匀散布
space-around: 所有行在容器中均匀散布，相邻两行间距相称。容器的垂直轴起点边和终点边离别与首先行和最后一行的距离是相邻两行间距的一半。
stretch ：拉伸所有行来填满剩余空间。剩余空间均匀的分配给每一行
实例代码：
Document
1
2
3
4
5
6
7
8
9
10
弹性元素属性 -- 给子元素设定的属性
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 三个属性最佳彼此搭配运用。
实例：
ok，上面大约就是一些常用的弹性盒子模型flex-box常用的属性，上面的实例许多只是给了代码，没有给结果图，是由于但愿正在学习弹性盒子模型的同志们最佳把代码现实的敲一下，而且亲自尝试不一样的属性值，来剖析不一样属性带来的不一样的结果。
弹性盒子模型难度不大，但是却与传统的布局方案有很大的差别。
以上就是弹性盒模型 flex box的认知与运用的细致内容，更多请关注 百分百源码网 其它相干文章！
