flex布局(display:flex)

传统布局:兼容性好,布局繁琐,局限性,不能在移动端很好的布局
flex弹性布局:操作方便,布局极为简单,移动端应用很广泛
Pc端浏览器支持情况较差,ie11更低版本不支持或仅部分支持

常见父项属性(控制子元素,通过父亲来控制)
1.flex-direction:设置主轴(x轴)的方向【主轴和侧轴可以相互转换,就看该属性把哪个方向设置为主轴】(row [x轴默认],row-reverse[翻转从右往左排列] ,column[主轴为y轴])
2.justify-content:设置主轴上的子元素排列方式(使用前确定哪个方向是主轴)默认从从左到右(flex-start),flex-end(从右到左排列),center(居中对齐)space-around(平均分配剩余空间),space-between(左右两个元素先两边贴边,在平分剩余空间)
3.flex-wrap:设置子元素是否换行(默认(nowrap)如果当一行摆不开时,会硬放到一行,吧其它(元素)盒子宽度变小)(设置wrap会进行换行)
4.align-content:设置侧轴(y轴垂直向下)上子元素的排列方式(适用于多行排列,在单行情况下无效),flex-start(默认值在侧轴及y轴的头部开始排列),flex-end(在侧轴的尾部开始排列),center(在侧轴居中显示),space-around(子项在侧轴平均分配剩余空间),space-between(子元素在侧轴先分布在两头,在平均分配剩余空间),stretch(设置子元素高度平均分父元素高度)。
5.align-items:设置侧轴上的子元素排列方式(适用于单行排列) center(垂直居中),flex-start垂直居上,stretch(沿着y轴拉伸,但是子元素不要给高度)
6.flex-flow;复合属性,相当于同时设置了flex-direction和flex-wrap(flex-flow:row wrap)

常见子元素属性
flex:number > (定义子元素(分配剩余空间),用flex来表示占多份,0占0份,1占1份…)
{案例圣杯布局}
==> 左侧固定,右侧固定,中间自适应(及左右给定固定宽高,中间元素设置flex:1).
假如有一个父元素,三个子元素,flex:1 不给子元素设置宽度,3个子元素会平均分配父元素的剩余空间。如果第二个子元素的所占空间想变大,就给他设置
flex:2(或者更大)。

align-self:> 这样可以控制某一个子元素(子元素自己控制自己)。
order:
> 控制模块排列顺序,数字越小,排序越靠前,默认为0,所以可以给盒子order设置负值,把模块放到前面,或者把设置比0大的数把模块放到后面。

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页