前言 Flex(Flexible Box),意为”弹性布局”。“弹性”,顾名思义,就是具有弹簧的特点啦,能够自由的伸缩(有点自适应的意思啦)。 其实Flex并不是最近才出现的,而是早在十年前它就被提出。2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 Flex布局如何使用? 任何一个容器都可以指定为Flex布局 .box{ display: flex; } 行内元素也可以使用Flex布局 .box{ display: inline-flex; } 示例: 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容器属性 一、flex-direction:决定项目(item)的排列方向 flex-direction有四个值: 1、row(默认值):主轴为水平方向,起点在左端。 2、row-reverse:主轴为水平方向,起点在右端。 3、column:主轴为垂直方向,起点在上沿。 4、column-reverse:主轴为垂直方向,起点在下沿。 上面哪个示例图,我们稍稍变阵一下,主轴设置为垂直方向,就会出现下图布局。 示例: 还可以设置主轴为垂直方向,起点在下沿。 示例: 是不是觉得之后布局就用他(Flex)了? 二、flex-wrap 默认情况下,item都排在一条线(又称”轴线”)上。flex-wrap属性定义了,如果一条轴线排不下,item的换行方式。 示例: flex-wrap有三个值: 1、nowrap(默认):不换行 2、wrap:换行,第一行在上面。 3、wrap-reverse:换行,第一行在下面。 示例: 三、flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。 .box { flex-flow:
如果你对以下车友回答满意,请设置一个推荐答案!
|