登录免费注册



flexbox知识点学习笔记

首页  思维导图  详情



flexbox知识点学习笔记

2022-10-13 10:39:31   0  举报





AI智能生成

flexbox知识点学习笔记

flexbox知识点学习笔记

flexbox

flex

模版推荐

作者其他创作

大纲/内容

flex容器属性

主轴

主轴排列方向:flex-direction

取值

沿x方向row

沿y方向colum

主轴换行方式flex-wrap

取值

换行wrap

不换行nowrap

换行且倒序wrap-reverse

主轴方向的flex子项目布局方式justify-content

取值

以主轴开始处为布局起点flex-start

以主轴结束处为布局起点flex-end

对其主轴中点center

主轴上项目之间的间距相同space-between

所有项目左右沿着主轴两边空白间距相同space-around

副轴

副轴方向上不换行的项目布局方式align-items

取值

将一组项目在副轴上以起点处沿着主轴对齐flex-start

将一组项目在副轴上以起点处沿着副轴对齐flex-end

将一组项目在副轴上以副轴中点处沿着主轴对齐center

将一组项目在副轴上撑满strech

将一组项目在副轴沿着第一项的基线在主轴上对齐baseline

副轴方向上换行项目的布局方式align-content

取值

将一组项目在副轴上以起点处沿着主轴对齐flex-start

将一组项目在副轴上以起点处沿着副轴对齐flex-end

将一组项目在副轴上撑满strech

将一组项目在副轴上以副轴中点处沿着主轴对齐center

flex子项目属性

顺序order

拓展flex-grow

压缩flex-shrink

基础大小flex-basis

副轴上单个项目的布局方式align-self

flex-flow

flex

 Collect

Get Started

财富自由学习笔记知识点框架

 Collect

Get Started

HTML知识点学习笔记

 Collect

Get Started

重积分知识点学习笔记

javascript知识点学习笔记

 Collect

Get Started

javascript知识点学习笔记













评论

0 条评论

下一页



图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

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

取消

确定

Document