flex布局

前言

在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

.box{
flex-direction: row | row-reverse | column | column-reverse
}
其中row为默认值，代表将元素以行排列（以左为起点）。row-reverse代表以右为起点进行行排列。column代表从页面上方进行列排列。column-reverse代表从页面下方进行列排列。效果图如下：

test1.png

其实这个属性是用的最多的，因为在他很方便，而且目前阶段我对它的接触最多，因此运用的还算熟练。

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的值。两个中间加空格。