Flexbox布局概念
Flexbox布局( Flexible Box 或CSS3 弹性布局),是CSS3中的一种新的布局模式,是可以自动调整子元素的高和宽,来很好的填充任何不同屏幕大小的显示设备中的可用显示空间,收缩内容防止内容溢出,确保元素拥有恰当的行为的布局方式。使用Flexbox来布局更容易,可以使用更少的代码,更简单的方式实现更复杂的布局,例如对齐方式,排列方向,排列顺序(这也是Flexbox布局的核心能力所在),弹性盒中的子元素通过在各个方向放置就可以以弹性的尺寸适应父元素的显示区域。由于子元素的显示顺序和它们在代码中 的顺序是独立的,通过使用弹性盒,定位子元素变得更加简单,复杂的布局也能够使用更清晰的代码更简单的实现。独立显示被设定成只针对可见元素,而不是基于代码的声明和导航顺序。
不同于块级元素基于垂直方向布局以及行内元素基于水平方向布局,弹性盒布局的算法是方向无关的。 虽然块级元素布局在页面中工作良好,但是其定义不足以支持那种需要根据用户代理从竖直切换成水平等变化而进行方向切换、大小调整、拉伸、收缩的引用组件。不同于将要出现的网格布局针对目标为大比例布局,弹性盒布局更适用于应用组件和小比例布局。这两种都是CSS工作组为了能与不同用户代理、不同书写模式和其他弹性需要进行协作而做出的努力。
基本概念
Flexbox是一个完整的布局模块,不是单一的属性,设计的属性有很多。Flexbox布局主要由父容器和它的直接子元素组成,其中父容器被称之为flex container(flex容器),而其直接的子元素称作为flex item(flex元素)。
Flexbox布局按照宽和高涉及的基本概念名称有main axis(主轴)和cross axis(交叉轴,和主轴垂直),主轴起点边称为main start,主轴终点边称为main end,交叉轴起点边称为cross start,交叉轴终点边称为cross end。如图:
flex-direction
属性。width
或height
属性,由哪一个对着主轴方向决定。width
或height
属性,由哪一个对着交叉轴方向决定。在具体属性开始之前还是要注意几点:
如果需要了解基本元素和使用原理的可以https://cloud.tencent.com/developer/article/1036123。
来看一个实际例子:
首先举一个栗子,之前我们是这样实现一个div盒子水平垂直居中的。在知道对象高宽的情况下,对居中元素绝对百分比定位,然后通过margin偏移的方式来实现。
<style>
.container{
width: 600px;
height: 400px;
border: 1px solid #000;
position: relative;
}
.box{
width: 200px;
height: 100px;
border: 1px solid #000;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top:-50px;
}
</style>
<div class="container">
<div class="box"></div>
</div>
假如使用了flex后,实现起来就简单了,而且不需要自己去算,也不需要绝对定位,只需要通过对伸缩容器定义两个属性,justify-content定义伸缩项目沿着主轴线的对齐方式为center, align-items定义伸缩项目在侧轴(垂直于主轴)的对齐方式为center。
<style>
.container{
width: 600px;
height: 400px;
border: 1px solid #000;
display: flex;
justify-content:center;
align-items:center;
}
.box{
width: 200px; //宽度可以为任意
height: 100px; //高度可以为任意
border: 1px solid #000;
}
</style>
<div class="container">
<div class="box"></div>
</div>
其实flex的优点并不止这些,我们来看一张图 。
这里的具体元素等以后可以慢慢道来。
参考: