用弹性布局实现色子

最新推荐文章于 2024-07-21 21:06:06 发布

Tank_in_the_street

最新推荐文章于 2024-07-21 21:06:06 发布

阅读量2.2k

点赞数 1

分类专栏：前端面试 CSS3 文章标签： css3 弹性布局

本文链接：https://blog.csdn.net/Tank_in_the_street/article/details/78153660

版权

前端面试同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

CSS3

3 篇文章 0 订阅

订阅专栏

关于css3的弹性布局，已经用很多大牛讲过关于这个东西了，所以在这里我就不讲弹性布局的原理，想了解的话可以翻看下面的文章：阮一峰弹性布局教程 mdn弹性布局教程 IBM弹性布局教程。下面有一个关于弹性布局被各浏览器接受情况，ie10是能接受弹性布局布局的，只不过是接受老版的弹性布局，在display里需要这样“-ms-flexbox”来声明弹性布局。支持弹性布局的浏览器。下面在讲如何实现色子之前先讲一下弹性布局的12个常用的属性。

由于弹性布局有主轴和交叉轴，一开始的时候我们先要设定到底是x轴是主轴还是y轴是主轴，该属性是flex-direction。它有四个值，默认值是row，另外三个是row-reverse、column和column-reverse，这里row和row-reverse都是指水平轴，不过它们受flex容器的方向性的影响，如果dir是默认值，即是ltr，则row表示的是从左到右定向的水平轴，而row-reverse则是从右到左的水平轴。如果是rtl则相反。column和column-reverse则是垂直轴，不过它们和上面的两个一样，都是互为相反方向的。

flex-wrap表示的是如何换行，它有三个值，默认值是nowrap，即不换行，溢出的将会被重叠。另外两个是wrap和wrap-reverse。wrap和wrap-reverse一样指的是溢出部分换行，但是wrap的溢出部分在下一行而wrap-reverse的溢出部分在上面。flex-direction和flex-wrap可以组合起来，形成一个属性叫flex-flow，默认值为row nowrap。

justify-content属性是定义浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间，默认值是flex-start，该属性用很多个值，不过仅有少数几个被普遍支持，分别是flex-start、flex-end、center、space-between、space-around。flex-start和flex-end分别是固定在主轴的起始位置和终点位置。center表示的是主轴内的元素居中对齐，space-between表示的是均匀的分布主轴内的元素，每个元素的间隔相同，第一个元素在起始位，最后一个元素在结尾。而space-around和space-between相似，只不过第一个元素和最后一个元素分别距离起始位和结尾为各个元素间隔的一半。

align-content、align-items和align-self看名字感觉差不多，那他们其实也是有关联的。在确定了主轴的方向后，align-items就是与主轴对应的交叉轴。而align-content定义的是多条轴线的对齐方式，当只有一条轴线的时候则不起作用，这个时候只能用align-items。还有一个是align-self，这个专门是定义在align-items里面的其中一个元素，也就是说align-self定义的是一个元素的对齐方式，会覆盖align-items里面的值。align-content有六个值，默认值是stretch，另外五个是flex-start、flex-end、center、space-between、space-around。flex-start和flex-end，这五个都有介绍过所以不讲，stretch指的是轴线占满整个交叉轴。

align-items有五个值，默认值是stretch，其他的有flex-start、flex-end、center、baseline，其中baseline指的是元素以第一行文字基线对齐。align-self有六个值，默认值是auto，其他的有stretch、flex-start、flex-end、center、baseline，这个auto指的是继承父元素align-items的值，如果没有父元素，则默认值是stretch。

flex属性有三个值，与之对应的分别是flex-grow、flex-shrink和flex-basis，flex规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。有常见的三个值，默认值是initial，相当于flex：0 1 auto，另外两个值是auto和none，分别与之对应的是flex：1 1 auto和flex：0 0 auto。flex-grow表示的是若父元素存在空余位置，元素放大的比例，默认值为0，不能填负数。而flex-shrink则刚好相反，表示父元素小于父元素内所有元素的width时元素缩小比例，默认值是1。flex-basis指的是占据父元素主轴方向多少空间，默认值是auto。

