博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
flex布局常用
阅读量:7070 次
发布时间:2019-06-28

本文共 809 字,大约阅读时间需要 2 分钟。

1.flex-direction:决定主轴方向

row:主轴为水平方向。排列为从左至右。

column:主轴为竖直方向。排列为从上至下。

row-reverse:主轴为水平方向。排列为从右至左。

column-reverse:主轴为竖直方向。排列为从下至上。

2.flex-wrap:默认情况,排列在一条线上,即主轴上,flex-wrap决定当排列不下时是否换行以及换行的方式

nowrap:自动缩小项目,不换行。

wrap:换行,第一行在上。

wrap-reverse:换行,第一行在下。

3.justify-content 决定子元素在主轴上的对齐方式

flex-start:左对齐。

flex-end:右对齐。

space-betwenn:两端对齐。

space-around:沿轴线均匀分布。

4.align-items 决定子元素在交叉轴的对其方式

flex-start:顶端对齐。

flex-end:底部对齐。

center:竖直方向居中对齐。

stretch:如子元素未设置高度,子元素将和容器等高对齐。

5.align-content 该属性定义了当有多根主轴时,即子元素不止一行时,多行在交叉轴轴上的对齐方式。注意当有多行时,定义了align-content后,align-items属性将失效

flex-start:左对齐。

flex-end:右对齐。

center:居中对齐。

space- between:两端对齐。

space-around:沿轴线均匀分布。

stretch:各行将根据其flex-grow值伸展以充分占据剩余空间。

 5.flex-grow

定义了当flex容器有多余空间时,子元素是否放大。默认值为0,即当有多余空间时也不放大;可能的值为整数,表示不同的子元素的放大比例。

转载于:https://www.cnblogs.com/xpcool/p/10252874.html

你可能感兴趣的文章
IOS7为什么遭吐槽?
查看>>
Android和.NET通用的AES算法
查看>>
Java那些事之磁盘操作
查看>>
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)...
查看>>
【学习】HTML5深入学习
查看>>
windows计数器和瓶颈
查看>>
浅谈VS编译自定义编译任务—MSBuild Task(csproject)
查看>>
推荐20个优秀的网页色彩搭配实例
查看>>
搜集点shell资料
查看>>
望江南
查看>>
P42S25C查看开机次数、时间、坏点的方法
查看>>
node.js 初体验
查看>>
Cnblogs metaweblog api link
查看>>
wcf的部署
查看>>
在自己实现的ios画图程序中如何实现橡皮擦功能
查看>>
android开发录音和播放录音的例子
查看>>
Hibernate中one-to-one的深入学习
查看>>
开发人员经常会使用的15个jquery谷歌地图插件
查看>>
wcf out参数 异步调用问题
查看>>
ASP.NET MVC集成EntLib实现“自动化”异常处理[实例篇]
查看>>