CSS-Flex
作者:
饥人谷_二丫 | 来源:发表于
2018-04-19 10:49 被阅读0次Flex之前的布局
主要使用：
- normal flow(正常流或叫文档流）
- float+clear
- position relative+absolute
- display inline-block
- 负margin（小技巧）
Flex布局——CSS3中新的布局方式
特点：
- flex布局与方向无关
- 可实现空间的自动分配、自动对齐
- 用于简单的线性布局，更复杂的用grid布局
Flex属性
- flex container的属性
| flex-direction:row |
从左往右以行展示 |
| flex-direction:row-reverse |
反向以行展示 |
| flex-direction:colum |
从上往下以列展示 |
| flex-direction:column-reverse |
反向以列展示 |
| flex-wrap:wrap |
换行 |
| flex-wrap:no wrap |
不换行 |
| flex-flow:row wrap |
以行展示并可换行 |
| flex-flow:column wrap |
以列展示并可换列 |
| justify-content:sapce-between |
空隙放中间 |
| justify-content:space-around |
空隙环绕四周 |
| justify-content:flex-start |
往前靠 |
| justify-content:flex-end |
往后靠 |
| justify-content:center |
居中 |
| align-items:stretch |
所有元素伸展为最高 |
| align-items:flex-start |
往上靠 |
| align-items:flex-end |
往下靠 |
| align-items:center |
居中 |
| align-items:baseline |
容器基线上（不常用） |
- 多行/列内容的对齐方式（较少用）
align-content:stretch|伸展以适应容器（默认）
其他与上面类似，不表
- flex item的属性
| flex-grow:1 |
该item占1份 |
| flex-grow:2 |
该item占2份 |
| flex-grow:3 |
该item占3份 |
- 空间不够时，收缩比例：flex-shrink:1（默认为1）
- 默认大小（一般不用）：flex-basis：100px（默认auto）
- 以上三个缩写 flex:1 2 100px;
- 顺序 order
- 某个子项单独的对齐方式：
| align-self:center |
居中 |
| align-self:stretch |
伸展适应容器 |
| align-self:flex-start |
靠容器开头 |
| align-self:flex-end |
靠容器后头 |
小练习（青蛙游戏）
http://flexboxfroggy.com/#zh-cn
http://www.flexboxdefense.com/
本文标题：CSS-Flex
本文链接：https://www.haomeiwen.com/subject/rjvikftx.html
图1
网友评论