CSS弹性布局（Flex）详解

Flex 布局是什么?

Flex 简介

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

代码语言：javascript复制

/* 块元素可以设置为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项目都支持宽高设置, 哪怕它之前是内联元素,类似于浮动元素

代码语言：javascript复制

<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	主轴方向(即项目排列方向)
2	flex-wrap	当多个项目在一行排列不下时,如何换行
3	flex-flow	flex-direction,flex-wrap的简写,默认:row nowrap
4	justify-content	项目在主轴上对齐方式
5	align-items	项目在交叉轴上的对齐方式
6	align-content	项目在多根轴线上的对齐方式,只有一根轴线无效

1. flex-direction

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

序号	属性值	描述
1	row 默认值	主轴为水平方向,起点在左边
2	row-reverse	主轴为水平方向, 起点在右边(反转)
3	column	主轴为垂直方向, 起点在上边
4	column-reverse	主轴为垂直方向, 起点在下边

CSS语法:

代码语言：javascript复制

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

2. flex-wrap

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

序号	属性值	描述
1	nowrap 默认值	不换行
2	wrap	自动换行, 第一行排列不下, 自动转到下一行
3	wrap-reverse	自动反向换行, 第一行显示在下方, 与wrap相反

CSS语法

代码语言：javascript复制

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

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

3. flex-flow

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

代码语言：javascript复制

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

4. justity-content

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

代码语言：javascript复制

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

属性值说明

序号	属性值	描述
1	flex-start 默认值	左对齐
2	flex-end	右对齐
3	center	居中对齐
4	space-between	两端对齐: 项目之间间隔相等
5	space-around	项目两侧间隔相等,即项目之间间隔是项目到两端的二倍

5. align-items

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

代码语言：javascript复制

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

属性值说明:

序号	属性值	描述
1	flex-start	与交叉轴起点对齐, 即: 顶对齐 / 上对齐
2	flex-end	与交叉轴终点对齐, 即: 底对齐 / 下对齐
3	center	与交叉轴中间线对齐, 即: 居中对齐
4	baseline	与项目中第一行文本的基线对齐, 即文本的下边线
5	stretch 默认值	自动伸展到容器的高度(项目未设置高度或将高度设置为auto有效)

6. align-content

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

代码语言：javascript复制

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

属性值说明:

序号	属性值	描述
1	flex-start	与交叉轴起点对齐
2	flex-end	与交叉轴终点对齐
3	center	与交叉轴中间点对齐
4	space-between	与交叉轴两端对齐, 轴线之间间隔相等
5	sapce-around	每根轴线间隔相等,轴线间隔比轴线到边框大一倍
6	stretch 默认值	轴线占满整个交叉轴

总结

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

代码语言：javascript复制

.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
2	flex-grow	定义项目的放大比例,默认为0表示不放大, 即就算存在剩余空间也不放大
3	flex-shrink	定义了项目的缩小比例,默认为1,即如何空间不足,则自动缩小项目来填充
4	flex-basis	定义了项目占据的主轴空间,默认值为auto, 即项目原始大小
5	flex	是flex-grow,flex-shrink,flex-basis简写,默认值: 0 1 auto, 后二个属性可选
6	align-self	个性化定定制某单个项目的对齐方式,可覆盖容器align-items属性,默认auto

1. order

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

代码语言：javascript复制

.item {
  order: integer;
}

示意图:

2. flex-grow

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

代码语言：javascript复制

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

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

3. flex-shrink

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

代码语言：javascript复制

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

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

4. flex-basis

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

代码语言：javascript复制

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

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

代码语言：javascript复制

.item {
  flex-basis: 500px;
}

5. flex

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

代码语言：javascript复制

.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语法:

代码语言：javascript复制

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

css 容器 flex 布局语法

0 人点赞

CSS弹性布局（Flex） 详解

目录

Flex 布局是什么?

Flex 简介

Tips: 布局演变史

1. 表格布局table

2. 定位布局positon

3. 浮动布局float

4. 弹性布局flex

5. 网格布局grid

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

Flex基本概念

基本术语

Flex容器属性

1. flex-direction

2. flex-wrap

3. flex-flow

4. justity-content

5. align-items

6. align-content

总结

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

属性总结:

Flex项目属性

1. order

2. flex-grow

3. flex-shrink

4. flex-basis

5. flex

6. align-self

CSS弹性布局（Flex）详解

1. 表格布局`table`

2. 定位布局`positon`

3. 浮动布局`float`

4. 弹性布局`flex`

5. 网格布局`grid`