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

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

flex布局,弹性盒子

1.display:flex 设置flex布局后,子元素的float、clear和vertical-align属性将失效

2.flex-direction 决定主轴的方向(即项目的排列方向)

属性:row|row-reverse|colum|column-reverse

3.flex-wrap 设置换行方式

nowrap(不换行)|wrap(换行,第一行在上方)|wrap-reverse(换行,第一行在下方)

4.flex-flow:<flex-direction>||<flex-wrap>

5.justify-content 设置项目在主轴上的对齐方式

flex-start(左对齐)|flex-end(右对齐)|center(居中)|space-between(两端对齐,项目之间的间隔都相等)|space-around(每个项目两侧的间隔相等,所以项目之间的间隔比项目与边框间隔大一倍)

6.align-items 设置交叉轴上的对齐方式

flex-start|flex-end|center|baseline(项目的第一行文字的基线对齐)|stretch(占满整个容器高度)

7.align-content 设置多根轴线的对齐方式

flex-start|flex-end|center|space-between|space-around|stretch

8.order 设置项目的排列顺序,数值越小,排列越靠前,默认为0

9.flex-grow 设置项目的放大比例,默认为1

若一个项目的flex-grow为2,其他为1,则为2的占据为1的2倍

10.flex-shrink 设置项目的缩小比例,默认为1

11.flex none|[<flex-grow>|<flex-shrink>?||<flex-basis>]

12.align-self 设置单个项目与其他项目不一样的对齐方式

auto|flex-start|flex-end|center|baseline|stretch

 

 

 

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

转载于:https://www.cnblogs.com/witchgogogo/p/6659705.html

你可能感兴趣的文章
如何解酷派CPB包
查看>>
Linux 安装JDK,配置JAVA环境变量
查看>>
jenkins插件之小白的笔记
查看>>
html meta中的viewport指令
查看>>
windows 2008的安装
查看>>
Unity3D研究院之手游开发中所有特殊的文件夹(assetbundle与Application.persistentDataPath)...
查看>>
[DeviceOne开发]-手势动画示例分享
查看>>
《Activiti实战》读书笔记——5.1.4
查看>>
Linux文件管理类命令
查看>>
Kuerbernetes 1.11 二进制安装
查看>>
SpringMVC异步处理之@Async(附源代码 - 单元测试通过)
查看>>
undefined reference to 'pthread_setspecific '
查看>>
MediaBrowserService 音乐播放项目--IT蓝豹
查看>>
我的友情链接
查看>>
我的友情链接
查看>>
路由器的密码恢复
查看>>
linux yum命令详解
查看>>
java 多线程暂停与恢复:suspend,resume
查看>>
Jquery 获得<input type="text" id="test">中的value
查看>>
《Android开发从零开始》——38.WebView控件学习
查看>>