使用display:flex 弹性布局

这是我写的第一篇博客，文章部分转至网络，部分来自自己的理解，如有错误之处，望指出。

文章里所用的大部分图片和部分观点采用来至阮一峰博客《flex布局教程：语法篇》

原文地址：flex布局教程：语法篇--阮一峰

一般传统的网页布局方式是采用盒模型+浮动+定位等，如需要实现完美的布局，就需要多种方式配合，这样会产生很多代码，不利于维护，为解决这种状况，CSS3的推出多种新的布局方式，来解决这种状况。

现在来讲讲flex布局

flex布局可以简单、响应式的实现页面布局。而它现以得到主流浏览器的支持。

一：基本概念

设置方式：将伸缩容器设置为display:flex.再设置flex的属性即可进行布局。

如将ul设为flex布局

ul{ display: flex; }行内元素也可设为flex布局 div{ display: inline-flex; }

flex容器内有两条轴，主轴（main axis）和侧轴（cross asix），每条轴都有起点和终点。

默认情况下，主轴和侧轴如下图进行排列。

而需要伸缩布局的父元素叫：伸缩容器

伸缩布局的元素叫：伸缩项

注意：伸缩容器设为flex后，伸缩项的floatv、clear、vertical-align将会失效。

二：伸缩容器可设置的属性

2.1设置主轴方向   flex-direction

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

row；（默认）主轴在水平方向，起点在左端 row-reverse；主轴在水平方向，起点在右端 column;主轴在垂直方向，起点在上沿 column-reverse;主轴在垂直方向，起点在下沿

注意：无论主轴方向如何改变，主轴和侧轴都会以垂直交叉的方式呈现。也就是说，改变了主轴方向，会连侧轴也一起改变。

2.2主轴对齐方式 justify-content

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

flex-start;（默认值）主以轴开始的方向开始对齐。 flex-end；主轴反方向对齐 center居中对齐 space-between;两端对齐 space-around;让每个伸缩项的间隔都相等

2.3侧轴对齐方式  align-items

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

stretch：（默认）如伸缩项未设置高度或者设置为auto，则伸缩项会占满整个高度 flex-start:起点对齐 flex-end:终点对齐 center:居中对齐 baseline：以第一行文字的底线进行对齐。

2.4多行对齐方式   align-content

.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } 此属性是定义伸缩容器出现出行伸缩项的情况，如伸缩容器内的全部伸缩项只占据一行，则这属性不起作用。

stretch;（默认）占满整条轴 flex-start;以轴的起点对齐 flex-end；以轴的终点对齐 center;与轴的中点对齐 space-between;与轴的起点和终点对齐，中间平均分布 space-around；每一行的间隔都相等，注意：第一行和最后一行的边的距离是其他边距的2/1

2.5伸缩容器在一条线排不了伸缩项，是否换行   flex-warp

一般在默认情况下，伸缩容器内的伸缩项都会排成一行，这属性定义，如一行排不下伸缩项，是否进行换行 .box{ flex-wrap: nowrap | wrap | wrap-reverse; } nowrap:不进行换行

wrap:换行，在下方新开一行

warp-reverse:换行，在第一行上方新开一行

2.6 简写格式  flex-flow

.box { flex-flow: <flex-direction> || <flex-wrap>; }

flex-direction：主轴的方向  flex-wrap:是否换行 默认值是：row nowrap; 三：伸缩项可设置的属性 3.1伸缩项排列顺序  order 在伸缩项内设置，属性值是数字 如果想调整伸缩布局中伸缩项的排序，可以修改伸缩项的order属性来实现，按照数字的从小到大来排序 order的默认值是0 3.2放大 比例  flex-grow 在伸缩项内设置，属性值是数字。 默认为0，表示如果有剩余空间，也不放大 如果所有伸缩项的属性都为1，则会将伸缩容器的剩余部分，等分的分给伸缩项，如果一个伸缩项属性值为2，其他为1，则2占据的剩余部分空间是其他的伸缩项的两倍。 3.3缩小比例  flex-shrink 在伸缩项内设置，属性值是数字。 默认为1，表示如果伸缩容器的空间不足，自动将伸缩容器等分缩小。 如果一个伸缩项的属性值为0，其他都为1，则0不缩小，1的伸缩项等分缩小 3.4 伸缩项的宽度 flex-basis

.item { flex-basis: <length> | auto; } 相当于伸缩项的主轴空间的宽度，如伸缩项总长度大于或小于伸缩容器，浏览器会根据这个溢出空间或剩余空间进行伸缩项的缩小或扩大。 flex-basis是设置伸缩项缩小或扩大之前的占据主轴空间的宽度。 默认情况下，相当于伸缩项的宽度（因为主轴可以从横向改变为竖向）。 3.5侧轴对齐方式（单独设置）  align-self .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } 在伸缩项内设置，属性值和align-items一样,比align-item多以个auto属性。 不同的是这是在伸缩项内单独设置，align-items是在伸缩容器内统一设置。 3.6 缩写属性 flex .item { flex: flex-grow flex-shrink flex-basis; } flex属性可以定义三个属性的值，相当于缩写。 flex-grow：放大比例  flex-shrink：缩小比例 flex-basis：伸缩项长度 该属性有两个快捷设置：auto(1 1 auto)和none(0 0 auto)。

本文允许转载