常用的布局方式之 Flex 布局
一、 Flex布局介绍
人们已经慢慢放弃了低版本浏览器，所以 flex 布局是现在首选的布局方式。 flex 布局又称之为 弹性布局 ，任何一个标签都可以使用 flex 布局，
行内元素也可以使用 flex 布局， 当时标签使用了 flex 布局以后，那么子元素的 float 、clear 等属性都将失效。
.box{ display: flex;}使用了 display: flex 属性的标签，我们称之为 容器，它的所有子元素自动成为容器成员，我们称之为 项目 。
容器 默认有两个轴，主轴(默认为水平)和侧轴(默认为侧轴)，项目 默认沿主轴排列。
二、 容器的属性
容器常用的属性有六个。
flex-direction // 控制主轴方向justify-content // 设置主轴方向对齐方式align-items // 控制侧轴方向对齐方式align-content // 当侧轴内容多行时，设置侧轴对齐方式flex-wrap // 控制项目是否允许换行flex-flow // 是flex-direction 和 flex-wrap 的简写如果没有特殊说明，以下代码演示模板一律如下。
<nav class="box"> <div>1</div> <div>2</div> <div>3</div></nav><style>.box{ display: flex; width: 500px; height: 300px; border: 1px solid #ccc;}div{ width: 50px; height: 50px; border: 1px solid red;}</style>2.1 flex-direction
flex-direction 决定主轴的方向，也就是项目的排列方向。
.box{ flex-direction: row;}.box{ flex-direction: row-reverse;}.box{ flex-direction: column;}.box{ flex-direction: column-reverse;}2.2 justify-content
justify-content 用来控制项目在主轴的对齐方式。
.box{ justify-content: flex-start;}.box{ justify-content: flex-end;}.box{ justify-content: center;}.box{ justify-content: space-around;}.box{ justify-content: space-between;}.box{ justify-content: space-evenly;}2.3 flex-wrap
容器的 flex-wrap 属性用来控制项目是否允许换行。
<nav class="box"> <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>11</div> <div>12</div> <div>13</div> <div>14</div> <div>15</div> </nav><style> .box{ flex-wrap: nowrap; }</style>.box{ flex-wrap: wrap;}.box{ flex-wrap: wrap-reverse;}2.4 align-items
align-items属性用来控制项目在侧轴的对齐方式。
.box{ align-items: flex-start;}.box{ align-items: flex-end;}.box{ align-items: center;}2.5 align-content
当侧轴有多行时，可以使用 align-content 来设置侧轴的对齐方式。
<nav class="box"> <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>11</div> <div>12</div> <div>13</div> <div>14</div> <div>15</div> </nav><style> .box{ align-content: flex-start; }</style>.box{ align-items: flex-end;}.box{ align-items: center;}.box{ align-items: sapce-between;}.box{ align-items: sapce-around;}2.6 flex-flow
flex-flow 是flex-direction和flex-wrap的简写形式。
.box{ flex-flow: row nowrap;}.box{ flex-flow: row wrap;}.box{ flex-flow: column wrap;}.box{ flex-flow: column nowrap;}三、 项目的属性
项目的常用属性有三个。
order // 项目的排列顺序align-self // 项目在侧轴的对齐方式flex // flex-grow, flex-shrink 和 flex-basis的简写3.1 order
order 属性是控制项目的排列顺序，默认值是 0，数值越小排列越靠前，可以有负数。
<nav class="box"> <div>1</div> <div>2</div> <div class="test">3</div> </nav> <style> .box{ display: flex; width: 500px; height: 300px; border: 1px solid #ccc; } div{ width: 50px; height: 50px; border: 1px solid red; } .test{ order: -1; } </style>3.2 align-self
align-self 是控制当前项目的侧轴的对齐方式，可以覆盖 align-items 属性。
<nav class="box"> <div>1</div> <div>2</div> <div class="test">3</div></nav><style> .box{ display: flex; align-items: center; width: 500px; height: 300px; border: 1px solid #ccc; } div{ width: 50px; height: 50px; border: 1px solid red; } .test{ align-self: flex-end; }</style>3.3 flex
项目使用的属性 flex 其实是 flex-grow(放大), flex-shrink(缩小) 和 flex-basis的简写，默认值是 0 1 auto。
我们通常设置的 flex：1， 其实等价于 flex-grow: 1，也就是占有剩余空间的宽度。
<nav class="box"> <div>1</div> <div>2</div> <div class="test">3</div></nav><style> .box{ display: flex; width: 500px; height: 300px; border: 1px solid #ccc; } div{ width: 50px; height: 50px; border: 1px solid red; } .test{ flex: 1 }</style>有时候，我们也会设置 flex: 33.333%， 容器整个宽度就是100%，每个项目占33.333%，所以就是一行展示三个。
<nav class="box"> <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>11</div> <div>12</div> <div>13</div> <div>14</div> <div>15</div> </nav><style> div{ box-sizing: border-box; } .box{ display: flex; flex-wrap: wrap; width: 500px; height: 300px; border: 1px solid #ccc; } div{ width: 50px; height: 50px; border: 1px solid red; flex: 33.333%; }</style>四、 利用 flex 制骰子布局
4.1 一个点
<nav class="box"> <div></div></nav><style> .box{ display: flex; justify-content: center; align-items: center; width: 300px; height: 300px; border: 1px solid #ccc; border-radius: 5px; } div{ width: 50px; height: 50px; background: red; border-radius: 50%; }</style>4.2 两个点
<nav class="box"> <div></div> <div class="test"></div></nav><style> .box{ display: flex; justify-content: space-between; width: 300px; height: 300px; border: 1px solid #ccc; border-radius: 5px; } div{ width: 50px; height: 50px; background: red; border-radius: 50%; } .test{ align-self:flex-end; }</style>4.3 三个点
<nav class="box"> <div></div> <div class="center"></div> <div class="test"></div></nav><style> .box{ display: flex; justify-content: space-between; width: 300px; height: 300px; border: 1px solid #ccc; border-radius: 5px; } div{ width: 50px; height: 50px; background: red; border-radius: 50%; } .center{ align-self: center; } .test{ align-self:flex-end; }</style>4.4 四个点
<nav class="box"> <div class="row"> <div class="item"></div> <div class="item"></div> </div> <div class="row"> <div class="item"></div> <div class="item"></div> </div></nav> <style> .box{ display: flex; flex-direction: column; justify-content: space-between; width: 300px; height: 300px; border: 1px solid #ccc; border-radius: 5px; } .item{ width: 50px; height: 50px; background: red; border-radius: 50%; } .row{ display: flex; flex-direction: row; justify-content: space-between; }</style>4.5 五个点
<nav class="box"> <div class="row"> <div class="item"></div> <div class="item"></div> </div> <div class="row"> <div class="item"></div> </div> <div class="row"> <div class="item"></div> <div class="item"></div> </div></nav> <style> .box{ display: flex; flex-direction: column; justify-content: space-between; width: 300px; height: 300px; border: 1px solid #ccc; border-radius: 5px; } .item{ width: 50px; height: 50px; background: red; border-radius: 50%; } .row{ display: flex; flex-direction: row; justify-content: space-between; } .row:nth-child(2){ display: flex; justify-content: center; }</style>4.6 六个点
<nav class="box"> <div class="row"> <div class="item"></div> <div class="item"></div> </div> <div class="row"> <div class="item"></div> <div class="item"></div> </div> <div class="row"> <div class="item"></div> <div class="item"></div> </div></nav> <style> .box{ display: flex; flex-direction: column; justify-content: space-between; width: 300px; height: 300px; border: 1px solid #ccc; border-radius: 5px; } .item{ width: 50px; height: 50px; background: red; border-radius: 50%; } .row{ display: flex; flex-direction: row; justify-content: space-evenly; }</style>本文参考了阮一峰大神的 http://www.ruanyifeng.com/blo... 。