美文网首页
Flex布局(一)

Flex布局(一)

作者: 青春前行 | 来源:发表于2017-06-23 15:08 被阅读0次

链接地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Flex部分均参考了阮一峰的网络日志,感觉他的很多基础入门知识讲的非常好,总结的也很详细。

2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

.box{display:flex;}

行内元素也可以使用 Flex 布局。

.box{display:inline-flex;}

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

相关文章

  • flex布局

    认识flex布局 flex布局(Flexible 布局,弹性布局)开启了flex布局的元素叫flex contai...

  • 初见FLEX

    FLEX布局 一种新的布局方式,flex布局 flex布局与方向无关 flex布局可以实现空间自动分配、自动对齐。...

  • Flex

    阮一峰-Flex布局 阮一峰-Flex布局实例教程 Flex布局 块级元素 行内元素 注意,设为 Flex 布局...

  • Flex 布局教程

    一、Flex 布局教程:语法篇 Flex 布局教程:语法篇 二、Flex 布局教程:实例篇 Flex...

  • Flex布局(语法篇)

    一、介绍Flex布局 什么是Flex布局呢?Flex布局:又称弹性布局,它是Flexible Box 的缩写,它为...

  • Day02_flex布局

    一、flex布局介绍: 1、又名Flexible 布局,弹性布局;2、开启了 flex 布局的元素叫 flex c...

  • css flex布局详解

    css flex布局详解 css flex布局详解1css flex布局详解2

  • flex布局学习笔记

    经典教程 Flex 布局教程:语法篇Flex 布局教程:实例篇flex布局游戏 理解 flex布局实现需要至少两层...

  • 【学习资料整理】30分钟掌握Flex布局

    了解flex基本语法阮一峰——Flex 布局教程:语法篇 flex实例布局阮一峰——Flex 布局教程:实例篇 f...

  • 网络编程(八)移动端布局(2)

    今天主要介绍一下移动端布局之flex布局。 一、 flex 布局体验 1.1 传统布局与flex布局的 1.2 初...

网友评论

      本文标题:Flex布局(一)

      本文链接:https://www.haomeiwen.com/subject/emeccxtx.html