css弹性布局

---

前言

在前端开发中，往往需要使用到各种CSS布局来搭建页面视图的结构框架。使得根据需求，将对应的内容在对应的位置。常见的CSS布局有： 简单的使用CSS 中 浮动属性 ( Float ) 来对布局进行控制；其次就是 使用CSS中的 定位属性 ( position ) 来对内容进行定位，这些都是CSS中比较基础的布局方式。

出现原因：布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
也因为网页开发业务需求的不断变得更加复杂，2009年，W3C 提出了一种新的方案----Flex 弹性布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。接下来，让我们简单了解一下它吧！

Flex 布局将成为未来布局的首选方案。本文介绍它的语法及使用案例。（ 转载自 大佬 阮一峰 关于 Flex布局 文章，阮一峰大佬文章 — 点击跳转 。）`

---

一、Flex 弹性布局的定义

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
任何一个容器都可以指定为 Flex 布局。

.box{
	display: flex;
	/* 行内元素也可以设置 Flex布局 */
	display: inline-flex;
	/* 不同的浏览器，需加不同的前缀，下列案例以 Safari 浏览器为例 */
 	display: -webkit-flex;
 }

    
    

    
    
1
2
3
4
5
6
7

提示： 但是需要注意的一点是，当我们设置flex布局之后， 弹性布局内的所有子元素，其中 float、clear 和 vertical-align 属性失效。

Flex布局 组成部分关系-可视化

默认属性布局下，组成部分图如下：

容器默认存在两根轴：水平的主轴（main axis） 和 垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

二、使用语法

2.1 flex容器的语法

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

> 2.1.1 flex-direction

flex-direction 属性决定主轴的方向（即项目的排列方向）。具体属性值及效果如下图所示：
文字描述：

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

> 2.1.2 flex-wrap属性

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

    
    

    
    
1
2
3

属性值描述：

1. nowrap（默认）：不换行。
   
2. wrap：换行，第一行在上方。
   
3. wrap-reverse：换行，第一行在下方。
   

> 2.1.3 flex-flow属性

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

.box {
    flex-flow: <flex-direction> <flex-wrap>;
    /* 相当于 margin 和 margin-top/margin-bottom 的关系 */
}

    
    

    
    
1
2
3
4

> 2.1.4 justify-content属性（常用）

justify-content 属性定义了项目在主轴上的对齐方式。

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

    
    

    
    
1
2
3

它可能取6个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
• space-evenly ( 一峰大佬并未写出的属性值 ) : 项目的分布，使任意两个项目之间的间距（以及到边缘的间距）相等。
  

> 2.1.5 align-items属性

align-items属性用于定义项目在交叉轴上的对齐方式，类似垂直版本的align属性。

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

    
    

    
    
1
2
3

它可能取以下5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下，即：flex-flow：row nowrap ；justify-content：flex-start （默认值）。

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

> 2.1.6 align-content属性

align-content属性定义了多根轴线的对齐方式，相当于把每一条轴线的内容当作一个整体，设置每个轴线的对齐方式，对齐样式相当于justify-content。如果项目只有一根轴线，该属性不起作用（当有且只有一条轴线，使用justify-content即可）。

justify-content 和 align-content 作用上，并无区别，algin-content在 wrap （允许换行） 的情况下才生效，实际上还在一个轴上。

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

    
    

    
    
1
2
3

它可能取以下5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下，即：flex-flow：row nowrap ；justify-content：flex-start （默认值）。

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

2.2 容器中项目 ( item ) 的属性

容器中的所有元素，被称为项目，其中项目的属性有以下6种：

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

具体简介如下：

> 2.2.1 order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0，如未设置，容器中的项目均按照文档流和样式作用下排列。

.item {
  order: <integer（整数）>;
}

    
    

    
    
1
2
3

> 2.2.2 flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

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

    
    

    
    
1
2
3

如果所有项目的 flex-grow 属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍, 此属性可实现 elementUi 中 layout布局的占比效果。

> 2.2.3 flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 ，如空间充足，则保持原有大小不变。

.item {
	flex-shrink: <number>; /* default 1 */
}

    
    

    
    
1
2
3

如果所有项目的 flex-shrink 属性都为1，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小。

提示：负值对该属性无效。

> 2.2.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

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

    
    

    
    
1
2
3

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

> 2.2.5 flex属性 ( 简写属性 )

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

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

    
    

    
    
1
2
3

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

> 2.2.6 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
	/* 属性值 和 align-items 的属性值一样，除 auto */
	align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

    
    

    
    
1
2
3
4

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

---

总结

以上就是有关Flex布局的相关知识点及各个属性值的简介，本文转载自 ‘阮一峰’ 大佬 的 flex布局 文章，主要讲解了 flex相关的理论知识。

介于本篇文章篇幅较长，具体使用方法及技巧，得需要在实际运用中，才能够体现出来。所以，将于 下一篇 文章，继续转载 ‘一峰’大佬 关于 flex布局案例的讲解，并且将参杂一些个人浅薄的见解，希望大家能够学习到更多东西！ 加油！

以下是一些flex布局的相关内容：

> flex布局 互动性演示网页：点击跳转

> flex布局 最新信息获取：点击跳转

> Github上，相关flex布局的插件：flex-layout

最后的最后，希望大家多多支持下，点赞关注呀！ 谢谢

</article>