[Css] css3的flex布局

时间:2022-03-13 09:09:36

flex思维导图

{"name":"flex","children":[{"name":"传统布局方式","children":[{"name":"display-position-float"}]},{"name":"设置容器display:flex"},{"name":"设置行内元素容器display:inline-flex"},{"name":"容器的属性","children":[{"name":"决定主轴的方向|flex-direction","children":[{"name":"row默认值,主轴为水平方向,起点在左端"},{"name":"row-reverse,主轴为水平方向,起点在右端"},{"name":"column,主轴为垂直方向,起点在上沿"},{"name":"column-reverse,主轴为垂直方向,起点在下沿"}]},{"name":"定义,如果一条轴线排不下,如何换行|flex-wrap","children":[{"name":"nowrap默认不换行"},{"name":"wrap换行,第一行在上面"},{"name":"wrap-reverse换行,第一行在下方"}]},{"name":"flex-direction和flex-wrap的简写|flex-flow","children":[{"name":"默认值为row,nowrap"}]},{"name":"定义了项目在主轴上的对齐方式|justify-content","children":[{"name":"flex-start默认值,左对齐"},{"name":"flexend,右对齐"},{"name":"center,居中"},{"name":"space-between,两端对齐,项目之间的间隔都相等"},{"name":"space-around,每个项目两侧的间隔相等"}]},{"name":"定义项目在交叉轴上如何对齐|align-items","children":[{"name":"flex-start:交叉轴的起点对齐"},{"name":"flexend:交叉轴的终点对齐"},{"name":"center:交叉轴的中点对齐"},{"name":"baseline:项目的第一行文字的基线对齐"},{"name":"stretch默认值:如果项目未设置高度或设为auto,将占满整个容器的高度"}]},{"name":"定义了多根轴线的对齐方式|align-content","children":[{"name":"flex-start:与交叉轴的起点对齐"},{"name":"flexend:与交叉轴的终点对齐"},{"name":"center:与交叉轴的中点对齐"},{"name":"space-between:与交叉轴两端对齐,轴线之间的间隔平均分布"},{"name":"space-around:每根轴线两侧的间隔都相等,所以,轴线之间的间隔比轴线与边框的间隔大一倍"},{"name":"stretch默认值:轴线占满整个交叉轴"}]}]},{"name":"项目的属性","children":[{"name":"项目的排列顺序|order","children":[{"name":"数值越小,排列越靠前,默认为0"}]},{"name":"定义项目放大比例|flex-grow","children":[{"name":"默认为0,存在剩余空间,也不放大"}]},{"name":"定义项目缩小比例|flex-shrink","children":[{"name":"默认为0,如果空间不足,该项目将缩小"}]},{"name":"定义了在分配多余空间之前,项目占据的主轴空间|flex-basis","children":[{"name":"默认值为auto,即项目的本来大小"}]},{"name":"flex-grow,flex-shrink和flex-basis的简写|flex","children":[{"name":"默认值为0,1,auto"}]},{"name":"允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性|align-self","children":[{"name":"auto"},{"name":"flex-start"},{"name":"flex-end"},{"name":"center"},{"name":"baseline"},{"name":"stretch"}]}]}]}

设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效

移动端上的设计和适配
Flex 布局教程:语法篇

[Css] css3的flex布局的更多相关文章

  1. HTML/CSS:display:flex 布局教程

    网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...

  2. CSS3:flex布局应用

    想把先前的整理的东西贴出来,怎奈总是有额外事情发生,额,教训电脑要离水杯远点~~ 推荐一本书,<编写可维护的Javascript>这是Nicbolas C.Zakas写的,他的<Ja ...

  3. css相关,flex布局全通!

    寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中. 记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联想到 Word 文 ...

  4. CSS 学习笔记 - Flex 布局

    传统布局方式的局限性 传统的网页布局方式,采用 display + position + float 的方式来实现.这种方式,无法实现一些复杂的布局,并且在实现某些布局时,会有一些局限性. 比如,最常 ...

  5. 【CSS3基础-Flex布局】

    关于Flex 背景 在flex布局出现以前,常用的水平和垂直居中对齐方式有很多.flex布局的出现基本规范了这一过程. 通过justify-content和align-items两个属性即解决了水平居 ...

  6. 第103天:CSS3中Flex布局(伸缩布局)详解

    一.Flex布局 Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{ display: flex; } 行 ...

  7. CSS中的flex布局

    1.flex 布局的概念 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为 Flex 布局,行内元素也可以通过 ...

  8. CSS3之flex布局

    若要使用flex布局,需在父元素上声明" display : flex ",这样它所有的直系子元素就成为flex元素 1.居中 1)垂直居中:align-items : cente ...

  9. CSS3的flex布局

    flex的一些属性 CSS3中引入了另一种框--flexbox,flexbox有一些block和inline不同的性质,比如: 自适应子元素(flex item,又称伸缩项目)的宽度 伸缩项目的flo ...

随机推荐

  1. ios -网络加载json和本地加载json

    1网络加载json的时候,要在模型的实现文件里写: - (void)setValue:(id)value forKey:(NSString *)key { } 2本地加载json的时候,要在模型的实现 ...

  2. Oracle中用一个表的数据更新另一个表的数据

    update tbl1 a   set (a.col1, a.col2) = (select b.col1, b.col2                              from tbl2 ...

  3. java基础之反射

    反射的定义,反射的特性,反射的应用

  4. JAVA提高二:枚举

    JDK5.0中有一个非常有用的特性:枚举,这个特性以前在C语言中出现过,后来JDK出现后,开始觉得没有必要,但随着使用JAVA语言的人数增多,发现大家对枚举的需求非常大,于是又加入了此特性,下面我们来 ...

  5. EJB:快速入门

    1.EJB概念 2.EJB体系结构 3.SessionBean 3.1 SessionBean 服务端组件 3.2 Remote 与 Local 模式 3.3 Client访问处理流程 3.3.1 R ...

  6. pycharm&lpar;pythoon3&rpar;&lowbar;django2&period;0&lowbar;xadmin创建测试用例后台管理系统

    1.测试用例的app名字:Testcase 2.Testcase文件夹下各个文件的代码: 2.1. __init__.py: default_app_config = "TestCase.a ...

  7. Maven下用MyBatis Generator生成文件

    使用Maven命令用MyBatis Generator生成MyBatis的文件步骤如下: 1.在mop文件内添加plugin <build> <finalName>KenShr ...

  8. 分布式配置中心 携程&lpar;apollo&rpar;

    1.传统配置文件与分布式配置文件区别 传统配置文件:如果修改了配置文件,需要重新打包发布,重新发布服务,而且每个环境的变更配置文件,比较繁琐. 分布式配置文件:将配置文件注册到配置中心上去,可以使用分 ...

  9. 开关电源PCB设计中的布线技巧

    开关电源PCB设计中的布线技巧关键字:布线 开关电源 走线 一.引言 开关电源是一种电压转换电路,主要的工作内容是升压和降压,广泛应用于现代电子产品.因为开关三极管总是工作在 “开” 和“关” 的状态 ...

  10. Fedora 14 安装完后的设置 添加源 更新软件

    1.添加源:   (1)上海交大源:应用程序->系统工具->终端 输入 su    输入密码 输入   nano /etc/yum.repos.d/sjtu.repo 辅之以下内容: [F ...