weex默认的flex布局_flex笔记3——flex-flow和justify-content

flex布局，“容器” 中的flex-flow 属性是一个简写属性，是笔记1和笔记2中提及的flex-direction属性和flex-wrap属性的简写形式，默认值是row nowrap(flex-direction和flex-wrap的默认值) 这属性没什么好说的。这里的重点是justify-content属性。

justify-content属性定义了项目在主轴上的对齐方式，而主轴是flex布局中对flex布局空间的定义，在flex-direction属性中定义的就是主轴(项目的排列方向)，这里就一默认主轴进行展示。

justify-content有5个取值，flex-start(默认值，左对齐)、flex-end(右对齐)、center(居中)、space-between(两端对齐，“项目”之间的间隔相等)、space-around(每个“项目”两侧的距离相等，所以“项目”之间的距离是两边“项目”和边框距离的两倍)，下面照例是一段html代码

1

2

3

附上CSS样式

.container{ width:1000px; padding:20px 0; display: flex; background: green ;}.item{ display: flex; flex-shrink: 0; justify-content: center; height:100px; line-height:100px; color:red; font-size: 60px;}

上面的css代码中，“容器”是没有加上justify-content属性，没有加上它就会给这个属性一个默认值flex-start。就是说没有写上justify-content属性和写上justify-content：flex-start是一样的效果。下面是效果图

justify-content：flex-start

看起来是不是有点眼熟啊，是不是想到了float：left(向左浮动)，表现效果是一样的。下面更改justify-content的取值—— justify-content：flex-end

justify-content：flex-end

这次是和float：right(向右浮动)效果是一样的。当然如果这里设置的是浮动我们看到的3,2,1的排列才对，flex当然也可以做到，请复习笔记1。接着是justify-content：center

justify-content：center

居中显示，这是一个面试官很爱问的问题，flex的justify-content：center就是答案的一种，配合下一个属性align-items:center,就可以实现一个垂直居中，水平居中的效果(“容器”设置高度)。为了展示，给“容器”加上高度300px和align-items:center，效果如下

垂直剧中，水平居中

再接着回到justify-content属性的第四个取值——space-between，效果也是直接上图

justify-content：space-between

“项目”两两之间保持一样的距离，当你需要这种布局，直接使用，就不用花尽心思去计算，然后为“项目”添加对应的外边距之类的操作了。

最后是justify-content属性的最后一个取值——space-around，效果图给上

justify-content：space-around

相当于为每个“项目”加上一个外边距(但是这个外边距等于多少不用我们计算)，然后“项目”总宽度和“容器”宽度一致。所以，我们可以看到边沿的“项目”和容器边框的距离是项目之间的距离的一半，因为1+1=2。

以上就是笔记3的全部内容，谢谢观看。