引导者本文目录一览：
什么是flex布局
1、flex（flexible box：弹性布局盒模型），是 2009 年 w3c 提出的一种可以简洁、快速对页面进行弹性布局的属性。主要思想是给予容器控制内部元素高度和宽度的能力。
2、Flex布局是一种CSS布局模型，它允许开发者在容器中轻松地控制和调整其内容。拓展知识：Flex布局提供了一种灵活的方式来排列和调整项目，使其在容器中具有响应性和适应性。
3、Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。display： flex； display： inline-flex；注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
cssflex属性怎么用
使用p标签创建一个模块，在p内，再使用p标签创建两个模块，并分别设置p标签的class属性和id属性。在css标签内，通过class或id分别定义p的宽度和高度、背景颜色。
首先我们要先给图片添加一个div，并且定义为宽度为100px，高度也是100px，并且给它定义一些基本的属性，其中我们把div中的display元素设置成flex，然后把另外一条添加align-items：center属性。
使用CSS的flex布局齐。具体步骤如下：在HTML中，将导航栏和下方图片用div包裹起来，设置一个共同的容器。在CSS中，设置这个div容器的display属性为flex，让其成为一个弹性容器。
flex有什么用?
1、flex系统在网页设计中被广泛应用css的flex，可以用于实现各种复杂的布局方式css的flex，如网格布局、导航栏布局、响应式布局等。
2、Flex 是一个高效、免费的开源框架css的flex，可用于构建具有表现力的 Web应用程序，这些应用程序利用Adobe Flash Player和Adobe AIR， 运行时跨浏览器、桌面和操作系统实现一致的部署。
3、使用Flex布局，您可以轻松地在各种屏幕尺寸和设备上创建具有良好布局和响应性的网页和应用程序。Flex布局还具有一些优点，例如易于使用、灵活性强、响应性好、支持多语言和多方向布局等。
CSS3之flexbox如何实现水平垂直居中和三列等高布局
要使用flex布局css的flex，首先设置父容器display：flexcss的flex，然后设置justify-content：center以实现水平居中，最后设置align-items：center以实现垂直居中。
首先将html、body高度设为100%，清除默认css的flex的margin、padding值。设置盒子margin值为0 auto，实现水平居中。开启盒子的相对定位，将其下移父元素的50%。若已知盒子高度，可通过margin-top属性将其上移自身高度的一半。
通过隐藏节点实现CSS垂直居中。 创建一个隐藏节点#hide，使得隐藏节点的height值为剩余高度的一半即可。 这种方法也适用于CSS水平居中，原理一样。已知父元素高度通过transform实现CSS垂直居中。
flex称为弹性布局，当父元素设置为flex值后子元素会自动成为其成员，再通过设置属性值来实现各种布局效果。例通过给父元素设置justify-content属性实现水平垂直居中效果通过Flex可以简便、完整、响应式地实现各种页面布局。
通过display：flex实现CSS垂直居中的方法是给父元素display：flexcss的flex；而子元素align-self：center；这个跟CSS水平居中的原理是一样的，只是在flex-direction上有所差别，一个是row(默认值)，另外一个是column。
(1) flex 属性有三个用途 (2)使用 flex 属性需注意 iOS里怎么使用Masonry布局的，RN里就怎么使用 Flex布局+CSS布局 来做布局就行了，它们布局的思路是一样的， 一个组件也同样至少需要四个约束。
