登录免费注册



Flex 布局

首页  思维导图  详情



Flex 布局

2020-06-04 13:02:41   14  举报





AI智能生成

Flex 布局

Flex

思维导图

布局

前端

模版推荐

作者其他创作

大纲/内容

注意

失效

float

clear

vertical-align

指定为Flex布局

容器

行内元素

webkit内核

Flex容器

水平轴(main axis)

main start

Flex 项目

main size

main end

交叉轴(cross axis)

cross start

Flex 项目

corss size

cross end

容器的属性

flex-flow

主轴排列方向

flex-direction

row

main 轴为水平方向,起点在左端

row-reverse

main 轴为水平方向.起点在右端

column

main 轴为垂直方向,起点在上端

column-reverse

main 轴为垂直方向,起点在下端

轴换行

flex-wrap

nowrap

不换行

wrap

换行,第一行在上方

wrap-reverse

换行,第一行在下方

justify-content

flex-start

左对齐

flex-end

右对齐

center

居中

space-between

两端对齐

space-around

项目两侧间隔相等

align-items

flex-start

顶端对齐

flex-end

底部对齐

center

居中

baseline

文字底线对齐

stretch

占满高度(未设置高度或auto)

align-content

flex-start

顶端对齐

flex-end

底部对齐

center

居中

space-between

两端对齐

space-around

轴线两侧间隔相等

stretch

占满高度(交叉轴)

项目的属性

排列顺序

order

Int

数字越小越靠前

0

flex

放大比例

flex-grow

int

所有项目都为1

等分剩余空间

1个为2,其他为1

2的占据剩余空间比其他多1倍

0

存在剩余空间也不放大

缩小比例

flex-shrink

int

所有项目为1

当空间不足时，所有项目等比例缩小

1个为0,其他为1

空间不足时，0不缩小，其他缩小

1

当空间不足时，该项目缩小

占据主轴空间

flex-basis

auto

项目本来的大小

length

可设置大小 350px 项目将占据固定的350px

单个项目属性值

align-self

auto

继承父元素的属性值

没有父元素==stretch

其他

auto

none

默认值

 Collect

Get Started

Flex 布局教程

 Collect

Get Started

珊瑚海环境布局图

 Collect

Get Started

Flex弹性盒子

 Collect

Get Started

flex













评论

0 条评论

下一页



图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

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

取消

确定

Document