【归纳】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案例的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。