1.弹性盒子
弹性盒子是一种简单而强大的布局方式,我们可以通过弹性盒子指明空间的分布方式、内容的对齐方式和元素的视觉顺序。内容可以轻易地横向排列或者纵向排列,也可以沿着某一条轴布局。
弹性盒子最突出的一个特点,能让元素在不同屏幕尺寸下或者不同显示设备做好适应准备,因为内容可以根据空间的大小增减尺寸。 弹性盒子依赖的是父子关系。在父元素上面声明 display:flex
来创建一个弹性容器,它主要负责内部子元素的布置,控制子元素的布局。在弹性容器中的这些子元素,一般都叫弹性元素。
2. flex-direction
首先从布局的大体来看,首先要决定元素的布局排列方式:从上到下、从左到右,还是其他的排列方式。这时,可以通过flex-direction
来改变布局顺序。
3.flex-wrap
在flex布局中,当弹性元素个数过多时,并且超过了弹性容器的宽度,这时默认情况下会将子元素进行挤压,然后放在同一行主轴上进行排列。默认情况下,弹性元素不会进行换行,并且允许元素缩减尺寸。
同样的,我们可以通过flex-wrap
来让元素进行换行处理。
nowrap:默认值,元素不换行;
wrap:元素允许换行;
wrap-reverse:只是决定多出的行显示在第一行之后。
4. flex-start和flex-end
flex-start
是默认行为,即所有弹性元素都向主轴的起边靠拢,每一行里的第一个弹性元素都紧靠主轴起始边的一侧;
flex-end
则是在一行里的最后一个弹性元素向主轴的终边靠拢,前面各弹性元素紧挨后一个弹性元素;
5. space-around
一行中额外的空白将均匀分布在弹性元素的周围。当一行中只有一个元素,这个元素将会居中显示。