登录免费注册



弹性布局

首页  思维导图  详情



弹性布局

2016-12-27 15:45:32   0  举报





仅支持查看

AI智能生成

弹性布局

弹性布局

模版推荐

作者其他创作

大纲/内容

传统布局

浮动

定位

缺点：1. 破坏文档流 2. 必须得清除浮动 3. 不够灵活 4. 功能不足

分栏布局

看报纸的时候，一段文字被分了几栏效果

属性

兼容

-webkit-column-count: 3; /*Chrome 和 Safari*/

-moz-column-count: 3; /*Firefox*/

column-count: 3; /*其他*/

column-count: 5;

栏的数量控制

column-gap: 10px

长度单位，栏之间的距离

column-rule: 5px solid blue;

宽度，颜色；栏之间的分割线

column-rule-width: 20px;

设置宽度

column-rule-style: solid;

设置样式

column-rule-color: red;

设置颜色

column-width: 300px;

设置列宽，自动生成列数

columns: 100px 3;

同时设置列宽和列数

原则是生成最少列数

弹性盒模型

flex-box

弹性布局、弹性盒、流式布局

优点

适应性强，在做不同屏幕分辨率的界面是非常实用

可以随意按照宽度、比例划分元素的宽高

可以轻松改变元素的显示书顺序

自适应布局实现快捷，易维护

容器

概念：使用flex布局的元素被称为容器

必填

新语法

定义项目元素 display: flex;

旧语法

定义项目元素 display: box;

方向

新语法

flex-direction

从上至下：column

从下至上：column-reverse

从左至右：row

从右至左：row-reverse

旧语法

定义方向 box-orient

横向排列

horizontal

竖向排列

vertical

是否翻转 box-direction

normal

reverse

换行

新语法

flex-wrap

不换行

nowrap

换行

wrap

wrap-reverse 翻转

旧语法

box-lines

换行

single

multiple

合并

方向+换行的缩写

flex-flow

对齐(主轴)

定义项目在主轴的对齐方式 justify-content

新语法

起点对齐

flex-start

终点对齐

flex-end

居中对齐

center

两端对齐，其余均分

space-between

所有元素均分

space-around

旧语法

主轴左对齐

start

主轴右对齐

end

两端对齐，其余均分

center

所有元素均分

justify

对齐(交叉)

定义项目在交叉轴的对齐方式 algin-items

新语法

交叉起点对齐

flex-start

交叉终点对齐

flex-end

居中对齐

center

以第一行文字对齐

baseline

默认值

stretch

旧语法

交叉起点对齐

flex-start

交叉终点对齐

flex-end

居中对齐

center

以第一行文字对齐

baseline

默认值

stretch

对齐(换行)

当换行之后，与交叉点的对齐方式 align-content

交叉起点对齐

flex-start

交叉终点对齐

flex-end

居中对齐

center

默认值

stretch

两端对齐，其余均分

space-between

所有元素均分

space-around

项目

概念：容器的子级被称为flex项目

顺序

order：数值越小越靠前，默认值为0

填充

flex-grow：定义项目被放大的比例

缩小

flex-shrink：定义项目允许被缩小的比例

固定

flex-basis：定义元素固定宽度

对齐

align-self：定义单一元素对齐方式

flexbox 布局（弹性布局）

 Collect

Get Started

flexbox 布局（弹性布局）

 Collect

Get Started

flex弹性布局

 Collect

Get Started

弹性布局

工作不再有终点？揭开「无退休时代」下的斜杠与弹性人生

 Collect

Get Started

工作不再有终点？揭开「无退休时代」下的斜杠与弹性人生













评论

0 条评论

下一页



图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

关闭后当前内容将不会保存，是否继续？

取消

确定

Document