Flex 布局（layout）

Flex是Flexible Box（弹性盒）的缩写，意为”弹性布局”。网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便。

2009年，W3C提出了一种新的方案——Flex布局（Flex layout），可以简便、完整、响应式地实现各种页面布局。注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。Internet Explorer 9 及更早版本不支持 flex 属性。

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

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

【在HTML开发中我们常常会使用一类标签作为容器放置一些内容，我们把这类标签称之为容器标签，可以作为容器标签的包括列表标签、表格标签、框架标签、布局标签。参见

https://www.cnblogs.com/yunxiansheng/p/9190454.html】

使用Flex 布局（layout），需要了解下面属性语法

flex 属性

flex-basis 属性

flex-direction 属性

flex-flow 属性

flex-grow 属性

flex-shrink 属性

flex-wrap 属性

首先学习flex 属性

实例1

<!DOCTYPE html>
<html>
<head><meta charset=utf-8" /><title>flex测试</title>
<style>#main{width:220px;height:300px;border:1px solid black;display:flex;}#main div{flex:1;   <!--请注意这里将 flex:1;换为 flex: auto; 试试 -->}
</style>
</head>
<body><div id="main"><div style="background-color:coral;">红色</div><div style="background-color:lightblue;">蓝色</div> <div style="background-color:lightgreen;">带有更多内容的绿色 div</div></div><p><b>注意:</b> Internet Explorer 9 及更早版本不支持 flex 属性。</p>
</body>
</html>

将上面实例代码，保存的flex01.html文件，用浏览器打开运行，显示如下：

将 flex:1;换为 flex: auto; 用浏览器打开运行，显示如下：

flex 属性语法

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

此属性可取值积极含义：

值	描述
flex-grow	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis	项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
auto	与 1 1 auto 相同。
none	与 0 0 auto 相同。
initial	设置该属性为它的默认值，即为 0 1 auto。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

进一步说明

flex 属性可以指定1个，2个或3个值。

单值语法: 值必须为以下其中之一:

一个无单位数(<number>): 它会被当作<flex-grow>的值。

一个有效的宽度(width)值: 它会被当作 <flex-basis>的值。

关键字none，auto或initial.

双值语法: 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。第二个值必须为以下之一：

一个无单位数：它会被当作 <flex-shrink> 的值。

一个有效的宽度值: 它会被当作 <flex-basis> 的值。

三值语法:

第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。

第二个值必须为一个无单位数，并且它会被当作 <flex-shrink> 的值。

第三个值必须为一个有效的宽度值，并且它会被当作 <flex-basis> 的值。

initial

元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。相当于将属性设置为"flex: 0 1 auto"。

auto

元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 "flex: 1 1 auto".

none

元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto"。

<'flex-grow'>

定义 flex 元素的 flex-grow 属性，详见 <number>。默认值为 0，负值无效。

<'flex-shrink'>

定义 flex 元素的 flex-shrink 属性，详见 <number>。默认值为1，负值无效。

<'flex-basis'>

定义 flex 元素的 flex-basis 属性。若值为0，则必须加上单位，以免被视作伸缩性。默认值为 auto。

flex-basis 属性

实例2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> flex-basis测试</title>
<style>
#main {width: 350px;height: 100px;border: 1px solid #c3c3c3;display: -webkit-flex; /* Safari */display: flex;
}#main div {flex-grow: 0;flex-shrink: 0;flex-basis: 40px;
}#main div:nth-of-type(2) {flex-basis: 80px;   <!--请注意这里-->
}
</style>
</head>
<body><div id="main"><div style="background-color:coral;"></div><div style="background-color:lightblue;"></div><div style="background-color:khaki;"></div><div style="background-color:pink;"></div><div style="background-color:lightgrey;"></div>
</div><p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 flex-basis 属性。</p></body>
</html>

将上面实例代码，保存的flex02.html文件，用浏览器打开运行，显示如下：

flex-basis 属性语法

flex-basis: number|auto|initial|inherit;

此属性可取值积极含义：

值	描述
number	一个长度单位或者一个百分比，规定灵活项目的初始长度。
auto	默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

就介绍到这里吧。

要想更多学习，可参考：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

https://www.runoob.com/cssref/css3-pr-flex.html

Flex 布局（layout）相关推荐

Flex布局教程（来源：阮一峰）
网页布局(layout)是 CSS 的一个重点应用.Flex 布局将成为未来布局的首选方案.本文介绍它的语法,下一篇文章给出常见布局的 Flex 写法.网友 JailBreak 为本文的所有示例制作了 ...
CSS布局之flex布局
最近项目中涉及到手机端开发,那么flex布局是必不可少的,这里我来重新梳理一下 1. 介绍 flex布局也被成为伸缩盒布局,在flex布局模型中,flex容器的子元素可以在x轴或y轴上进行布局,并且子 ...
CSS 7：网页布局（传统布局，flex布局，布局套路）
传统布局一栏.两栏.三栏布局一栏布局特点:页面内容居中,宽度固定实现方式: 定宽 + 水平居中 width: 1000px; //或 max-width: 1000px; margin-lef ...
彻底弄懂flex布局
目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布局以及它的好处,这里就不再赘述. 在这篇文章里,想说说flex布局的属性语法及其细节.那么网上也 ...
Flex 布局教程：实例篇
上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇&g ...
一劳永逸的搞定 flex 布局
2019独角兽企业重金招聘Python工程师标准>>> 寻根溯源话布局一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候, ...
Bootstrap4+MySQL前后端综合实训-Day01-PM【position定位的四种方式、Flex布局语法教程及案例(概念、容器属性、项目属性)、双飞翼布局复习、Bootstrap4 教程】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录 HTML中的三种元素(块元素.内联元素.内联块元素) position定位的四种方式 ...
阮一峰：Flex 布局教程
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html http://www.ruanyifeng.com/blog/2015/07/flex ...
CSS flex布局
1. 介绍 1.1 说明 flex布局,也称为flex弹性布局:主要目的是使item的宽度.高度按一定顺序填充父容器的可用空间. 示例注意:在下文中,将以parent指代父容器,item指代容器内的 ...

Flex 布局（layout）

Flex 布局（layout）

Flex 布局（layout）相关推荐

最新文章

热门文章