首页 > 开发 > Flex > 正文

弹性布局(Flex布局)的详细介绍

2020-03-24 18:19:59
字体:
来源:转载
供稿:网友
一、 弹性布局

在平时的我们常用的布局类型有以下几种:

1.浮动+定位

2.自适应(百分比)

3.响应式布局

4.弹性布局(Flex布局)

今天所要整理的就是比较常用的弹性布局,但块标签与行内块标签是有区别的。

{:;input{}

当然不是所有的东西都能像钱一样让所有人都喜欢,它也有自己的优缺点。

优点:兼容支持所有浏览器(Webkit内核的浏览器,要加上-webkit-),可以随用户的喜好进行调节,可以将任何一个容器指定为Flex布局。

缺点:因为弹性布局可调节,所以有巨大的可能性,需要花很多的时间进行调整;有些弹性设计要为IE6单独设计样式,不过……IE6还有多少人在用(⊙﹏⊙)b。

注意:当我们使用了弹性布局,那么在CSS里的float、clear和vertical-align就会失效。

二、 弹性布局的属性

首先是作为弹性布局的容器的属性。

1.flex-direction属性

flex-direction决定了容器的方向。

div { flex-direction: row | row-reverse | column | column-reverse;}

四个值分别为:row(默认值)从左向右、row-reverse从右向左、column从上到下、column-reverse从下到上。

2.flex-wrap属性

默认情况下的布局一般在同一行,当设置了flex-wrap属性之后将自动将排列不下的内容进行换行。

div{ flex-wrap: nowrap | wrap | wrap-reverse;}

四个值分别为:nowrap(默认值)不换行、wrap向下换行、wrap-reverse向上换行。

3.flex-flow属性

flex-flow属性是以上两种属性的简写形式,默认值是row nowrap。

div { flex-flow: flex-direction || flex-wrap }

4.justify-content属性

justify-content属性定义了在容器方向上的对齐方式。

div { justify-content: flex-start | flex-end | center | space-between | space-around;}

flex-start(默认值):向左对齐。

flex-end:向右对齐。

center: 居中对齐。

space-between:两端对齐,每一个子元素等距离间隔,子元素与容器边框无间隔。

space-around:每个子元素两侧的间隔相等。子元素之间的间隔比子元素与容器边框的间隔大一倍。

5.align-items属性

align-items属性定义在垂直容器方向上的对齐方式。

div { align-items: flex-start | flex-end | center | baseline | stretch;}

flex-start:垂直方向的起点对齐。

flex-end:垂直方向的终点对齐。

center:垂直方向的中点对齐。

baseline: 与第一个子元素中文字的基线对齐。

stretch(默认值):如果子元素没有设置高度或者高度设为auto,那么它将占满整个容器的高度。

6.align-content属性

align-content属性定义了子元素两种方向上的对齐方式。

div { align-content: flex-start | flex-end | center | space-between | space-around | stretch;}

flex-start:当容器方向子元素刚好填满时,与垂直方向的起点对齐。

flex-end:当容器方向子元素刚好填满时,与垂直方向的终点对齐。

center:当容器方向子元素刚好填满时,与垂直方向的中点对齐。

space-between:当容器方向子元素刚好填满时,垂直方向两端对齐,子元素之间的等距离间隔。

space-around:两个方向两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

stretch(默认值):占满整个垂直方向。

下面就是具有弹性布局容器中子元素的属性

1.order属性

order属性定义了子元素的排列顺序,数值小的在前。

.son { order: integer }

2.flex-grow属性

flex-grow属性定义了子元素的放大比例,默认值为0。

.son { flex-grow: number /* default 0 */}

当给所有子元素设置该属性为1,那么将等分所有空间,如果单独给某一个子元素设置n倍,那么该子元素将占据的空间比其他子元素多n倍。

3.flex-shrink属性

flex-shrink属性定义了子元素的缩小比例,默认值为1。

.son { flex-shrink: number /* default 1 */}

给所有子元素设置该属性为1,当空间不足时那么所有子元素将等比例缩小平分所有空间,如果单独给某一个子元素设置0,那么该子元素将在空间不足时不缩小。

4.flex-basis属性

该属性定义了给子元素分配空间时其占据的空间为多少,可以设置为与其width和height属性一样的值,那么它将被分配固定的空间大小。

5.flex属性

该属性为flex-grow, flex-shrink 和 flex-basis的简写。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选