弹性盒模型 flex box - Des李白(3)_H5之家 - 中国HTML5教程资源分享第一站

语法：
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> <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> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> </html>

ok，上面大概就是一些常用的弹性盒子模型flex-box常用的属性，上面的实例很多只是给了代码，没有给效果图，是因为希望正在学习弹性盒子模型的同志们最好把代码实际的敲一下，并且亲自尝试不同的属性值，来分析不同属性带来的不同的效果。
弹性盒子模型难度不大，但是却与传统的布局方案有很大的差别。

posted @