flex布局的学习

Flex 布局

Flex 是 2009 年，W3C 提出的一种新的布局适配方案，通过 Flex布局，可以简便、完整、响应式的实现各种页面布局。经过这些年的发展，已经得到了所有浏览器的支持，基本上可以让我们放心使用。 Flex 布局是 FlexibleBox 的缩写，直译过来就是 “弹性盒子”，它也是基于 “盒子” 模型，将 UI 切割成一个一个小的盒子，来进行 UI 布局。

Flex 如何使用

概述 Flex 的使用非常的简单，你只需要将 display 设置为 flex 就可以了。

display 除了 flex 还有一些其他可选参数，例如：

• block：指定一个块级布局，它其内的元素，总是起一个新行来显示，而微信小程序的很多视图容器组件，默认的 displa 就是block，例如：view、scroll-view、swiper 等。
• flex：指定为 Flex 布局，它可以在盒子内显示子元素。
  举个例子，看一下效果图：
  
  在这里，当不做特殊设置的时候，默认为 display:block 的状态，其内的每一个元素，都另起一行去展示。display:flex 的话，我们就可以自由设置其内元素的布局形式

Flex 的方向轴

在Flex 布局中，天然存在两根方向轴： 主轴 和 交叉轴 。交叉轴在有些地方又被称为侧轴，其实是一个概念。
在默认情况下，主轴是沿着水平方向延伸，而交叉轴则正好与主轴呈交叉状态。 但是这并非不可改变，我们可以通过 flex-direction属性，来改变主轴的方向，交叉轴的方向是相对于主轴存在的，当改变主轴方向后，交叉轴也被同时改变。

Flex布局是通过一些属性来控制效果的，和我们正常写一个移动 App 是一样的，有一些属性是作用在父容器中的，有一些是作用在其内的子元素上的。

Flex 在父容器上的属性

在父容器上，存在的属性有：

• flex-direction：指定主轴的方向。
• flex-flow：flex-direction 和 flex-wrap 两个属性的组合简写形式。
• align-items：子元素在交叉轴上的排列方向。
• align-content：多根轴线的对齐方式。

• 这几个，除了 align-content都是相对比较常用的属性。

  1) flex-direction

  flex布局有两条轴，它们是交叉相对的，分为主轴和交叉轴。我们可以通过 flex-direction 来确定主轴的方向，同时交叉轴的方向也被确定了。

• row：默认值，主轴水平方向，起始点在左边

• row-reverse：主轴水平方向，起始点在右边。
• column：主轴垂直方向，起始点在上边。
• column-reverse：主轴垂直方向，起始点在下边。

• 效果图：
  

  2）flex-wrap
  flex-wrap 属性用来确定，父容器内，当单行已经无法包容所有子元素之后，如何换行。

  • nowrap：不换行，此为默认值。
  • wrap：超出单行的时候，自然换行。
  • wrap-reverse：超出单行的时候，沿着底部翻转方向，自然换行。

  css 里就是有很多属性是带有 xxx-reverse 参数的，大多数情况下我们也用不上。