flex响应式布局,flex布局有何属性

css之dispaly:flex;多行多列

1、display：flex是CSS中的一个属性值，用来定义一个容器元素为一个弹性容器（flexcontainer），即使其子元素（flexitems）也成为弹性项目（flexitems），从而实现弹性布局。

2、您可以使用以下方法之一来实现多行文本的垂直居中： 利用表格元素table+vertical-align实现。将父元素设置为块级表格来显示，再将子元素设置为一个表格单元格显示后，设置vertical-align： middle；即实现效果。

3、最近遇到布局上要求item两端对齐，且最后一行在列不满的情况下要求左对齐，使用flex的 justify-content： space-between；实现时发现最后一行不能左对齐，而是两端对齐方式。

4、CSS Display 是什么意思？CSS 中的 display 属性表示一个元素应该如何显示。通过设置 display 属性，我们可以控制元素是显示成块级元素还是行内元素，或者是很多其他的显示方式。

5、flex 属性有三个用途 （2）使用 flex 属性需注意 iOS里怎么使用Masonry布局的，RN里就怎么使用 Flex布局+CSS布局 来做布局就行了，它们布局的思路是一样的， 一个组件也同样至少需要四个约束。

flex弹性布局

1、在使用flex布局时，如果直接为子级元素添加padding的话，其宽度会压迫其他兄弟元素的空间。如以下布局。本意是设置一个弹性布局，然后每个子元素各占三分之一，然后第二个元素设置一个向右的padding值。

2、flex称为弹性布局，当父元素设置为flex值后子元素会自动成为其成员，再通过设置属性值来实现各种布局效果。例通过给父元素设置justify-content属性实现水平垂直居中效果通过Flex可以简便、完整、响应式地实现各种页面布局。

3、最近老是遇到布局问题，尤其是在垂直居中布局上。

4、布局的传统解决方案，基于[盒状模型]，于那些特殊布局非常不方便。 Flex 是 Flexible Box 的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。

「布局」静态布局、自适应布局、流式布局、响应式布局、弹性布局...

响应式布局 ：采用自适应布局和流式布局的综合方式，为 不同屏幕分辨率范围 创建 流式布局 。

流式布局：布局特点是屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。自适应布局：自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。

自适应布局 ——可以看成是不同屏幕下由多个静态布局组成的。自适应布局是为不同的屏幕分辨率分别定义不同的布局。

默认的文字大小16px就是1em。响应式布局 每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变，设计方法通常采用了媒体查询+流式布局，使用@media媒体查询给不同尺寸和介质的设备切换不同的样式。

流式布局：页面元素的宽度按照屏幕进行适配调整，元素的位置不变，大小变化，屏幕太大或者太小导致元素不能正常显示。响应式布局： 使用meta标签设置，页面元素宽度随窗口调整自动适配。