弹性布局flex(弹性布局flex应用案例)

1-【归纳】flex布局

采用flex布局的元素，称为flex容器（flex container）。它的所有子元素自动成为容器成员，称为flex项目（flex item）。

flex-direction：row | row-reverse | colume | colume-reverse；1）row：横向从左到右排列（左对齐），默认的排列方式。2）row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。

Flex布局也称弹性布局（flexiblebox）模块，主要是为了提供一个更有效的方式对容器之间的各项内容进行布局。

flex-grow，决定了item的放大比例，默认为0不进行放大。

flex布局又称为弹性布局，相对于更早出来的float浮动布局更加方便，在兼容性方面还有不足，但随着很多浏览器版本的淘汰，今后的flex布局会被更加广泛使用。在掌握flex布局前先认识两个概念。

2-web前端--网页布局(盒子模式、弹性盒子、网格)

flex-box无疑是布局上面的神器 网格布局同样是布局方面的神器，目前不太常用。

静态布局：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。

弹性盒子是CSS3的一种新布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

布局就是以最合适浏览的方式将图片和文字排放在页面的不同位置。不同的制作者会有不同的布局设计。网页布局有以下几种常见结构：上下框架型 上下框架型布局与前面的左右框架型布局类似。

3-ReactNative之Flex布局

1、一般使用ReactNative开发App，一般都采用Flex布局，使用这套布局就非常快。 Flex简介 Flex又叫弹性布局，会把当前组件看做一个容器，他的所有子组件都是他容器中的成员，通过Flex，就能迅速的布局容器中的成员。

2、：若当前组件是View，那么它子组件的默认排列方式是竖直向下的，也就是他的 flexDirection 属性默认是 column ，那么它的主轴就是向下的这个轴，次轴就是横着的轴（垂直主轴的轴叫做次轴）。

3、在学习各个组件之前，我们先学习一下Flexbox布局即这些组件如何排布布局的，如果你学过CSS布局，那么React Native中的Flexbox的工作原理与CSS基本一样的，没接触过也没关系，我们一起重头学习。

4、最近在使用react native的过程中，遇到一个问题。父子元素均使用flex布局，子元素按设置的比例“分享”父元素的空间，显示效果符合预期。