Flex 布局：语法篇

2019独角兽企业重金招聘Python工程师标准>>>

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C 提出了一种新的方案 ---- Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
Flex 布局将成为未来布局的首选方案。
以下内容主要参考了下面两篇文章：A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties.
一、Flex布局是什么？
Flex 是 Flexible Box 的缩写，意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
1 .box {
2 display: flex;
3 }
行内元素也可以使用 Flex 布局。
1 .box {
2 display: inline-flex;
3 }
Webkit 内核的浏览器，必须加上 -webkit 前缀。
1 .box {
2 display: -webkit-flex; /* Safari */
3 display: flex;
4 }
注意，设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

<a href="www.changtu.com/chepiao/baodingshi-zhangjiakoushi.html" class="lightblue">保定到张家口的汽车</a>
二、基本概念
采用Flex布局的元素，称为Flex容器（flex container），简称"容器".它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目".
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start,结束位置叫做 main end;交叉轴的开始位置叫做 cross start,结束位置叫做 cross end.
项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size,占据的交叉轴空间叫做 cross size.

转载于:https://my.oschina.net/u/3042303/blog/849136

Flex 布局：语法篇相关推荐

阮的flex布局语法篇
作者: 阮一峰日期: 2015年7月10日网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + floa ...
Bootstrap4+MySQL前后端综合实训-Day01-PM【position定位的四种方式、Flex布局语法教程及案例(概念、容器属性、项目属性)、双飞翼布局复习、Bootstrap4 教程】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录 HTML中的三种元素(块元素.内联元素.内联块元素) position定位的四种方式 ...
Flex 布局语法教程
flex-wrap属性布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. ps:面试 ...
flex是什么及flex布局语法
Flex布局 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,自由的操作容器中元素(项目)的排列方式任何一个容器都可以指定为 F ...
＜ CSS技巧之弹性布局( Flex布局 ) - 实例篇＞
文章目录
CSS 之 Flex布局
CSS 之 Flex布局文章目录 CSS 之 Flex布局 1.Flex布局 vs 网格布局 (1D vs 2D) 2.Flex属性 1)flex-direction属性 & 排列方向 2) ...
flex布局详细教程
flex布局网页布局(layout)是CSS的一个重点应用. 传统的布局有下面几种. display: block; display: inline; display: list-item; dis ...
scss flex布局
Flex 布局教程:语法篇 - 阮一峰的网络日志 A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks CSS布局之Flex布局 - 走看看 Fl ...
Flex 布局教程：语法篇
阮一峰的网络日志 » 首页 » 档案上一篇:ES6 的功能侦测库下一篇:Flex 布局教程:实分类: 开发者手册 Flex 布局教程:语法篇作者: 阮一峰日期: 2015年7月10日网页布 ...
Flex 布局教程：语法篇（阮一峰）
阿里云 > 教程中心 > html教程 > Flex 布局教程:语法篇(阮一峰) Flex 布局教程:语法篇(阮一峰) 发布时间:2018-03-12 来源:网络上传 ...

Flex 布局：语法篇

Flex 布局：语法篇相关推荐

最新文章

热门文章