CSS布局之flex弹性布局

1、Flex简介

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

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

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

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

2.基本术语

2.1.Flex容器(flex container)

采用flex布局的元素, 称为flex容器, 简称容器

2.2.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>

2.3.主轴(main axis)

主轴也叫水平轴, 横轴,x轴

• main start: 起始位置
• main end: 结束位置
• main size: 单个项目占据的主轴空间

2.4.交叉轴(cross axis)

交叉轴也叫垂直轴,坚轴,y轴

• cross start: 起始位置
• cross end: 结束位置
• cross size: 单个项目占据的交叉轴空间

3.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	项目在多根轴线上的对齐方式,只有一根轴线无效

3.1.flex-direction 

功能: 决定项目在主轴上的排列方向

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

CSS语法:

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

3.2.flex-wrap

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

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

CSS语法

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

3.3.flex-flow

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

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

3.4. justity-content

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

CSS语法:

.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	项目两侧间隔相等,即项目之间间隔是项目到两端的二倍
6	space-evenly	平均分配主轴上的剩余空间

3.5. align-items 

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

CSS语法:

.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有效)

3.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;
}

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