最后一个属性是order，正正是因为这个属性，从一个方面展现出弹性布局和传统的布局的很多的不同。传统的布局中元素的排列顺序是按照html的排列顺序的，而在弹性布局中，通过order可以在css中改变这个顺序，order的值越小，优先级就越大。初始值为0

在讲完了这些铺垫之后，就来讲如何通过弹性布局来实现色子的。

首先我以九宫格来作演示，下面的html模板在运用到色子的时候只要部分注释即可：

         <body>
		<div class='container'>
			<div class='box'>
				<div class='col'>
					<span class='item'></span>
					<span class='item'></span>
					<span class='item'></span>
				</div>
				<div class='col'>
					<span class='item'></span>
					<span class='item'></span>
					<span class='item'></span>
				</div>
				<div class='col'>
					<span class='item'></span>
					<span class='item'></span>
					<span class='item'></span>
				</div>
			</div>
		</div>
	</body>

然后在css代码中，像下面的这个是不会变的，只是色子的样式代码：

/*这里仅仅是将背景弄为黑色，将色子弄到中间*/
.container{
                display: flex;
                background-color: black;
                align-items: center;
                justify-content: center;
                height: 586px;
}
/*这里的作用是定义色子的圆点而已*/        
.item{
                border-radius: 50%;
                width: 25px;
                height: 25px;
                background-color: black;
}

九宫格剩下的css代码如下：

.box {
                display: flex;
                justify-content: space-between;
                width: 100px;
                height: 100px;
                background-color: white;
                border-radius: 10%;
                padding: 5px;	
}.box .col{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
}

效果如下：

1点色子首先将html代码改成只有一个span就可以了，css代码如下：

.box {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100px;
                height: 100px;
                background-color: white;
                border-radius: 10%;
                padding: 5px;
}
.box .col{
                display: flex;
}

效果如下：

2点色子代码如下：

.box {
                display: flex;
                justify-content: space-between;
                width: 100px;
                height: 100px;
                background-color: white;
                border-radius: 10%;
                padding: 5px;
}
.box .col{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
}
.box .col:nth-child(2){
                justify-content: flex-end;
}

效果如下：

3点色子代码如下：

.box {
                display: flex;
                 justify-content: space-between;
                align-items: center;
                width: 100px;
                height: 100px;
                background-color: white;
                border-radius: 10%;
                padding: 5px;
}
.box .col{
                display: flex;
}
.box .col:nth-child(1){
                align-self: flex-start;
}
.box .col:nth-child(3){
                align-self: flex-end;
}

效果如下：

4点色子代码如下：

.box {
                display: flex;
                justify-content: space-between;
                width: 100px;
                height: 100px;
                background-color: white;
                border-radius: 10%;
                padding: 5px;
}
.box .col{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
}

效果如下：

5点色子代码如下：

.box {
                display: flex;
                justify-content: space-between;
                width: 100px;
                height: 100px;
                background-color: white;
                border-radius: 10%;
                padding: 5px;
}
.box .col{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
}
.box .col:nth-child(2){
                align-self: center;
}

效果如下：

6点色子代码如下：

.box {
                display: flex;
                justify-content: space-around;
                width: 100px;
                height: 100px;
                background-color: white;
                border-radius: 10%;
                padding: 5px;
}
.box .col{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
}

效果如下：

最后总结：在弹性布局里，如float、clear和vertical-align属性将失效，这一点有别于传统的布局方法。在传统的布局中，多数是依赖position+float+display的布局方法，这种布局方法在一般情况下还好用，但是如果涉及到诸如垂直居中布局的话就比较麻烦，而弹性布局的出现则很好的解决了这个问题。弹性布局与传统的布局最大的不同的是它有主轴和交叉轴，主轴的方向是通过你自己如何定义来决定的。