当前阅读教程:Flex Box小程序应用 > Flex Box基本概念 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 暂无 | 下一篇: Flex容器的属性 |
本节主要展开介绍Flex Box,包括Flex布局的基本概念、并通过案例介绍网页中的基本使用方法。 Flex 是 Flexible Box 的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。代码示例 如下: .box{ display: flex; } 行内元素也可以使用 Flex 布局。代码示例 如下: .box{ display: inline-flex; } Webkit 内核的浏览器,必须加上-webkit前缀。代码示例 如下: .box{ display: -webkit-flex; /* Safari */ display: flex; }
注意:设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。 采用 Flex 布局的元素称为 Flex 容器(flex container),下面简称“容器”。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),下面简称“项目”,基本概念如图7-1所示。 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。 容器的属性如下: n flex-direction:决定主轴的方向(即项目的排列方向,左中右、上中下)。 n flex-wrap:定义如果一条轴线排不下如何换行。 n flex-flow:flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。 n justify-content:定义项目在主轴上如何对齐(左中右)。 n align-items:定义项目在交叉轴上如何对齐(上中下)。 n align-content:定义多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。 网页Flex布局的简单示例 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Flex Box简单表单</title> <style> .flex-container { display: -webkit-flex; display: flex; width: 400px; height: 250px; background-color: lightgrey; } .flex-item{ background-color: cornflowerblue; width: 100px; height: 100px; margin: 10px; } </style> </head> <body> <div> <div>flex item 1</div> <div>flex item 2</div> <div>flex item 3</div> </div> </body> </html> 效果如图7-2所示。 |
|
上一篇: 暂无 | 下一篇: Flex容器的属性 |