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

红太狼 2021-09-20 06:24 343阅读 0赞

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

### 基本概念 ###

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvX2xpdmVy_size_16_color_FFFFFF_t_70][]

设置容器的属性有：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>布局方向：flex-</code><code>direction: row | row-reverse | column |column-reverse</code></p> <p><code>属性决定主轴的方向（即项目的排列方向）</code></p> 
    <ul> 
     <li>row：从左到右的水平方向为主轴<code>（默认值）</code></li> 
     <li>row-reverse：从右到左的水平方向为主轴</li> 
     <li>column：从上到下的垂直方向为主轴</li> 
     <li>column-reverse：从下到上的垂直方向为主轴</li> 
     <li> <p style="text-align:center;"><img alt="" height="169" src="https://img-blog.csdnimg.cn/20190618160950962.png" width="562"></p> </li> 
    </ul></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <p>2</p> </td> 
   <td> <p><code>横向布局----设置justify-</code><code>content对齐属性</code><code>:</code></p> <p><code>|flex-start（默认值）| flex-end |&nbsp;</code><code>center</code>&nbsp; <code>|space-between | space-around | space-evenly </code></p> <p><code>定义了项目在主轴上的排列方式</code></p> 
    <ul> 
     <li>flex-start：主轴起点对齐(默认值)</li> 
    </ul><p><a href="http://images2015.cnblogs.com/blog/55095/201702/55095-20170214001256722-197915724.png" rel="nofollow"><img alt="image" height="106" src="https://images2015.cnblogs.com/blog/55095/201702/55095-20170214001256957-1290460259.png" width="450"></a></p> 
    <ul> 
     <li>flex-end：主轴结束点对齐</li> 
    </ul><p><a href="http://images2015.cnblogs.com/blog/55095/201702/55095-20170214001257863-1088289924.png" rel="nofollow"><img alt="image" height="96" src="https://images2015.cnblogs.com/blog/55095/201702/55095-20170214001258097-826179209.png" width="450"></a></p> 
    <ul> 
     <li>center：在主轴中居中对齐</li> 
    </ul><p><a href="http://images2015.cnblogs.com/blog/55095/201702/55095-20170214001258363-1407924100.png" rel="nofollow"><img alt="image" height="98" src="https://images2015.cnblogs.com/blog/55095/201702/55095-20170214001258597-230918391.png" width="450"></a></p> 
    <ul> 
     <li>space-between：两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等</li> 
    </ul><p><a href="http://images2015.cnblogs.com/blog/55095/201702/55095-20170214001258847-1745928718.png" rel="nofollow"><img alt="image" height="87" src="https://images2015.cnblogs.com/blog/55095/201702/55095-20170214001259144-1218017146.png" width="450"></a></p> 
    <ul> 
     <li>space-around：每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同</li> 
    </ul><p><a href="http://images2015.cnblogs.com/blog/55095/201702/55095-20170214001259379-2100306861.png" rel="nofollow"><img alt="image" height="106" src="https://images2015.cnblogs.com/blog/55095/201702/55095-20170214001259613-829747677.png" width="450"></a></p> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <p>3</p> </td> 
   <td> <p>纵向布局——需要设置 align-items 属性，它有5个值可选：</p> <p><code>stretch（默认值） | flex-start |&nbsp;</code><code>center</code>&nbsp;<code>|flex-end | space-between | space-around | space-evenly</code></p> 
    <ul> 
     <li>stretch 填充整个容器(默认值)</li> 
    </ul><p><a href="http://images2015.cnblogs.com/blog/55095/201702/55095-20170214001259894-1385374670.png" rel="nofollow"><img alt="image" height="145" src="https://images2015.cnblogs.com/blog/55095/201702/55095-20170214001300144-143325043.png" width="407"></a></p> 
    <ul> 
     <li>flex-start 侧轴的起点对齐 （设置下子 view 的高度，来看的明显一些）</li> 
    </ul><p><a href="http://images2015.cnblogs.com/blog/55095/201702/55095-20170214001300472-335328527.png" rel="nofollow"><img alt="image" height="141" src="https://images2015.cnblogs.com/blog/55095/201702/55095-20170214001305113-1007211490.png" width="415"></a></p> 
    <ul> 
     <li>flex-end 侧轴的终点对齐</li> 
    </ul><p><a href="http://images2015.cnblogs.com/blog/55095/201702/55095-20170214001305441-315682901.png" rel="nofollow"><img alt="image" height="142" src="https://images2015.cnblogs.com/blog/55095/201702/55095-20170214001305925-761625647.png" width="405"></a></p> 
    <ul> 
     <li>center 在侧轴中居中对齐</li> 
    </ul><p><a href="http://images2015.cnblogs.com/blog/55095/201702/55095-20170214001306222-440218277.png" rel="nofollow"><img alt="image" height="135" src="https://images2015.cnblogs.com/blog/55095/201702/55095-20170214001306691-758879245.png" width="409"></a></p> 
    <ul> 
     <li>baseline 以子元素的第一行文字对齐</li> 
    </ul><p><a href="http://images2015.cnblogs.com/blog/55095/201702/55095-20170214001307410-86369487.png" rel="nofollow"><img alt="image" height="144" src="https://images2015.cnblogs.com/blog/55095/201702/55095-20170214001307816-158433598.png" width="411"></a></p> <p>&nbsp;</p> <p>子 View 还有个属性 align-self，可以覆盖父元素的 align-items 属性，它有6个值可选：</p> <p>auto | flex-start | flex-end | center | baseline | stretch</p> <p>（auto 为继承父元素 align-items 属性，其他和 align-items 一致）</p> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <p>4</p> </td> 
   <td> <p><code>控制子 View 是否换行<strong>flex-wrap</strong>有3个值可选:</code></p> <p><code>nowrap（默认值[不换行]） | wrap[换行] | wrap-reverse</code></p> <p><img alt="" height="164" src="https://images2018.cnblogs.com/blog/991470/201805/991470-20180507122032841-1754000239.png" width="474"></p> <p>（1）<code>nowrap</code>（默认）：不换行。</p> <p><img alt="" height="113" src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071007.png" width="546"></p> <p>（2）<code>wrap</code>：换行，第一行在上方。</p> <p><img alt="" height="138" src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071008.jpg" width="546"></p> <p>（3）<code>wrap-reverse</code>：换行，第一行在下方。</p> <p><img alt="" height="138" src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071009.jpg" width="546"></p> </td> 
  </tr> 
 </tbody> 
</table>

代码片段示例：

水平排列，居中对齐

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

![2019061816495315.png][]

![20190618165004121.png][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvX2xpdmVy_size_16_color_FFFFFF_t_70]: /images/20210913/41b0ed2f2e7241c6b3979420850b52fe.png
[2019061816495315.png]: /images/20210913/5d2a8fe33fca4c41b6eea2bdaf1dfc5f.png
[20190618165004121.png]: /images/20210913/b230d856716a4c54a0299c849c3ab180.png
[Flex_ - _ - CSDN_]: https://blog.csdn.net/potato512/article/details/79924210