我们在编写页面的时候,页面的布局方面是非常重要的。
比如说你想要你写的页面它能随着浏览器的大小改变从而改变(也可以说是适应),要做到这样的话一个好布局是主要的一方面。
下面我要跟大家分享的就是一个布局的写法(Flexible Box),我们称之flex弹性布局(于2009年W3C提出的),从名字上我们顾名思义就应该能看出这个布局是具有弹性的咯!
好了,下面就开始深入了解下了
任何元素都可以用上这个布局
.box{
display:flex; //这是一个基本的写法
}
.box{
display:inline-flex; //这是一个行内元素写法
}
哦对了,设置flex布局之后该元素的子元素的那些居中与浮动之类就会无效了!
下面我们就把设置弹性布局的元素称之为一个容器了!(之前学的时候貌似就是这样叫的)
这个容器总共有六个属性可以用来给该容器当值(用来布局的)
- flex-direction //该属性决定你编写在页面上的那些元素的排列方向,这个属性它带有四个值来(看下图)
上图忘了一点(就是的话该属性的默认值是row,就是说在你不给它赋值就默认是row)
- flex-wrap //该属性的作用呢就是给容器设置如何换行的,有着3个值(具体看下图)
- flex-flow //而这个属性呢是前面两个属性加起来的意思,所以另外两个的值这个都是能用的,也有两个值拼起来的(比如这个属性的默认值row nowrap,这个代表着是从左边水平方向排列的,并且不换行)
- justify-content //这个属性呢是用来设置对齐方式的(如居中、靠左、靠右···)看下图
下面两个因小编不太常用到,所以也就没那么熟悉的说(就直接从别处搬一下了哈)
5. align-items //这个属性定义项目在交叉轴上如何对齐,它有5个值(看下方)
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
-
aligns-cont //该属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。它有6个值(看下方)
tretch(默认值):轴线占满整个交叉轴。 flex-start:与交叉轴的起点对齐。 flex-end:与交叉轴的终点对齐 center:与交叉轴的中点对齐。 space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。 space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍
上面就是这个布局常用的一些属性和值,还有一些就不全部写了哈!
(主要是小编不太熟后面的)
还有效果的哈自行体验