生活
弹性布局flex 、弹性布局flex案例
2023-04-02 16:04  浏览:28

【归纳】flex布局

说到flex布局,在我之前的影响中,只知道这是一种较传统布局较方便的布局,这种布局对我来说是全新的。在flex布局出现之前,我们使用的传统布局主要有以下几种:

这些传统的布局方式虽然可以满足我们的很多需求,但是也并不方便,比如实现垂直居中。而现在我们就要开始接触flex布局这种新的布局方式了。flex也可称为“弹性布局”,flex布局有以下几个特点:

接下来就将对flex布局的几个重要知识点进行归纳。

采用flex布局的元素,称为flex容器(flex container)。它的所有子元素自动成为容器成员,称为flex项目(flex item)。

如上图所示,该flex容器在纵横有两根轴,其中横向的称为主轴(main axis),纵向的称为侧轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。子元素默认是沿主轴排列的。子元素在主轴方向的宽度叫做main size,在侧轴方向的高度叫做cross size。

flex container(flex容器)有如下六个属性:

该属性主要有以下值:

该属性主要有以下值:

默认值为row nowrap,可以以如下方法设定该属性:

该属性主要有以下值:

该属性主要有以下值:

该属性主要有以下值:

flex item(子元素)有如下六个属性:

该属性默认值为0。

如果所有子元素的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个子元素的flex-grow属性为2,其他子元素都为1,则前者占据的剩余空间将比其他项多一倍。

该属性默认值为1。

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

flex-basis属性定义了在分配多余空间之前,子元素占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为***to,即子元素的本来宽度。

默认值为0 1 ***to。可以以如下方式设定该属性:

数值越小,排列越靠前,默认为0。

即不使用父元素决定的对齐方式,自身设定一个对齐方式。可覆盖align-items属性。默认值为***to,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

flex 布局可以简便、完整、响应式地实现各种页面布局。下面就简要地记录几个flex布局的技巧

如果内容被修剪,需要浏览器显示滚动条,以便查看剩余内容,可以使用 over-flow:***to;

实现手机上中下布局:

以上就是我此次关于flex学习的一些记录。可以看出,这次学习是围绕着阮一峰的一篇关于flex的博客展开的,他的博客对我此次学习flex布局以及此次的flex博客编写起到了一定的帮助。除此之外,我在这里推荐两个关于flex学习的小游戏,寓教于乐,十分有趣。

博客原地址:

flex弹性布局

弹性布局可以响应式的实现各种页面布局,所有浏览器都支持。

让所有的li在ul当中垂直居中,实现如下:

效果如下:

接下来再细聊每个属性的特性。

任何一个容器都能使用flex布局,这里有一个flex-container的概念。ul即为flex-container,li是容器内的所有单元吧,官方叫项目,flex item。

借官方几句话: 容器默认存在两根轴,水平主轴main axis和垂直交叉轴cross axis,主轴开始位置与边框交叉点叫main start,结束位置main end,交叉轴开始位置cross start,结束为止cross end,项目默认按照主轴排列,单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

一、flex-container有6个属性

1、flex-direction: row | row-reverse | column | column-reverse;

按顺序展示效果 

2、flex-wrap: nowrap | wrap | wrap-reverse;

更改ul宽度为460px后,li宽100px,当ul宽度减小小于li总宽度时,设置flex-wrap: nowrap,不换行,项目依然排在一条轴线上,但是宽度缩小。

3、flex-flow 属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

       flex-flow: row nowrap     = =     flex-direction: row;flex-wrap: nowrap;

4、justify-content: flex-start | flex-end | center | space-between | space-around; 定义了项目在主轴上的对齐方式,以上所有图均设置了 justify-content: space-around;效果依次如下:

5、align-items: flex-start | flex-end | center | baseline | stretch; 该属性定义了项目在交叉轴上的对齐方式  

在此属性之前以上的属性案例 都是设置align-items:center 对齐方式为交叉轴中点对齐

如果li未设置高度或为***to,那么项目将充满整个容器高度。

6、align-content: flex-start | flex-end | center | space-between | space-around | stretch;该属性定义多根轴线的对齐方式,容器内的项目只有一根轴线时,该属性不起作用。我们得调整一下ul li的样式了。调整flex-wrap:wrap;换行出现多条轴

容器高度400px, 项目高度100px, 设置完align-content: space-around 每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

二、flex-item项目的属性

1、order: integer 数值越小,排列越靠前,默认值为0

2、flex-grow: number; 定义项目的放大比例,默认为0,如果存在剩余空间也不放大。

设置为2的比1的占据的空间多1倍,60px

3、flex-shrink: number; 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小,负值无效。

该属性用来设置,当父元素的宽度小于所有子元素的宽度的和时(即子元素会超出父元素),子元素如何缩小自己的宽度的

值越大,缩小的越厉害。如果值为0,表示不缩减小。

4、flex-basis: length | ***to;   flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为***to,即项目的本来大小。 注意单词别打错了,不是basic!!!

5、flex: none | [ 'flex-grow' 'flex-shrink'? || 'flex-basis' ]    有两个快捷值:***to (1 1 ***to) 和 none (0 0 ***to)

建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间, flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

