小程序笔记：display：flex布局样式

一直在使用Flex布局，但对Ta的属性，还不大熟悉了解！搜索了几篇笔记，结合自己的理解！整理成一篇笔记，以便查阅！

基本概念

　　flex的概念最早是在2009年被提出，目的是提供一种更灵活的布局模型，使容器能通过改变里面项目的高宽、顺序，来对可用空间实现最佳的填充，方便适配不同大小的内容区域。

       要使用 flex 布局的话需要显式的声明:display:flex

设置容器的属性有：

1	布局方向：flex-direction: row | row-reverse | column |column-reverse 属性决定主轴的方向（即项目的排列方向） row：从左到右的水平方向为主轴（默认值） row-reverse：从右到左的水平方向为主轴 column：从上到下的垂直方向为主轴 column-reverse：从下到上的垂直方向为主轴

2	横向布局----设置justify-content对齐属性: |flex-start（默认值）| flex-end | center  |space-between | space-around | space-evenly 定义了项目在主轴上的排列方式 flex-start：主轴起点对齐(默认值) flex-end：主轴结束点对齐 center：在主轴中居中对齐 space-between：两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等 space-around：每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同

 

3

纵向布局——需要设置 align-items 属性，它有5个值可选： stretch（默认值） | flex-start | center |flex-end | space-between | space-around | space-evenly stretch 填充整个容器(默认值) flex-start 侧轴的起点对齐 （设置下子 view 的高度，来看的明显一些） flex-end 侧轴的终点对齐 center 在侧轴中居中对齐 baseline 以子元素的第一行文字对齐   子 View 还有个属性 align-self，可以覆盖父元素的 align-items 属性，它有6个值可选： auto | flex-start | flex-end | center | baseline | stretch （auto 为继承父元素 align-items 属性，其他和 align-items 一致）

 

4	控制子 View 是否换行flex-wrap有3个值可选: nowrap（默认值[不换行]） | wrap[换行] | wrap-reverse （1）nowrap（默认）：不换行。 （2）wrap：换行，第一行在上方。 （3）wrap-reverse：换行，第一行在下方。

代码片段示例：

水平排列，居中对齐

view{
display: flex;
justify-content:center;
}

详细代码布局参考：Flex弹性布局 - 番薯大佬的专栏 - CSDN博客