CSS弹性布局（Flex） 详解

目录

Flex 布局是什么?

Flex 简介

• Flex 是 Flexible Box的缩写, 意思是"弹性布局", 用来为盒状模型提供最大的布局灵活性
• 任何一个容器都可以设置为Flex布局模式

/* 块元素可以设置为Flex容器 */
.container {
  display: flex;
}

/*内联元素也可以设置为Flex*/
span {
  display: inline-flex;
}

/* WebKit内核浏览器,如Safari, 需要加前缀*/
div {
  display: -webkit-flex;    /*Safari*/
  display: lfex;
}

• 一旦设置为Flex容器, 则容器内子元素的float, clear, vertical-align属性全部失去意义, 没有效果了
• 由此可见, Flex布局的目标明确, 就是要把Float布局拍死在沙滩上

Tips: 布局演变史

1. 表格布局table

• 世界第一个网页诞生于1990年12月20日, 依赖HTML中的<table>标签来实现
• 页面随着内容的不断增加, 会变更越来越臃肿, 难以维护

2. 定位布局positon

• 随着页面复杂度的不断提升, 更多的属性被添加到HTML, CSS中
• 其中, CSS中的position属性具有革命性
• 使页面中的元素可以摆脱表格单元格的束缚,可以定位到窗口中的任何位置

3. 浮动布局float

• 浮动float技术的初衷并不是为了布局, 而是用来处理文本与图片的排版问题
• 因为任何元素一旦浮动就会变成块元素,从而可以设置宽高, 非常适合页面布局
• 所以, 网页设计师就使用float再配合<div>,<span>,几乎可以完全任何页面布局
• 但是元素浮动后, 为了防止对它后面的同级元素产生影响, 就必须清除浮动clear
• 另外, 当元素之间具有层级关系时, 子元素的浮动会导致父元素失去高度
• 当然浮动千万的问题远不止以上几点,所以,业界一直在寻求一种真正布局技术

4. 弹性布局flex

• 我们知道,浮动布局很容易实现元素水平居中, 但是垂直居中就非常的困难,实现起来很麻烦
• 用浮动技术来进行网页布局,是一种"无心插柳柳成萌"的结果, 算是一种巧合吧
• 使用Flex弹性布局, 就是针对浮动布局的所有痛点而生, 元素浮动的后遗症全部解决
• 所以在Flex容器中, 不能,也没必要更使用float属性,没了浮动当然也不再需要clear
• Flex有自己的元素垂直对齐解决方案, 所以vertical-align属性也失效

5. 网格布局grid

• 不得不说, 世间万物就是一个轮回, 曾经那么令人不堪的表格布局,居然回归了
• 表格布局尽管有那么多的缺点,但是它的优势也非常明显,就是简单, 直观
• 其实就这一条, 就足以征服所以设计师,简单直观难道不是我们一直追求的目标吗?
• 如果有一种布局方式, 即有表格的简单直观, 又有弹性盒子的友好体贴, 那该有多好?
• 这个愿意现在终于实现了, 网格布局(Grid)横空出世
• 网格布局集美貌与智慧于一身, 同时具备了表格布局与弹性布局的所有优点
• 这么好的东西, 可惜很多浏览器支持情况不乐观, 移动端支持好一些
• 但相信, 会有越来越多的浏览器加入到网格布局的行列中, 大家现在学习正当时

Tips: 布局演变史: 表格(table) ==> 定位(position) ==> 浮动(float) ==> 弹性(flex) ==> 网格(grid, 发展中...)

网页布局（layout）是 CSS 的一个重点应用。

• 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
• 2009年, W3C提出一个新方案: Flex布局
• 可简更加的简单的实现,响应式的布局, 并且得到了几乎所有浏览器的支持, 所以请放心大胆的用吧
• 所以, Flex必将成为未来布局的首选方案

Flex基本概念

基本术语

• Flex容器(flex container):
  • 采用flex布局的元素, 称为flex容器, 简称容器
• Flex项目(flex item):
  • Flex容器中的所有成员(子元素)会自动成为该容器的成员,称为flex项目,简称项目
  • flex项目都支持宽高设置, 哪怕它之前是内联元素,类似于浮动元素

<style>
  /*flex容器*/
  .contaier {
    display: flex;
  }
  /*flex项目*/
  .item {
    ...
  }
</style>
...
<div class="container">
  <span class="item">item1</span>
  <span class="item">item2</span>
  <span class="item">item3</span>
</div>

• 主轴(main axis):
  • 也叫水平轴, 横轴,x轴
  • main start: 起始位置
  • main end: 结束位置
  • main size: 单个项目占据的主轴空间
• 交叉轴(cross axis):
  • 也叫垂直轴,坚轴,y轴
  • cross start: 起始位置
  • cross end: 结束位置
  • cross size: 单个项目占据的交叉轴空间

Flex容器属性

容器属性汇总:

1. flex-direction

• 功能: 决定项目在主轴上的排列方向
• 它有四个可能的值:

• CSS语法:

.container {
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
}

2. flex-wrap

• 功能: 多个项目默认排列在一根轴线上,该属性定义了当一根轴线排列不下时,多作的项目的换行方式

• CSS语法

