flex 布局
原创
博客地址：https://ainyi.com/53
CSS3 为我们提供了一种可伸缩的灵活的 web 页面布局方式 flexbox 布局，它具有很强大的功能，可以很轻松实现很多复杂布局。可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 flex 是 flexible box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性
基本概念
采用 flex 布局的元素称为 ==flex 容器==，容器的直接子元素称为 ==flex 项目==，容器默认有两个轴心线，用于项目的对齐与排列，水平主轴为 main axis，垂直主轴为 cross axis，主轴的开始位置为 start， 结束位置为 end
主轴和交叉轴的判定：如果 flex-direction 为 row，则主轴是水平方向，如果是 column，则主轴是垂直方向
flex 属性
将任意元素的 display 属性设置为 flex，可将其转换为Flex容器 设为 flex 容器后，子元素的 float、clear 和 vertical-align 属性将失效
flex 容器属性
属性名描述 | 属性名 | 参数 |
|---|---|---|
主轴方向 | flex-direction | row（水平排列，默认）；row-reverse（水平反向排列）；column（垂直排列）；column-reverse（垂直反向排列） |
换行 | flex-wrap | nowrap（不换行，默认）；wrap（换行）；wrap-reverse（反向换行，第一行在最后面) |
上面两个属性的简写 | flex-flow | row nowrap（默认值） |
主轴对齐方式 | justify-content | flex-start（起点对齐，默认）；flex-end（终点对齐）；center（居中对齐）；space-between（两端对齐）；space-around（分散对齐） |
交叉轴对齐方式 | align-items | stretch（拉伸对齐，默认）；flex-start（起点对齐）；flex-end（终点对齐）；center（居中对齐）；baseline（第一行文字的基线对齐） |
多根轴线对齐方式 | align-content | stretch（拉伸对齐，默认）；flex-start（起点对齐）；flex-end（终点对齐）；center（居中对齐）；space-between（两端对齐）；space-around（分散对齐） |
flex 项目属性
属性名描述 | 属性名 | 参数 |
|---|---|---|
顺序 | order | number 类型（数值越小越靠前，默认为 0） |
放大比例 | flex-grow | number 类型（默认为 0，如果有剩余空间也不放大，若值为 1 则放大，2 是 1 的双倍大小，以此类推） |
缩小比例 | flex-shrink | number 类型（默认为 1，如果空间不足则会缩小，值为0不缩小） |
项目自身大小 | flex-basis | auto（默认auto，为原来的大小）；length（设置固定值 50px/50%） |
上面三个属性的简写 | flex | 0 1 auto（默认值）；两个快捷值 auto (1 1 auto) 和 none (0 0 auto) |
项目自身对齐 | align-self | auto（继承父元素，默认）；flex-start（起点对齐）；flex-end（终点对齐）；center（居中对齐）；baseline（基线对齐）；stretch（拉伸对齐） |
flex.css 的使用
在移动端开发中，并不是所有的浏览器、webview、微信等各种版本都支持标准的 flex，但是基本上都会支持-webkit-box，所以 flex.css 的主要作用是保证每一个属性都能支持标准 flex 或旧版本的 -webkit-box。
由于 flex.css 采用了 autoprefixer 编译，所以能够保证在浏览器不支持标准 flex 布局的情况下，回滚到旧版本的-webkit-box，保证移动设备中能呈现出一样的布局效果
于是，一款移动端快速布局的神器诞生了
flex 容器配置项
标签属性使用方式：data-flex="xxx xxx xxx"
配置项
排列形式: row | column
间距: gutter
内容水平垂直居中: center
可换行: wrap
主轴对齐方式: main-start | main-center | main-end | main-between | main-around
交叉轴对齐方式: cross-start | cross-center | cross-end | cross-baseline | cross-stretch
多轴对齐方式: start | end | center | between | around | stretch
响应式: fullflex 项目的配置项
标签属性使用方式：data-cell="xxx xxx xxx"
配置项
元素自身对齐方式: start | end | center | baseline | stretch
固定宽度: 1/2 | 1/3 | 1/4 | 1/5 | 1/6
排序: order[1-10]基础栅格系统
每项宽度相同，自然平分，高度默认都相同
<div data-flex="gutter">
<div data-cell><div class="item">auto</div></div>
<div data-cell><div class="item">auto</div></div>
<div data-cell><div class="item">auto</div></div>
<div data-cell><div class="item">auto</div></div>
<div data-cell><div class="item">auto</div></div>
</div>相对的固定宽度与自适应宽度
<div data-flex="gutter row">
<div data-cell="1/2"><div class="item">1/2</div></div>
<div data-cell><div class="item">auto</div></div>
<div data-cell><div class="item">auto</div></div>
</div>响应式
响应式栅格系统通过添加媒体查询到栅格元素或栅格容器来实现
当满足媒体查询的条件时，栅格系统就能自动调整
<div data-flex="full gutter">
<div data-cell><div class="item">full/auto</div></div>
<div data-cell><div class="item">full/auto</div></div>
<div data-cell><div class="item">full/auto</div></div>
</div>项目对齐
置顶对齐
项目默认是置顶对齐的，手动添加可以使用 cross-start
<div data-flex="gutter">
<div data-cell> <div class="item">置顶对齐</div></div>
<div data-cell> <div class="item">Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem.</div></div>
<div data-cell> <div class="item">置顶对齐</div></div>
</div>置底对齐
<div data-flex="gutter cross-end">
<div data-cell> <div class="item">置底对齐</div></div>
<div data-cell> <div class="item">Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem.</div></div>
<div data-cell> <div class="item">置底对齐</div></div>
</div>垂直居中对齐
<div data-flex="gutter cross-center">
<div data-cell> <div class="item">居中对齐</div></div>
<div data-cell> <div class="item">Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem.</div></div>
<div data-cell> <div class="item">居中对齐</div></div>
</div>混合对齐
为个别项目自身设置独立的对齐方式
<div data-flex="gutter">
<div data-cell="start"> <div class="item">居顶对齐</div></div>
<div data-cell="start"> <div class="item">Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem.</div></div>
<div data-cell="center"> <div class="item">居中对齐</div></div>
<div data-cell="end"> <div class="item">居底对齐</div></div>
</div>主轴起点对齐
<div data-flex="gutter main-start">
<div data-cell="1/5"> <div class="item">居左对齐</div></div>
</div>
<div data-flex="gutter main-center">
<div data-cell="1/5"> <div class="item">居中对齐</div></div>
</div>
<div data-flex="gutter main-end">
<div data-cell="1/5"> <div class="item">居右对齐</div></div>
</div>主轴两端对齐
<h5>两端对齐</h5>
<div data-flex="gutter main-between">
<div data-cell="1/5"> <div class="item">两端对齐</div></div>
<div data-cell="1/5"> <div class="item">两端对齐</div></div>
<div data-cell="1/5"> <div class="item">两端对齐</div></div>
</div>主轴分散对齐
<h5>分散对齐</h5>
<div data-flex="gutter main-around">
<div data-cell="1/5"> <div class="item">分散对齐</div></div>
<div data-cell="1/5"> <div class="item">分散对齐</div></div>
<div data-cell="1/5"> <div class="item">分散对齐</div></div>
</div>
```html### 无限嵌套
栅格可以无限嵌套在另一个栅格中<div data-flex="gutter">
<div data-cell>
<div class="item"> <div data-flex="gutter"> <div data-cell><div class="item">1</div></div> <div data-cell> <div class="item"> <div data-flex="gutter"> <div data-cell><div class="item">2</div></div> <div data-cell><div class="item">2</div></div> </div> </div> </div> </div></div></div>
<div data-cell="1/4"><div class="item">1/4</div></div>
</div>
### 自定义顺序<div data-flex="gutter">
<div data-cell="order5"><div class="item">1</div></div>
<div data-cell="order3"><div class="item">2</div></div>
<div data-cell="order2"><div class="item">3</div></div>
<div data-cell="order1"><div class="item">4</div></div>
<div data-cell="order4"><div class="item">5</div></div>
</div>
## 兼容性
flex在演化过程有三个版本，旧版本 display:box | inline-box, 混合版本 display:flexbox | inline-flexbox, 新版本 display: flex | inline-flex.box{
display: -webkit-box; / 老版本语法: Safari, iOS, Android browser, older WebKit browsers. /
display: -moz-box; / 老版本语法: Firefox (buggy) /
display: -ms-flexbox; / 混合版本语法: IE 10 /
display: -webkit-flex; / 新版本语法: Chrome 21+ /
display: flex; / 新版本语法: Opera 12.1, Firefox 22+ /
}
旧版相对于新版的主要区别：flex项目必须是block，没有换行设置，没有反向设置，主轴没有space-around，顺序值从1开始
参考文章：Flex布局应用
博客地址：https://ainyi.com/53
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。