十年河东，十年河西，莫欺少年穷

详细请看视频：​​https://www.bilibili.com/video/BV1AE411F7jq?from=search&seid=10691954255264950379&spm_id_from=333.337.0.0​​

​​http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html​​

学无止境，精益求精

Flex 布局_默认值

Flex布局的主轴，交叉轴

Flex 布局_xml_02

记录篇

inline-flex 代表行内元素  可以和其他行内元素共同占用一行
display: inline-flex;

  display: flex; 块级元素，独占一行

display: flex;


  line-height: 100rpx;  行高  可以使块级元素中的文字居中,左右居中 上下居中

line-height: 100rpx;

  flex-direction:row-reverse;

flex-direction:row-reverse; 此时主轴从右到左，和默认的左到右相反

范例：

/* pages/Flex/Flex.wxss */
.cld{
  display: flex;
  flex-direction:row;
  justify-content: center;
  border: 1px solid red;
  height: 200px;
  width: 90%;
}
.fx{
  height: 100rpx;
  width: 100rpx;
  background-color: rgb(231, 19, 19);
  margin-left: 10rpx;
  line-height: 100rpx;
  font-size: 42px;
  text-align: center;
}

wxml

<!--pages/Flex/Flex.wxml-->
<view class="cld">
<view class="fx">1</view>
<view class="fx">2</view>
<view class="fx">3</view>
<view class="fx">4</view>
</view>
666

Flex 布局_默认值_03

  flex-direction:row;  用于Flex容器上，确定Flex 容器中的Flex-Item 布局的方向是横向布局还是竖向布局.

  flex-direction:column;  竖向布局

  flex-direction:row-reverse; 横向 反转布局

  flex-direction:column-reverse; 竖向 反转布局

flex-direction:column-reverse;

Flex 布局_竖向_04

  justify-content: flex-start; 默认值 和主轴的头对齐

  justify-content: flex-end; 和主轴的尾对齐

justify-content: flex-end;

Flex 布局_xml_05

  justify-content: center; 决定了Flex-item 在主轴上居中

flex-direction:column;
  justify-content: flex-end;

Flex 布局_竖向_06

  justify-content: space-between;  元素两端对齐，并且中间元素等距分布

justify-content: space-between;

Flex 布局_xml_07

justify-content:space-around;  两侧距离边框的距离是中间元素的一半

Flex 布局_xml_08

justify-content:space-evenly;
justify-content:space-evenly;

Flex 布局_默认值_09

align-items: flex-start; 默认值  此时会用到主轴的交叉轴 .  决定了Flex-ITem 在交叉轴上的排列方式。 交叉轴只能从左到右 或者 从上到下 。

align-items:flex-end;

Flex 布局_xml_10

align-items:center;

Flex 布局_默认值_11

align-items:center;
  justify-content: center;

Flex 布局_默认值_12

align-items:stretch;  拉伸属性  需要高度设置为auto
height: auto;

Flex 布局_默认值_13

  flex-wrap: wrap; //决定了flex 容器内的 item 是单行 还是 多行展示 默认值时 单行 no-wrap

flex-wrap: wrap; //决定了flex 容器内的 item 是单行 还是 多行展示

Flex 布局_竖向_14


 flex-flow  是 

Flex 布局_默认值_15

  align-content: center;  和  justify-content: center; 类似 代表垂直分布


 最后做个总结：

Flex 布局_xml_16


 现在看作用于 Flex-Item 上的CSS样式

Flex 布局_竖向_17


 Order  排序

align-self 

Flex 布局_竖向_18


 Flex 布局_竖向_19

Flex 布局_竖向_20


 @不喜勿喷