FED实验室 - 专注WEB端开发和用户体验

Flexbox#1:基本属性的使用

JAVASCRIPT 煦涵 3662℃ 0评论

Flexbox是一个CSS布局系统,使用它可以很容易的实现动态布局。使用flexbox,平常开发中遇到的垂直居中布局,等高布局,重排,方向不可知等布局都是小菜一碟。

可能你会说现在还不是使用flexbox的最佳时间,但是据统计93%的人都在运行支持flexbox的浏览器,它比对HTML5 元素的支持更好。PS:查看浏览器支持戳这里

本文中只是熟悉基本属性的用法,并完成一组骰子各个面的制作。在下面的内容我不会涉及flexbox一些比较棘手的问题,比如旧版本语法、供应商前缀、浏览器怪癖等,这在以后的文章中会提到。

一、First Face

我们知道,骰子有六个面,每个面的点的个数代表该面的值,第一个面由一个水平垂直居中的点组成。下面来看具体的实现:

		<section name="01" class="face-01">
			<span class="dot"></span>
		</section>
.face-01 {
	display: flex;
	justify-content: center;
	align-items: center;
}

关于justify-content和align-items的用法请参考这里justify-contentalign-items。使用flexbox,垂直居中两行属性就可以搞定,很easy!

二、Second Face

.face-02 {
	display: flex;
	justify-content: space-between;
}
.face-02 .dot:nth-of-type(2) {
	align-self: flex-end;
}
		<section name="02" class="face-02">
			<span class="dot"></span>
			<span class="dot"></span>
		</section>

这里我们不能使用align-items属性,使用它两个点都会受影响,flexbox提供了一个align-self属性,这个属性可以让我们更方便的控制flex items的各项沿着cross axias方向,设置不同的布局。align-self的用法参考这里align-self

三、Third Face

.face-03 {
	display: flex;
	justify-content: space-between;
}
.face-03 .dot:nth-of-type(2) {
	align-self: center;
}
.face-03 .dot:nth-of-type(3) {
	align-self: flex-end;
}
<section name="03" class="face-03">
	<span class="dot"></span>
	<span class="dot"></span>
	<span class="dot"></span>
</section>

 

该face与second face 使用的属性相同,不再解释。

四、Fourth Face

.face-04 {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}
.face-04 .column {
	display: flex;
	justify-content: space-between;
}
<section name="04" class="face-04">
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</section>

本例中使用了flex-direction,从字面意思可以看出,是用来控制flex的方向,即按列还是按行来布局,该属性更详细的用法可以参考这里flex-direction

后面Fifth Face 和 Sixth Face,根据前面的布局思想,就很easy了不再赘述!最后附上本Demo的链接,戳我,戳我

写到此,想想配合JS写一个玩骰子的小游戏应该很easy了吧。

五、参考链接

1.实例:Getting Dicey With Flexbox
2.Flexbox W3C规范:CSS Flexible Box Layout Module Level 1

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持 喜欢 (0)
捐赠共勉
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址