.container {
  display: flex;
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• 属性值说明:
  • nowrap: (默认值)不换行
  • wrap: 自动换行
  • wrap-reverse: 自动反向换行

3. flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

.container {
  display: flex;
  flex-flow: [flex-direction] || [flex-wrap];
  /*默认*/
  flex-flow: row nowrap;
}

4. justity-content

• 功能: 设置项目在主轴上的对齐方式
• CSS语法:

.container {
  display: flex;
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

• 属性值说明

5. align-items

• 功能: 该属性设置项目在交叉轴上的对齐方式
• CSS语法:

.container {
  display: flex;
  align-items: flex-start | flex-end | center | baseline | stretch;
}

• 属性值说明:

6. align-content

• align-items和align-content有相同的功能，不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中
• align-content属性只适用于多行的flex容器，并且当交叉轴上有多余空间使flex容器内的flex线对齐
• align-items属性适用于所有的flex容器，它是用来设置每个flex元素在交叉轴上的默认对齐方式
• 该属性的重点,在于多行项目, 这是与align-items最重要的区别
• CSS语法:

.container {
  display: flex;
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

• 属性值说明:

总结

一个弹性盒子容器的默认状态如下:

.container {
  /*弹性布局*/
  display: flex;
  
  /*以下弹性盒子容器全部属性以及默认值,即弹性盒子的默认状态*/
  
  /*1. 主轴方向: 行(水平)*/
  flex-direction: row;
  
  /*2. 多个项目换行方式: 不换行*/
  flex-wrap: nowrap;
  
  /*3. 多个项目在主轴上的排列与换行方式的简写*/
  flex-flow: row nowrap;
  
  /*4. 多个项目在主轴上的对齐方式: 左对齐*/
  justify-content: flex-start;
  
  /*5. 多个项目在交叉轴上的对齐方式: 自动伸展到容器高度*/
  align-items: stretch;
  
  /*6. 多个项目分为多行时, 在交叉轴上排列方式: 充满整个交叉轴*/
  align-content: stretch;
}

属性总结:

• 设置项目在主轴上的排列方向与换行方式
  • flex-direction: 项目在主轴上的排列方向
  • flex-wrap: 项目在主轴上的换行方式
  • flex-flow: 以上属性的缩写,默认: row nowrap
• 设置项目在主轴上的对齐方式
  • justity-content: 项目在主轴上的对齐方式
• 设置项目在交叉轴上的对齐方式
  • align-items: 适用于项目单行排列方式
  • align-content: 适合于项目多行排列方式

Flex项目属性

巧合的是, 在Flex项目也有6个可用的属性,他们分别是:

1. order

• 定义项目的排列顺序。数值越小，排列越靠前，默认为0
• CSS语法:

.item {
  order: integer;
}

• 示意图:

2. flex-grow

• 设置项目的放大比例, 默认为0: 不放大,哪怕轴上有剩余空间
• CSS语法:

.item {
  flex-grow: number; /* default: 0 */
}

• 空间分配方案小案例:
  • flex-grow: 1: 每个项目等分, 都占全部的空间的N分之一(N: 项目数量)
  • flex-grow: 2如果某个项目为2, 其它项目为1, 则它占据空间比其它项目多一倍
• flex从剩余空间中分配项目所占的份数
  • 前提是项目不要设置固定宽度, 由盒子在剩余空间中自动分配
  • 每个盒子所在比例可以各不相同, 属性值必须是数值,整数小数都可以
  • 如果盒子中存在有宽度的项目, 那么剩余空间应该减去它们

3. flex-shrink

• 设置了项目的缩小比例,默认为1, 即空间不足时, 自动缩小填充
• CSS语法:

.item {
  flex-shrink: number; /*defautl: 1*/
}

• 缩放规则
  • flex-shrink: 1: 所有项目都为1, 空间不足时, 自动等比例缩小填充主轴剩余空间
  • flex-shrink: 如果有一个项目为0, 其它项目为1, 则空间不足时, 它并不随其它项目缩小
  • 注意: 该属性不支持负值, 即flex-shrink: -1 无效

4. flex-basis

• 定义了在计算分配主轴上剩余空间之前, 项目占据的主轴空间(main size)
  • 浏览器根据该属性,可以计算出主轴上是否还有剩余空间, 决定是否换行
  • 默认值为auto, 即项目原来占据的空间大小
• CSS语法:

.item {
  flex-basis: length | auto; /* default auto */
}

你可以设置与height或者width属性一样的绝对值,例如500px,则该项目占据固定的空间大小

.item {
  flex-basis: 500px;
}

5. flex

• flex属性是前面flex-grow,flex-shrink和flex-basis属性的简写
• 默认值: 0 1 auto, 除第一个外, 其它二个可选
• CSS语法:

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

• 由于该属性极其常用, 为了简化, Flex布局还为该属性设置了快捷值
  • flex: auto: 等价于flex: 1 1 auto
  • flex: none: 等价于flex: 0 0 auto
• 推荐优先使用flex属性, 由浏览器自动计算出其它属性的值

6. align-self

• 该属性允许单个项目有与其它项目不一样的对齐方式, 可覆盖掉容器的flex-items属性
• 默认值: auto,表示继承父元素的align-items,如果没有父元素,则等价于stretch
• CSS语法:

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}