flexbox 的潜在原则是使得布局更加灵活和直观。
属性1:display: flex
在一个灰色背景的容器div
里面,有四个颜色不同、尺寸不同的子div
,此时每个div
有默认的display: block
,每一个的宽度也占满了一整行。
为了使用 flexbox,需要将你的容器放在 flex 容器中 ,见如下代码:
#container {
display: flex;
}
可以看到,发生了一点变化。你的四个div
显示到了一行上,但也就仅此而已。可是你要知道,在这背后,你赋予了你的 div
一个叫做 flex上下文 的东西。
你现在可以把它应用在你的上下文中了,是不是比传统的 CSS 简单很多!
属性2:flex-direction
一个 flexbox 容器有两个坐标轴:主轴和交叉轴,直观的来看如下图:
默认情况下,元素都是从左到右地分布在主轴上。这就是为什么当你应用display: flex
的时候,形状默认水平分布的原因。
flex-direction
,可以使你的主轴旋转。
#container {
display: flex;
flex-direction: column;
}
这里有一个很重要的区别:flex-direction: column
并不是把你的形状分布在交叉轴上。而是使主轴自身发生了旋转,从水平方向旋转到了垂直方向。
还有一些其他的flex-direction
可选项,如:row-reverse
和column-reverse
是反向排列。
属性3:justify-content
justify-content
控制的是你在主轴上如何对齐元素。
这里我们需要对主轴和交叉轴的区别有更深一点的理解。首先让我们回到flex-firection: row
。
#container {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
使用 justify-content,你有五个选择:
flex-start
flex-end
center
space-between
space-around
space-around
和space-between
是最直观的。space-between
使每个元素之间有相同的距离,但是不包含元素和容器之间的距离。
space-around
让每个元素块的两侧有相同的空隙距离。这就意味着最外层的元素和容器之间的距离,是两个元素之间距离的一半(每个元素块的左右两侧都贡献了一个不重叠的等距离,因此是两倍的间隙)。
最后小结:记住justify-content
是沿着主轴的,flex-direction
是转换主轴的。这对你以后移动元素很关键。
属性4:align-items
如果你已经消化了justify-content
,那么align-items
对你俩讲将是轻而易举的事了。
justify-content
是沿着主轴的,而align-items
是应用到交叉轴上的。
我们一起看一下align-items
命令。
flex-start
flex-end
center
stretch
baseline
前三个和justify-content
没什么区别,后两个则有一些不同。
stretch
你的元素将会被拉伸充满整个交叉轴。
baseline
则会使你的文字底部对齐。见图知意。
(注意:如果用align-items: stretch
,你必须要将元素的height
设置成auto
,否则height
属性将会覆盖stretch
)
对于baseline
要意识到,如果你把文字标签拿掉,那么将会用元素的底部对齐来替代原来的效果,如下图。
为了更好的展示主轴和交叉轴,我们结合justify-content和align-items来看一下两个flex-direction的核心不同。
用row,元素被分布在水平主轴上。
用column,被分布在垂直主轴上。
在这两个 例子 中,不论垂直还是水平方向,四个元素都是被居中的
属性5:align-self
align-self
允许你手动操作一个特定元素的对齐方式。
对于一个元素而言,它基本上是对align-items
的覆盖。尽管align-self
默认值设成了auto
,但是它和align-items
所有的属性都是一样的,这也使得这个元素继承了容器的align-items
。
#container {
align-items: flex-start;
}
.square#one {
align-self: center;
}
// 只有这个形状会居中。
我们来看一下它设置的结果是什么样的。对前两个形状设置不同的align-self
,其他元素设置为align-items: center
和flex-direction: row
。
最后
尽管我们仅仅讲了 flexbox 的皮毛,但是这些命令应该也足够你应付很多基本布局了。