flex布局

转载自：https://weibo.com/1712131295/CoRnElNkZ?ref=collection&type=comment#_rnd1512010874198；http://flexboxfroggy.com/#zh-cn

justify-content

justifyContent可以决定其子元素沿着主轴的排列方式

• flex-start: 元素和容器的左端对齐。
• flex-end: 元素和容器的右端对齐。
• center: 元素在容器里居中。
• space-between:元素之间保持相等的距离。
• space-around:元素周围保持相等的距离。

 

 

 

align-items

alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式

• flex-start: 元素与容器的顶部对齐。
• flex-end: 元素与容器的底部对齐。
• center: 元素纵向居中。
• baseline: 元素在容器的基线位置显示。
• stretch: 元素被拉伸以填满整个容器。

 

flex-direction

在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向

• row: 元素摆放的方向和文字方向一致。
• row-reverse: 元素摆放的方向和文字方向相反。
  • flex-direction：row-reverse之后，元素的起始方向改变了，元素的排列顺序也改变了。
• column: 元素从上放到下。
• column-reverse: 元素从下放到上。

 

order

有时候仅仅调转行或列的方向是不够的。在这些情况，我们可以设置单个元素的order属性。元素的属性默认值为0，但是我们设置这个属性为正数或负数。当设置order后两个元素位置重叠时，元素的位置前后顺序由元素在源代码中位置决定。


• 整个flex布局的盒子中，flex item会根据order的

        大小沿主轴方向依次排列。并且align-items属性

        并不会对这个规则进行改变。

     由右图所示：虽然通过align-self属性两只黄色青蛙

     下移动了。但是其并没有因为order值小于绿色青蛙

      而移动到第一行。 但当多行排列时，下一行的青蛙

      的order值是不小于上一行青蛙的

 

 

 

 

align-content

align-content与justify-cotent类似，该属性用于设置行与行之间的间距。其取值如下 

• flex-start: 多行从盒子顶部无间距排列.
• flex-end: 多行从盒子底部无间距排列，注意此时元素的排列顺序不变.
• center:多行从盒子中间无间距排列.
• space-between: 元素之间保持相等的距离.
• space-around:元素周围保持相等的距离。

1、align-content设置的是行与行之间的间隔，而align-items设置的

是元素在整个盒子中的总体对齐方式。当盒子仅有一行元素时，

align-content是不起作用的。

2、如图所示，设置所有青蛙align-content: flex-end; 青蛙的排列顺序不变。

 

 

 参考文档：https://css-tricks.com/snippets/css/a-guide-to-flexbox/