flex布局及常用属性,学flex收藏这个用到翻出来就够用了!

924 阅读2分钟

常见父项属性

flex-direction:设置主轴方向

(主轴是y轴,那侧轴就是x轴,反之一样)

默认x轴(从左到右):row

从右到左:row-reverse

y轴(从上到下):column

从下到上:column-reverse

justify-content:设置主轴上的子元素排列方式

flex-start:默认值从头开始

flex-end:从尾部开始

center:在主轴居中对齐

space-around:平均分配剩余空间

space-between:先两边贴边再平分剩余空间

flex-wrap:设置元素是否换行

nowrap:默认值,不换行

wrap:换行

align-content:设置侧轴上的子元素排列方式(多行)

//侧轴就是上下,贴上还是贴下或者上下居中

flex-start:默认在侧轴的头部开始排列

flex-end:在侧轴的尾部开始排列

center:在侧轴的中间显示

space-around:子项在侧轴平分剩余空间

space-between:子项在侧轴先分布在两头,再分剩余空间

stretch:设置子项元素高度平分父元素高度

align-items:设置侧轴上的子元素排列方式(单行)

flex-start:默认值从上到下

flex-end:从下到上

center:挤在一起居中

stretch:拉伸

flex-flow:复合属性,相当于flex-direction和lex-wrap

子项常见属性

flex:子项目的份数,写数值即可

align-self:控制子项在自己侧轴的排列方式

允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性

默认值:auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

order:属性定义子项的排列顺序(前后顺序)

数值越小越靠前,默认为0,跟z-index不一样

背景线性渐变

background:linear-gradient(起始方向,颜色1,颜色2,...);

背景渐变必须加浏览器私有前缀

起始方向可以是:方位名词或度数,如果忽略默认就是top

  • 公_号❤;前端老实人,可以一起跟小伙伴交流学习哦!博主会尽最大努力帮你的!