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

我们可以通过非常简单的属性设置来调整对其方式，例如：
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> <div></div> <div></div> <div></div> </div> </body> </html>

实例3 和实例2 大体相似，但是在.square类里存在一句order:-1，可以更改元素的渲染顺序。这个是弹性盒模型中一个非常厉害的一个方面。

实例3代码效果如下：

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

5.align-content 多行对其方式，如果只有一行，则失效。