flex笔记

先在容器中声明 弹性布局(flex布局),即:display:flex;(谷歌内核记得加前缀) display:-webkit-flex;

声明完成后 容器可以设定 6个属性:

flex-direction: 主轴的方向; row水平方向从左到右(默认值) row-reverse反过来(从右到左)column垂直方向从上到下 row-reverse反过来(从下到上)

flex-wrap: 主轴方向上内容超出是否换行; nowrap(默认值) wrap换行 wrap-reverse换行(超出部分出现在上方)

flex-flow: 上面两个属性的缩写; 默认是 row nowrap

justify-content: 主轴方向上的对齐方式; flex-start左对齐 flex-end右对齐 center居中对齐 space-between两端对齐中间间隔相等 space-around每个成员两侧间隔都相等(所以两个成员之间间隔是旁边的一倍)

align-items: 交叉轴方向上的对齐方式; flex-start交叉轴顶点对齐(顶部) flex-end交叉轴终点对齐(底部) center交叉轴中点对齐 baseline成员的第一行文字基线对齐(参考图见底部链接) stretch不设定高度时,高度会被铺满(默认值)

align-content: 多条轴线对齐方式;(只有一条轴线时无效) flex-start交叉轴顶点对齐 flex-end交叉轴终点对齐 center交叉轴中点对齐 space-between交叉轴两端对齐中间间隔相等 space-around所有轴线之间间隔相等 stretch占满整个轴线

说完了容器的属性,下面说一下项目成员的属性 有6个属性:

order: 项目的排列顺序; 默认为0 值越小越靠前

flex-grow: 项目的放大比例; 默认值为0 如果其他项目是1 当前项目是2 则当前项目占的剩余空间是其他项目的一倍

flex-shrink: 项目的缩小比例; 默认值1 即空间不足时自动缩小 0为不缩小 负数无效

flex-basis: 项目在被自动分配空间之前的 主轴方向的宽; 默认值auto 可以设固定值(将不被自动分配空间)

flex: 上面三个flex开头的属性的缩写; 默认值 0 1 auto

align-self: 可给项目单独设置交叉轴方向的对齐方式;(属性和align-item一样) 会覆盖掉从align-item继承的值 默认值auto表示继承父容器的align-item

向阮一峰大牛学习
下面是参考连接:
Flex 布局教程:语法篇 – 阮一峰的网络日志

下面还有一个练习的小青蛙游戏(需翻墙):
Flexbox Froggy – 一个用来学CSS flexbox的游戏

发表评论

电子邮件地址不会被公开。 必填项已用*标注