Flex
来源:互联网 发布:网络kvm 编辑:程序博客网 时间:2024/06/05 00:37
6 Flex
一、Flex布局是什么?
在之前我们的布局方式:display+position+float,这种方式布局基本可以解决所有的布局问题,但是一些特殊的布局实现起来却不容易,比如垂直方向居中.
Flex,弹性布局。用来为盒子模型提供最大的灵活性.
所有元素都可以设置为flex布局
注意:如果使用了flex布局,所有的子元素float、clear、vertial-align等属性将失效
二、容器的属性
只需要一个元素设置为flex布局,该元素我们称为flex容器,他所在的所有子元素将成为容器成员,也成为flex项目
说白就是,一个大的div,嵌套两个小的div,如果大的div设置了flex布局;
那么:大的div就叫容器,2个小的div就叫项目
2.1 flex-direction
flex-direction属性决定主轴的方向(即项目的排列方向)。
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
3.3 flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
(1)nowrap(默认):不换行。
(2)wrap:换行,第一行在上方。
(3)wrap-reverse:换行,第一行在下方。
2.2 flex-wrap
2.3 flex-flow
2.4 justify-content必须记住
justify-content属性定义了项目在主轴上的对齐方式
就是设置水平方向对其方式(和Word水平对齐方式一样)
2.5 align-item必需记住
justify-content属性定义了项目在主轴上的对齐方式。
2.6 align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
- FLEX
- flex
- flex
- FLEX
- Flex
- Flex
- flex
- Flex
- Flex
- Flex
- Flex
- Flex
- Flex
- Flex
- flex
- Flex
- flex
- flex
- STL queue
- JAVA11
- 垃圾收集器与内存分配策略小结
- 手机网上商城-项目经验总结(一)-项目开发流程
- Java中List和ArrayList的区别
- Flex
- 使用cl.exe在windows控制台下编译C++程序
- JDBC
- (6.0及以上)运行时获取危险权限(Dangerous Permission)
- 【笔记】软件与软件工程浅谈
- JAVA12
- KindEditor上传文件时报500错误
- hdu 3552 I can do it! (思维)
- SSL P2759 挖矿