Flex 布局教程

水深无声 2021-12-14 03:21 394阅读 0赞

CSS3为我们提供了一种可伸缩的灵活的web页面布局方式-flexbox布局，它具有很强大的功能，可以很轻松实现很多复杂布局。然而Flex属性较多，不便于记忆，而在项目中，布局使用频繁，那么可以将flex抽离为一个布局工具类，简化使用方式，快速应用于项目，减少记忆成本。

## Flex介绍 ##

Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 Flex是 **Flexible Box** 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

## 基本概念 ##

采用Flex布局的元素为，称为 `Flex容器`，容器的直接子元素称为 `Flex项目`，容器默认有两个轴心线，用于项目的对齐与排列，水平主轴为 `main axis`，垂直主轴为 `cross axis`，主轴的开始位置为 `start`， 结束位置为 `end`。

**主轴和交叉轴的判定：如果flex-direction为row，则主轴是水平方向，如果是column，则主轴是垂直方向**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhb2tkaWRpYW8_size_16_color_FFFFFF_t_70][]

## CSS属性说明 ##

将任意元素的 `display` 属性设置为 `flex`，可将其转换为Flex容器 设为Flex容器后，子元素的 `float`、`clear` 和 `vertical-align` 属性将失效

### Flex容器属性 ###

主轴方向：水平排列（默认） | 水平反向排列 | 垂直排列 | 垂直反向排列
    flex-direction: row | row-reverse | column | column-reverse;
    
    换行：不换行（默认） | 换行 | 反向换行(第一行在最后面)
    flex-wrap: nowrap | wrap | wrap-reverse;
    
    flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
    flex-flow: <flex-direction> || <flex-wrap>;
    
    主轴对齐方式：起点对齐（默认） | 终点对齐 | 居中对齐 | 两端对齐 | 分散对齐
    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项目属性 ###

顺序：数值越小越靠前，默认为0
    order: <number>; 
    
    放大比例：默认为0，如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推
    flex-grow: <number>; 
    
    缩小比例：默认为1，如果空间不足则会缩小，值为0不缩小
    flex-shrink: <number>;
    
    项目自身大小：默认auto，为原来的大小，可设置固定值 50px/50%
    flex-basis: <length> | auto;
    
    flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
    两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
    flex:none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    
    项目自身对齐：继承父元素（默认） | 起点对齐 | 终点对齐 | 居中对齐 | 基线对齐 | 拉伸对齐
    align-self: auto | flex-start | flex-end | center | baseline | stretch;

## flex.css的使用 ##

使用data属性来设置css样式，便于兼容现有的项目，避免样式重名。

### Flex容器配置项   http://edu.duolaimier.cn ###

标签属性使用方式: `data-flex="xxx xxx xxx"`

配置项

### Flex项目的配置项   http://edu.duolaimier.cn ###

标签属性使用方式: `data-cell="xxx xxx xxx"`

配置项

元素自身对齐方式: start | end | center | baseline | stretch
    固定宽度: 1/2 | 1/3 | 1/4 | 1/5 | 1/6
    排序: order[1-10]

### 使用   http://edu.duolaimier.cn ###

基础栅格系统

每项宽度相同，自然平分，高度默认都相同

相对的固定宽度与自适应宽度

响应式

响应式栅格系统通过添加媒体查询到栅格元素或栅格容器来实现。 当满足媒体查询的条件时，栅格系统就能自动调整。

项目对齐

置顶对齐 项目默认是置顶对齐的，手动添加可以使用 `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>

主轴起点对齐

主轴两端对齐

主轴分散对齐

无限嵌套

栅格可以无限嵌套在另一个栅格中

自定义顺序

## 兼容性 ##

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开始**

关于新旧版的详情对比可参考下面两篇

*  [深入理解CSS弹性盒模型flex][CSS_flex]
 *  [CSS旧版flex及兼容][CSS_flex 1]

这里我们使用 `postcss` 插件 `autoprefixer` 来自动处理新旧版的兼容，配置如下:

autoprefixer({
    	browsers: [
    	  'ie >= 8',
    	  'ie_mob >= 10',
    	  'ff >= 26',
    	  'chrome >= 30',
    	  'safari >= 6',
    	  'opera >= 23',
    	  'ios >= 5',
    	  'android >= 2.3',
    	  'bb >= 10'
    	]
    })

\*\* 这里只做了语法上的兼容，但是旧版所没有的特性仍然要警慎使用，参考上面的区别，相信以后随着浏览器的升级，差别会越来越小 \*\*

示例

`flex.css` 的具体源码，请参考示例

See the Pen <a href='http://codepen.io/togglelt/pen/BpPJQP/'>Flex布局应用</a> by LT (<a href='http://codepen.io/togglelt'>@togglelt</a>) on <a href='http://codepen.io'>CodePen</a>.

参考阅读

*  [Flex 布局教程：语法篇][Flex]
 *  [Flex 布局教程：实例篇][Flex 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhb2tkaWRpYW8_size_16_color_FFFFFF_t_70]: /images/20211213/2d081190568147ed95ed2da3e4d97335.png
[CSS_flex]: https://link.juejin.im?target=http%3A%2F%2Fwww.cnblogs.com%2Fxiaohuochai%2Fp%2F5323146.html
[CSS_flex 1]: https://link.juejin.im?target=http%3A%2F%2Fwww.cnblogs.com%2Fxiaohuochai%2Fp%2F5334936.html
[Flex]: https://link.juejin.im?target=http%3A%2F%2Fwww.ruanyifeng.com%2Fblog%2F2015%2F07%2Fflex-grammar.html
[Flex 1]: https://link.juejin.im?target=http%3A%2F%2Fwww.ruanyifeng.com%2Fblog%2F2015%2F07%2Fflex-examples.html