很多朋友对于flex布局不换行和div 不换行不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！
一、CSS布局 + Flex布局
我们只会用到一点点儿CSS布局的属性，虽然少，但既然要用到，就得把它们总结在这里，搞明白。
在了解CSS布局的相关属性之前，我们先了解一下盒子模型——CSS会把每个组件都看作是一个盒子，每个盒子从内往外有三个部分：
组件的宽度和高度决定了它在屏幕上显示的尺寸，一个组件的宽度和高度就是它外边框所包围矩形的宽度和高度，iOS里也是这样的。
我们可以通过 width和 height属性给一个组件设置固定的宽度，不过需要注意这两个属性只能接收数值，不能带单位，这是因为RN要自己去适配安卓和iOS的单位。
在RN里，我们想让一个组件自适应宽高，要分两步。首先我们要让该组件撑满它的父视图，即如果我们想自适应宽度，就得先让子视图的宽度撑满它父视图的宽度，如果我们想自适应高度，就得先让子视图撑满它父视图的高度，如果我们宽度和高度都想自适应，就得先让子视图把它父视图的宽度和高度都撑满。然后才能像我们iOS里使用Masonry那样，通过给组件添加上边距、左边距、下边距、右边距等约束来实现宽度和高度的自适应。
这里再对第一步做个解释， item的 flex: 1属性可以让item在主轴上撑满它的容器，容器的 alignItems:'stretch'属性+ item在侧轴上不设置空间可以让item在侧轴上撑满它的容器。好像有点不明白是吧，我们再通过一个例子来说得明了点，RN里不是默认主轴为竖向、侧轴为横向嘛，我们就采取这个默认状态来举例子。在RN里，默认主轴为竖向、侧轴为横向的状态下，如果我们想让某个组件自适应高度，就得首先在它自身上设置 flex: 1属性，来让它的高度撑满它的父视图；如果我们想让某个组件自适应宽度，就得首先在它父视图身上设置 alignItems:'stretch'属性（当然默认就是这个值），这还不够，你还得确保不给这个组件设置 width属性或者 width属性的值设为 auto；如果我们想让一个组件自适应宽高，则两者都得做。当然，如果我们设置了主轴为横向、侧轴为竖向，其实也是一样的道理，自己捋一下就知道怎么做了。如果还是看不懂的话，没有关系，下面我们会详细谈到这几个属性，等你学了这几个属性，反过头来看这里就明白了。
Flex是Flexible Box的缩写，可译为灵活的、有弹性的盒子。那Flex布局就是Flexible Box布局的缩写，就译为弹性盒子布局，用来对一个盒子进行灵活的布局。
在了解Flex布局之前，我们得先了解一下Flex布局里的两对儿重要的概念。
采用Flex布局的组件，被称为Flex容器（flex container），简称容器（container）。
这个组件上的子组件，被称为Flex项目（flex item），简称item（项目）。
我们可以把容器和item看做是父视图和子视图的关系，因此下文中的容器、父组件、父视图将是一样的概念，item、组件、子视图将是一样的概念，组件和视图将是一样的概念。
每个容器都有两根轴，一个是主轴，一个是侧轴。
容器里众多的 item自动沿主轴进行排列。
一个item在主轴方向上所占据的空间称为 main size，一个item在侧轴方向上所占据的空间称为 cross size。
RN里主轴的默认方向为竖向，侧轴为横向。浏览器里主轴的默认方向为横向，侧轴为竖向，下面我们讲Flex布局的属性时会采用浏览器的状态，学会后对应到RN里，换个主轴方向就可以了。
用在容器上的属性，最常用的有 5个，而且这些属性还都不是从来设置容器自己的布局，而是用来设置容器里item的布局。
flex-direction属性用来设置主轴的方向，即容器里item自动排列的方向。在浏览器里，主轴的方向默认为横向，所以 flex-direction属性的默认值为 row。
justify-content属性用来设置item在主轴上的对齐方式。
align-items属性用来设置item在侧轴上的对齐方式。
默认情况下，一个容器只有一条主轴，所有的item都会沿着这条主轴自动排列下去，但是如果item太多了，一个屏幕长度的主轴根本串儿不下这么多item，那后面的item就会溢出屏幕，而界面还不是 ScrollView，不能滚动，怎么办呢？
flex-wrap属性用来设置换行，即当容器主轴上显示不下那么多的item时，我们可以让item换行来显示，并且一旦设置了换行，那么这个容器就不再是一条主轴了，而是会有多条平行的主轴。
align-content属性用来设置多条主轴的对齐方式，如果项目只有一根轴线，该属性不起作用，即 align-content属性要基于 flex-wrap属性设置了换行才有使用的意义。
用在item上的属性，最常用的有 2个，这些属性都是用来设置item自己的布局。
在第1小节容器的属性，我们已经通过 align-items属性统一设置了容器里item在侧轴上的对齐方式，但如果其中某个item不想遵循这个对齐方式怎么办呢？我们会常见到这种场景，10个里有8个item是一样的对齐方式，就有1、2个item特立独行，那我们就得用item自己的 align-self属性来单独给它们设置对齐方式了。
align-self属性用来设置单个item在侧轴上的对齐方式，注意是给特立独行的单个item设置哦，而且是侧轴，它会覆盖它容器的 align-items属性，当然如果不设置这个属性，默认值就为 auto，即item会默认使用容器的 align-items属性给它设置的对齐方式。
它有6种取值，除了 auto，其他都与 align-items属性完全一致。怎么说呢，item的 align-self属性似乎是用来造反的，反抗它容器的 align-items属性。
flex属性接收一个整数值， flex属性描述起来太麻烦了，可以自行去搜索加深理解，我这里只列举出它的用途及注意事项。
iOS里怎么使用Masonry布局的，RN里就怎么使用 Flex布局+CSS布局来做布局就行了，它们布局的思路是一样的，一个组件也同样至少需要四个约束。
当然，它们之间有一个极其细小的差别，那就是：上面提到的“RN里组件自适应宽高分两步”，而iOS里Masonry才不管你什么撑满不撑满呢。
当然，它们之间有一个极其巨大的差别，那就是：iOS里是没有主轴和侧轴之分的，你可以在一个父视图上横向、竖向同时放控件，并同时完成横向和竖向的布局。但RN里有主轴和侧轴之分，我们添加的组件只会沿着主轴排列，不可能同时出现横向和竖向排列，并且布局的时候也只能是沿着主轴布局，不可能同时完成两个方向的布局。
下面我们就通过几个小练习，来对比一下Masonry布局和Flex布局+CSS布局的思路，加深对RN里怎么布局组件的理解。
二、flex布局,看完这篇都懂了
应用在flex container上的css属性
justify-content:决定了 flex items在主轴(main axis)上的对齐方式
flex-start(默认值):与main start对齐
space-between: flex items之间的距离相等.与main start,mian end两端对齐
space-evenly:flex items之间的距离相等. item与mian start,mian end之间的距离等于flex item之间的距离
space-around: flex items之间的具体相等
align-items决定了flex item在cross axis上的对齐方式
flex-flow是 flex-direction|| flex-warp的缩写
align-content决定了多行flex items在cross axis上的对齐方式,用法和justify-content类似
stretch(默认值):与align-items的stretch类似在cross axis上拉伸
align-self flex items可以通过设置align-self覆盖flex container设置align-items
auto(默认值):遵从flex container的align-items
stretch,flex-start,flex-end,center,baseline效果跟align-items一致
flex-shrink决定了flex items如何收缩
可以设置任意非负数字(正小数,正整数,0),默认值是1
当flex items在main axis方向上超过了flex container的size,flex-shrink属性才会有效
flex items超出flex container的size*收缩比例/所有flex items的收缩比例之和
收缩比例= flex- shrink* flex item的base size
base size就是flex item放入flex container之前的size
flex items收缩后的最终size不能小于 min-width\min-height
flex-grow决定了flex items如何扩展
可以设置任意非负数字(正小数,正整数,0),默认值是0
放flex container在main axis方向上有剩余size时,flex-grow属性才会有效
如果所有flex items的flex-grow综合sum超过1,每个flex item扩展的size为 flex container的剩余size* flex-grow/sum
如果所有flex items的flex-grow综合不超过1,每个flex item扩展的size为
flex container的剩余size* flex-grow
flex items扩展后的最终size不能超过max-width\max-height
举例:flex-direction为row的情况下父容器宽度 400px有三个子容器宽度均为100,
A的宽度= 100*(1/6)+ 100= 116.66
B的宽度= 100*(2/6)+ 100= 133.33
若 flex-grow分别为 0.1,0.2,0.3,则结果为:
flex-shrink决定了 flex items如何收缩
可以设置任意非负数组(正小数,正整数,0),默认值是1
当flex items在main axis方向上超过了flex container的size,flex-shrink属性才会有效
flex items超出flex container的size*收缩比例/所有flex items的收缩比例之和
收缩比例= flex-shrink* flex item的base size
base size就是flex item放入 flex container之前的size
flex item收缩后的最终size不能小于min-width\min-height
举例:总容器宽度 500px一共六个子视图,
宽度分别为110,120,130,140,150,160,
总长度:110+120+130+140+150+160= 810
总共得收缩的长度:810- 500= 310
收缩比例是 flex-shrink* item的主轴方向的size
sum= 110* 1+ 120* 2+ 130* 3+ 140* 4+ 150* 5+ 160* 6
item1的收缩比例是 110* 1需要收缩的具体为 310*(110* 1)/sum
item2的收缩比例是 120* 1需要收缩的具体为 310*(120* 2)/sum
item3的收缩比例是 130* 1需要收缩的具体为 310*(130* 3)/sum
item4的收缩比例是 140* 1需要收缩的具体为 310*(140* 4)/sum
item5的收缩比例是 150* 1需要收缩的具体为 310*(150* 5)/sum
item6的收缩比例是 160* 1需要收缩的具体为 310*(160* 6)/sum
设置flex items在 main axis方向的base size
auto(默认值) content取决于内容本身的size
决定flex-item最终base size的因素优先级从高到低
max-width max-height min-width min-height
flex是flex-grow flex- shrink?|| flex-basis
三、css之dispaly:flex;多行多列
最近老是遇到布局问题，尤其是在垂直居中布局上。之前不了解display：flex;最近看了看书，简单的整理了下，于是就产生了这篇文章
flex弹性布局可以简便，完整，响应式的实现各种页面的布局，而且现在也得到了所有浏览器的支持，实在是布局很便利的工具呢。
1.任何一个元素使用display：flex属性后都可以看做一个flex容器；2.它的子元素变成flex容器中的项目，称为flex item；3.flex容器里面默认存在两根主轴：水平的主轴和垂直的轴
1.flex-direction属性：表示项目的排列方式或者说主轴的方向，有以下四个值
row:默认值，主轴为水平方向，从左向右排列
row-reverse:主轴为水平方向，从右向左排列
column:主轴为垂直方向，从上往下排列
column-reverse:主轴为垂直方向，从下往上排列
2.flex-wrap属性：默认情况，所有的子元素都在一行，此属性主要定义如果不在一行时子元素如何排列，有如下三个值：
wrap-reverse：换行，第一行在下方，第二行在第一行上面依次类推
3.flex-flow：集1.和2.属性于一身，意思就是这个属性可以直接指定上面两个属性的值，默认值为：row nowrap
4.justify-content：定义子元素在主轴上的对齐方式，有以下五个值：
space-around：每个项目两侧间隔相等
5.align-items属性：定义子元素在水平轴和垂直轴的交叉轴上如何对齐，有以下五个值：
baseline：项目的第一行文字基线对齐
6.algin-content属性：定义多根轴线的对齐方式，如果项目只有一根轴线，则该属性不起作用，该属性有以下六个值：
space-between：与交叉轴的两端对齐，轴线间的间隔平均分布
space-around：每根轴线的两侧的间隔都相等
strecth：默认，轴线占满整个交叉轴
1.order属性：定义子元素的排列顺序，数值越小，排列越靠前，默认为0
2.flex-grow属性：定义项目的放大比例，默认值是0，就是如果存在剩余空间，也不放大。
若所有子元素的flex-grow值为1，则子元素等分剩下的空间
若一个元素的属性值为N，剩下值为1，则属性值为N的元素等分的空间是1的N倍
3.flex-shrink属性：定义了项目的缩小比例，默认为1，就是如果空间不足，该项目将缩小
若所有子元素此属性为1，空间不足时，将会被等比缩小，
若有元素属性值为0，即使空间不足，也不会被缩小
4.flex-basis属性：定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto原本的大小，也可以设置px结尾固定大小
5.flex属性：是2.3和4属性的简写，默认值为：0 1 auto，可以只写第一个值，后面两个是可选参数；该属性的两个快捷值：auto（1 1 auto）和none（0 0 auto）
6.align-self属性：此属性允许单个子元素与其他子元素不一样的对齐方
auto：默认值，表示继承父元素的属性，
好了，本文到此结束，如果可以帮助到大家，还望关注本站哦！
