# 容器属性 #### flex-direction属性 决定主轴的方向。 有4个可选值: - row（默认值）：主轴为水平方向，起点在左端。 - row-reverse：主轴为水平方向，起点在右端。 - column：主轴为垂直方向，起点在上沿。 - column-reverse：主轴为垂直方向，起点在下沿。 #### flex-wrap属性 决定一条轴线排不下，如何换行。 有3个可选值: - nowrap（默认）：不换行。 - wrap：换行，第一行在上方。 - wrap-reverse：换行，第一行在下方。 #### justify-content属性 决定项目在主轴上的对齐方式 有5个可选值: - flex-start（默认值）：左对齐 - flex-end：右对齐 - center： 居中 - space-between：两端对齐，项目之间的间隔都相等。 - space-around：每个项目两侧的间隔相等。 #### align-items属性 决定项目在交叉轴上如何对齐 有5个可选值: - flex-start：交叉轴的起点对齐。 - flex-end：交叉轴的终点...

# CSS3 Flexbox 演示 DEMO地址: https://lincenying.github.io/vue2-flex/ 仓库地址: https://github.com/lincenying/vue2-flex # CSS3 Flexbox 布局实例 仓库地址: https://github.com/philipwalton/solved-by-flexbox DEMO地址: https://philipwalton.github.io/solved-by-flexbox/ 该实例列举 6 中常见的布局方式, 包括: 1. 网格系统 https://philipwalton.github.io/solved-by-flexbox/demos/grids/ 2. 圣杯布局 https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/ 3. input 拓展 https://philipwalton.github.io/solved-by-flexbox/demos/input-add-o...

多行文字垂直居中: ```html <style> .align_box_2 { display: table-cell; width: 550px; height: 1.14em; padding: 0 0.1em; border: 4px solid #beceeb; color: #069; font-size: 10em; vertical-align: middle; } .align_box_2 span.align_word { display: inline-block; font-size: 0.1em; vertical-align: middle; } </style> <div class="align_box_2"><span class="align_word">这里显示多行文字。</span></div> ``` 图片的垂直居中: ```ht...

#### (1)页面结构 * 容器: container * 页头：header * 内容：content/container * 页面主体：main * 页尾：footer * 导航：nav * 侧栏：sidebar * 栏目：column * 页面外围控制整体布局宽度：wrapper * 左右中：left right center #### (2)导航 * 导航：nav * 主导航：mainbav * 子导航：subnav * 顶导航：topnav * 边导航：sidebar * 左导航：leftsidebar * 右导航：rightsidebar * 菜单：menu * 子菜单：submenu * 标题: title * 摘要: summary #### (3)功能 * 标志：logo * 广告：banner * 登陆：login * 登录条：loginbar * 注册：regsiter * 搜索：search * 功能区：shop * 标题：title ...

```css .wrap-outer { margin-left: calc(100vw - 100%); } /* 或者： */ .wrap-outer { padding-left: calc(100vw - 100%); } ``` ...

### 01. CSS Rainbow Loader  [演示](http://codepen.io/jackrugile/full/JddmaX)&nbsp;[下载](http://codepen.io/jackrugile/share/zip/JddmaX) ### 02. Single element Slack loader  [演示](http://codepen.io/CrocoDillon/full/Htycs)&nbsp;[下载](http://codepen.io/CrocoDillon/share/zip/Htycs) ### 03. Pure CSS3 loader ![纯HTML5和CSS3加载效果](http://7xso5y.com2.z0.glb....

#### Guided Website Tour Tooltip 网站提示向导  [html5 css3 animated guided website tour tooltip widget](http://codepen.io/yoannhel/pen/pntHc "html5 css3 animated guided website tour tooltip widget") #### Text Animation 文本动画  [open source free typography text animation](http://codepen.io/yoannhel/pen/sJpDj "open source free typography text animation") #### Dashbo...