Html——flex布局弹性布局

以下文章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案。

一、flex布局的语法

块级元素：display: flex ———— 将容器盒模型作为块级弹性伸缩盒显示

行内元素：display: inline-flex ———— 将容器盒模型作为内联级弹性伸缩盒显示

设置flex布局后，flex item的float、clear和vertical-align 属性都失效

flex布局默认为横向

二、容器属性

flex的排列属性：

元素名称	说明
flex-direction：column	设置从上往下排列
flex-direction：row	设置从左到右排列
flex-direction：row-reverse	设置从右到左排列
flex-direction：column	设置从上到下排列
flex-direction：column-reverse	设置从下到上排列

#div{display:flex;flex-direction：column
}—————— 当子级flex为1时，设置属性自动均分

flex换行属性：

没有设置子级flex为1时：flex-wrap

没有设置高度时会均分父级

元素名称	说明
flex-wrap：nowrap	默认值，都在一行或一列显示
flex-wrap：wrap	伸缩项目无法容纳时，自动换行
flex-wrap：wrap-reverse	伸缩项目无法容纳时，自动换行，方向和 wrap 相反

当 flex-wrap: nowrap 时 ———— 默认值，都在一行或一列显示：

当 flex-wrap：wrap 时 ————伸缩项目无法容纳时，自动换行：

当 flex-wrap：wrap-reverse 时 ———— 伸缩项目无法容纳时，自动换行，方向和 wrap 相反：

flex-flow: row wrap; ———— 可同时设置排列方向和换行

伸缩属性：

元素名称	说明
justify-content：flex-start	伸缩项目以起始点靠齐
justify-content：flex-end	伸缩项目以结束点靠齐
justify-content：center	伸缩项目以中心点靠齐
justify-content：space-between	伸缩项目平均分布
justify-content：space-around	伸缩项目平均分布，但两端保留一半的空间

当 justify-content：flex-start 时 ————伸缩项目以起始点靠齐：

当 justify-content：flex-end 时 ———— 伸缩项目以结束点靠齐：

当 justify-content：center 时 ———— 伸缩项目以中心点靠齐：

当 justify-content：space-between 时 ———— 伸缩项目平均分布：

当 justify-content：space-around 时 ———— 伸缩项目平均分布，但两端保留一半的空间：

align-items属性： ———— 处理伸缩项目容器的额外空间

元素名称	说明
align-itmes：flex-start	伸缩项目以顶部为基准，清理下部额外空间
align-itmes：flex-end	伸缩项目以底部为基准，清理上部额外空间
align-itmes：center	伸缩项目以中部为基准，平均清理上下部额外空间
align-itmes：baseline	伸缩项目以基线为基准，清理额外的空间
align-itmes：stretch	伸缩项目填充整个容器，默认

align-content属性： ———— 定义了多根轴线对齐方式

align-content这个属性设置排列方向之后，并且设置换行，这个属性才会起作用。

会拉伸每个项目的所占空间，填充方式为每个项目的下方去增加空白，每一个项目默认从容器顶端开始排列。

元素名称	说明
align-content：flex-start	与交叉轴的起点对齐
align-content：flex-end	与交叉轴的终点对齐
align-content：center	与交叉轴的中点对齐
align-content：space-between	与交叉轴两端对齐，轴线之间的间隔平均分布
align-content：space-around	每根轴线两侧的间隔都相等，所以，轴线之间的间隔比线与边框的间隔大一倍
align-content：stretch	轴线占满整个交叉轴

当 align-content：flex-start 时 ———— 与交叉轴的起点对齐 :

当 align-content：flex-end 时 ———— 与交叉轴的终点对齐：

当 align-content：center 时 ———— 与交叉轴的中点对齐 :

当 align-content：space-between 时 ———— 与交叉轴两端对齐，轴线之间的间隔平均分布 :

当 align-content：space-around 时 ———— 每根轴线两侧的间隔都相等，所以，轴线之间的间隔比线与边框的间隔大一倍：

当 align-content：stretch 时 ———— 轴线占满整个交叉轴

三、项目属性

结构：


<body><div id="box"><div class="item">1111</div><div class="item">2222</div><div class="item">3333</div><div class="item">444</div></div>
</body>

order 定义项目的排列顺序，数值越小排列越靠前，默认为0

例：

 <style type="text/css">* {margin: 0;padding: 0;box-sizing: border-box;}/* 定义项目的排列顺序，数值越小排列越靠前，默认为0 */#box {width: 600px;height: 300px;margin: 100px auto;background-color: plum;display: flex;}.item {width: 100px;background-color: gold;}.item:first-child {height: 20px;margin-right: 10px;order: 3;}.item:nth-child(2) {height: 30px;margin-right: 10px;}.item:nth-child(3) {height: 70px;margin-right: 10px;order: 0;}.item:last-child {height: 50px;margin-right: 10px;order: 2;}</style>

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

例：


<style type="text/css">* {margin: 0;padding: 0;box-sizing: border-box;}#box {width: 600px;height: 300px;margin: 100px auto;background-color: plum;display: flex;}.item {background-color: gold;flex-grow: 1;/* 分配剩余平均空间 ，平均分配的含义是，去掉内容后的空间进行均分，如果本身内容多，虽然均分，但还是占比较大空间*/}.item:first-child {height: 20px;}.item:nth-child(2) {height: 30px;}.item:nth-child(3) {height: 70px;}.item:last-child {height: 50px;}
</style>

flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

例：

     <style type="text/css">* {margin: 0;padding: 0;box-sizing: border-box;}#box {width: 600px;height: 300px;margin: 100px auto;background-color: plum;display: flex;}.item {width: 200px;background-color: gold;}.item:first-child {height: 20px;flex-shrink: 0;/* 不缩放 */}.item:nth-child(2) {height: 30px;}.item:nth-child(3) {height: 70px;flex-shrink: 5;/* 严重缩放 */}.item:last-child {height: 50px;}</style>

flex-basls 定义在分配多余空间之前，项目占据的主轴空间

例：

<style type="text/css">* {margin: 0;padding: 0;box-sizing: border-box;}/* 设置同一行内排列属性，默认值为平均分配 */#box {width: 600px;height: 300px;margin: 100px auto;background-color: plum;display: flex;}.item {height: 50px;text-align: center;border: 1px solid aqua;background-color: gold;/* 第一步：平均分配剩余空间 */flex-grow: 1;}.item:first-child {background-color: #FFFF00;/* 第二步，想占多少地方，可以设置宽度 */-width: 150px;flex-basis: 150px;-flex-basis: 40%;-flex-basis: 20rem;}.item:nth-child(2) {background-color: chocolate;/* 第三步：默认值auto */flex-basis: auto;}.item:nth-child(3) {background-color: #008000;}.item:last-child {background-color: red;}</style>

align-self 定义交叉轴上的对齐方式，可单独设置父级下的子级位置

例：

     <style type="text/css">*{margin: 0;padding: 0;box-sizing: border-box;}#box{width: 600px;height: 300px;margin: 100px auto;background-color: skyblue;display: flex;align-items: center;}.item{background-color: red;border: 1px solid yellow;height: 50px;line-height: 50px;text-align: center;color: #fff;flex: 1;}.item:first-child{background-color: gold;}.item:nth-child(2){background-color: chocolate;align-self: flex-start;-align-self: flex-end;-align-self: baseline;-align-self: stretch;}.item:last-child{background-color: green;align-self: flex-end;}</style>

flex 是复合属性，代表flex-grow，flex-shrink和 flex-basis的简写