默认值 0 1 ***to 如果元素不是弹性盒模型对象的子元素,则 flex 属性不起作用。

这里有个面试题:当flex:1时,其三个属性值是什么?对应的值是多少?

flex: 1;   相当于flex: ***to 默认三个属性值是1 1 ***to  ;flex-grow、flex-shrink 和 flex-basis  放大不缩小,按照项目原本大小

flex: none;   三个属性值0 0 ***to

flex: initial; 三个属性值 0 a ***to 默认值

6、align-self: ***to | flex-start | flex-end | center | baseline | stretch |initial | inherit;

把li的高度设置去掉,来看这几个属性值的效果。

align-self: ***to;  align-self: center; align-self: initial; align-self: inherit;  这几个效果没啥差距

align-self: ***to; 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。

align-self: center; 元素位于容器的中心。弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。

align-self: initial;    设置该属性为它的默认值 ,等同于 align-self: ***to;

align-self: inherit;  从父元素继承该属性,等同于align-self: ***to;

align-self: flex-start;弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界

align-self: flex-end; 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界

元素位于容器的基线上。

如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效 。 其它情况下,该值将参与基线对齐。??什么是内轴和测轴??小疑问

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为***to,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。 注意:  Internet Explorer 和 Safari 浏览器不支持 align-self 属性

28、弹性布局flex

布局类型:

1、浮动+定位

2、自适应(百分比)

3、响应式布局

4、弹性布局(flex布局)

弹性布局的优缺点:

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

2、缺点:弹性布局较复杂,需兼容IE6;

注意:当使用了弹性布局,在css中的float、clear和vertical-align就会失效

1、flex-direction弹布局方向即容器方向

row:默认方向,从左到右

row-reverse:从右向左

column:从上到下

column-reverse:从下到上

2、flex-wrap换行

nowrap:默认不换行

wrap:向下换行

wrap-reverse:向上换行

3、flex-flow方向和换行的简写

例如,flex-flow:row nowrap;

4、justify-content容器方向上的对齐方式

flex-start:默认向左对齐

flex-end:向右对齐

center:居中对齐

space-between:两端对齐,子元素之间有间隔,子元素与边框之间无间隔

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

5、align-items默认垂直容器方向上的对齐方式

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

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

center:垂直方向的中点对齐

baseline:与***个子元素中文字的基线对齐

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

6、align-content子元素两种方向上的对齐

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

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

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

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

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

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

1、order排序,integer(整数),数值小的在前面

2、flex-grow放大比例,number,默认值为0

3、flex-shrink缩小比例,number,默认值为1

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

4、flex-basis属性

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

5、flex属性:flex-grow、flex-shrink和flex-basis的简写

6、align-self属性

该属性允许设置过额子元素有与其他子元素不一样的对齐方式,可以覆盖align-items属性

***to(默认值):表示默认继承父级的align-items属性

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

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

center:垂直方向的中点对齐

baseline:与***个子元素中文字的基线对齐

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

flex弹性布局彻底掌握

flex布局又称为弹性布局,相对于更早出来的float浮动布局更加方便,在兼容性方面还有不足,但随着很多浏览器版本的淘汰,今后的flex布局会被更加广泛使用。在掌握flex布局前先认识两个概念。

1.flex container

2.flex items

如图所示:

flex布局包含两个重要的轴,main axis和cross axis,各自起点、终点分别对应strat和end。了解到flex布局的基本原型后,我们来看看其属性,属性又分为flex container的属性和flex items的属性,如下图:

默认情况下flex的排列方向为main start到main end,当切换到其他属性时:

flex-direction:row-reverse

flex-direction:column-reverse

1.2justify-content属性

justify-content属性表示flex items在main axis上的对齐方式,其值有center、flex-start、flex-end、space-between、space-around。

justify-content:center

justify-content:flex-end

justify-content:space-between

是每个items间隔相等

justify-content:space-around

items间的间隔是边缘间隔的两倍

1.3align-items

align-items属性决定了items在cross axis的对齐方式,属性值有stretch、flex-start、flex-end、center、baseline

stretch属性值为align-items的默认属性:当items在cross axis方向的size为***to时,会将其自动拉伸填充整个flex container,如:

align-items:flex-start

items与cross start对齐

1.4flex-wrap

flex-wrap属性是控制items换行的,其属性值有:nowwrap、wrap、wrap-reverse

flex-wrap:nowwrap默认值不换行,每个items会自动调整宽度填充完整个flex container

1.6align-content

align-content:flex-start(这就解决了上述中换行没有紧挨的问题)

align-content:flex-end

align-content:center

align-content:space-between(两端cross start 与cross end对齐)

align-content:space-around(与justify-content一样)

align-content:space-evenly

二、flex items上的css属性

2.1order

order属性决定items之间的排列的先后顺序,如图将原本排列的模块倒序排列如下所示,可知order越小排在越前。

2.3flex-grow

flex-grow属性用来对items的宽度进行放大,默认值为0,这里3个items的初始宽度为100px,离flex container边缘还有200px,当将3个items的flex-grow设置为1时,则每个items的宽度增加200px的三分之一,如:

关于弹性布局flex和弹性布局flex案例的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

发表评论
0评