使用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)。

本文允许转载