前言
在css中其实也学过布局,利用display,float,position进行的布局,而最近微信小程序开发的学习是又学到了新的布局(涉及的比较晚,所以现在才知道而已,其实早都有了),因此来记录一下学习过程。
一、flex布局定义
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何的容器(盒子)中都可以用flex属性。
.box{
display:flex;
}
或者行内的flex属性设置。
.box{
display:inline-flex;
}
二、容器的属性
在进行了display的属性设置后,这是容器拥有了以下几个属性可以设置。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
以下对其中几个进行简要的说明,因为其中一些属性接触的次数也不多,所以没有太多可以讲的。
2.1 flex-direction
test1.png.box{
flex-direction: row | row-reverse | column | column-reverse
}
其中row为默认值,代表将元素以行排列(以左为起点)。row-reverse代表以右为起点进行行排列。column代表从页面上方进行列排列。column-reverse代表从页面下方进行列排列。效果图如下:
其实这个属性是用的最多的,因为在他很方便,而且目前阶段我对它的接触最多,因此运用的还算熟练。
2.2 flex-wrap
默认将项目排在一条线上,不换行。而 flex-wrap的属性则设定如何换行。
.box{
flex-wrap: nowarp | wrap | wrap-reverse;
}
nowrap(默认)为不换行,项目全部排列在一行。
wrap为换行,第一行在上面。
wrap-reverse为换行,但是第一行在下面。
2.3 flex-flow
该属性为flex-direction和flex-wrap的简写形式。
.box{
flex-direction: flex-direction || flex-wrap;
}
书写格式为先写flex-direction的值,再写flex-wrap的值。两个中间加空格。
网友评论