首页 前端知识 css3 flex弹性布局学习

css3 flex弹性布局学习

2024-05-23 20:05:51 前端知识 前端哥 981 72 我要收藏

一、flex基本概念
在这里插入图片描述

在这里插入图片描述
当开启flex布局后,项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
二、容器的属性
以下6个属性设置在容器上。

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

(1)flex-direction
在这里插入图片描述
(2)flex-wrap
在这里插入图片描述
(3) flex-flow
在这里插入图片描述
(4)justify-content
在这里插入图片描述
(5)align-items
在这里插入图片描述
(6)align-content
在这里插入图片描述
三、项目的属性
以下6个属性设置在项目上。

order
flex-grow
flex-shrink
flex-basis
flex
align-self

(1)order属性
在这里插入图片描述
(2)flex-grow属性
在这里插入图片描述
(3)flex-shrink属性
在这里插入图片描述
(4)flex-basis属性
在这里插入图片描述
(5)flex属性
在这里插入图片描述
(6)align-self属性
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9119.html
标签
评论
发布的文章

jQuery初学

2024-05-29 10:05:14

Jquery中$,web开发语言

2024-05-29 10:05:25

jQuery 实现小球撞击动画

2024-05-29 10:05:04

echarts 横向柱状图

2024-05-29 10:05:01

Echarts:读取动态数据

2024-05-29 10:05:53

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!