本文目录
- CSS布局 + Flex布局
- grid布局
- 5.flex布局中对容器设置的属性有哪些
- flex:1 表达的含义
- react开发怎么做布局写样式
- flex布局中单个子元素区别于其他子元素的主轴对其方式实现
- 用CSS 实现元素垂直居中，有哪些好的方案
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 。
它有4种取值。
justify-content 属性用来设置item在主轴上的对齐方式。
它有5种取值。
align-items 属性用来设置item在侧轴上的对齐方式。
它有5种取值。
默认情况下，一个容器只有一条主轴，所有的item都会沿着这条主轴自动排列下去，但是如果item太多了，一个屏幕长度的主轴根本串儿不下这么多item，那后面的item就会溢出屏幕，而界面还不是 ScrollView ，不能滚动，怎么办呢？
flex-wrap 属性用来设置换行，即当容器主轴上显示不下那么多的item时，我们可以让item换行来显示，并且一旦设置了换行，那么这个容器就不再是一条主轴了，而是会有多条平行的主轴。
它有3种取值。
align-content 属性用来设置多条主轴的对齐方式， 如果项目只有一根轴线，该属性不起作用， 即 align-content 属性要基于 flex-wrap 属性设置了换行才有使用的意义。
它有6种取值。
用在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 属性描述起来太麻烦了，可以自行去搜索加深理解，我这里只列举出它的用途及注意事项。
（1） flex 属性有三个用途
（2）使用 flex 属性需注意
iOS里怎么使用Masonry布局的，RN里就怎么使用 Flex布局+CSS布局 来做布局就行了，它们布局的思路是一样的， 一个组件也同样至少需要四个约束。
当然，它们之间有一个极其细小的差别，那就是：上面提到的“RN里组件自适应宽高分两步”，而iOS里Masonry才不管你什么撑满不撑满呢。
当然，它们之间有一个极其巨大的差别，那就是：iOS里是没有主轴和侧轴之分的，你可以在一个父视图上横向、竖向同时放控件，并同时完成横向和竖向的布局。但RN里有主轴和侧轴之分，我们添加的组件只会沿着主轴排列，不可能同时出现横向和竖向排列，并且布局的时候也只能是沿着主轴布局，不可能同时完成两个方向的布局。
下面我们就通过几个小练习，来对比一下Masonry布局和Flex布局+CSS布局的思路，加深对RN里怎么布局组件的理解。
Masonry：
Flex布局+CSS布局：
Masonry：
Flex布局+CSS布局：
Masonry：
Flex布局+CSS布局：
Masonry：
Flex布局+CSS布局：
参考博客：
阮一峰的《Flex布局：语法篇》 阮一峰的《Flex布局：实例篇》
grid布局
grid布局，阮一峰写的非常详细。***隐藏网址*** 我就不献丑了。 我就大致总结一下 缺点：相对于display：flex兼容性不好，不兼容于ie内核；这个制约了它的使用；不过它的思想非常好，如果改进了兼容性这个问题。完全可以替代flex布局
display: grid 指定一个容器采用网格布局。
grid是设置容器的每列/每行的宽度/高度，划分成网格，排列item grid-template-columns ：设置每列宽度 grid-template-rows ：设置每行高度 单位：绝对单位，也可以使用百分比。可以自适应
grid-auto-flow ：row（默认，先行后列）column（先列后行）
justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。
justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。
grid-column-start 属性， grid-column-end 属性， grid-row-start 属性， grid-row-end 属性
.item { justify-self: start | end | center | stretch; align-self: start | end | center | stretch; }
5.flex布局中对容器设置的属性有哪些
Flex布局中对容器一共有6个属性，作用如下：
flex-direction 主轴方向
flex-wrap 轴线排不下，如何换行
flex-flow 是flex-direction属性和flex-wrap属性的简写形式
justify-content 项目在主轴上的对齐方式
align-items 项目在交叉轴上的对齐方式
align-content 定义多根轴线的对齐方式
搜一下“Flex 布局教程：语法篇”可以找到阮一峰的一个博客，讲得挺详细。
flex:1 表达的含义
flex 布局，我相信大家都非常熟悉, 但是要说到 flex:1 表达的含义，我相信很多同学说不出来。
很多同学入门flex 的时候，应该都是看了 阮一峰的flex 科普文章
想要梳理清晰flex:1的含义，我们先学习下flex 这个css属性表达了哪些含义
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 从这里就可以推导出
相当于
我一开始理解的也是这样。 后面的分析会推翻我这里的结论
flex-basis 也是一个比较难理解的点，我写了 深入理解flex-basis 来梳理这个知识点，不懂得可以查看。这里我们重点解析flex:1。 我写了一个简单的demo 来提供分析：
我们看下浏览器输出的效果：
可以看到，无论内容是多少，我们都实现等分。
我们看下控制台：
发现：
其实相当于：
看另一个例子：
浏览器显示效果：
依然是等分
再来一个类似的例子：
浏览器显示效果：
依然是等分
从以上的分析调试，我们可以初步分析
接下来，看下 flex: 1 1 auto 的效果
浏览器显示效果：
没有等分
写到这里，我们在细细品味下flex-basic的含义
auto 表示项目本身的大小, 如果设置为 auto, 那么这三个盒子就会按照剩余的空间，等比例缩放
如果随便设置一个其他带有长度单位的数字呢, 例如
又因为 c1.width = c2.width = c3.width，所以最终的效果就是 c1, c2, c3 进行了等分缩放。
react开发怎么做布局写样式
、rn的布局 rn的布局是完全是用flex来实现。使用flex来进行布局是多么让人爽心悦目的一件事，按照设计图来实现一个页面是很容易的事情，写过pc端布局转向写rn的布局的童鞋，这种感觉更有强烈（个人YY的哈）；用flex解决pc端的垂直居中的问题真是小菜一碟啊；flex的用法就不多说了，具体可参考阮一峰老师的这篇文章《flex布局：语法篇》，里面对flex的讲解非常详细；需要注意的是：rn中的flex的相关属性不是完全依照w3c规范提供的各种值，对其中的某些属性值进行了阉割，下面就借用《React-Native样式指南》中内容说明一下：
flex布局中单个子元素区别于其他子元素的主轴对其方式实现
在flex布局中，我们使用父级元素的 display 和 justify-content 来实现flex布局，并设定主轴对其方式，这两个属性详见 flex布局-阮一峰 这时设置了 justify-content 以后，所有的子元素都沿着主轴起始位置对齐，如果某一个子元素需要沿其他方向，比如主轴是横轴，方向是从左向右，这样设置以后，所有子元素都在左边向右边排列，如果我某一个子元素需要放在最右边，而不是和其他子元素一样顺着排列，应该如何实现？ 对于交叉轴的方向，有 align-center 属性设置，而子元素的 align-self 属性可以覆盖这个属性，设置属于子元素自身的交叉在对齐方向。但主轴的对其方向则没有这个属性。 我可以通过设置需要区别于其他方向的子元素的前一个兄弟元素的margin来实现这个需求。 比如
用CSS 实现元素垂直居中，有哪些好的方案
1. 使用绝对定位和负外边距对块级元素进行垂直居中html代码：《div id="box"》《div id="child"》我是测试DIV《/div》《/div》css代码：#box {width: 300px;height: 300px;background: #ddd;position: relative;}#child {width: 150px;height: 100px;background: orange;position: absolute;top: 50%;margin: -50px 0 0 0;line-height: 100px;}运行结果如下：这个方法兼容性不错，但是有一个小缺点：必须提前知道被居中块级元素的尺寸，否则无法准确实现垂直居中。2. 使用绝对定位和transformhtml代码：《div id="child"》我是一串很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本《/div》css代码：#box {width: 300px;height: 300px;background: #ddd;position: relative;}#child {background: #93BC49;position: absolute;top: 50%;transform: translate(0, -50%);}运行结果如下：这种方法有一个非常明显的好处就是不必提前知道被居中元素的尺寸了，因为transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。3. 另外一种使用绝对定位和负外边距进行垂直居中的方式html代码：《div id="box"》《div id="child"》我也是个测试DIV《/div》《/div》css代码：#box { width: 300px; height: 300px; background: #ddd; position: relative;}#child {width: 50%; height: 30%; background: pink; position: absolute; top: 50%; margin: -15% 0 0 0;}运行结果如下：这种方式的原理实质上和前两种相同。补充的一点是：margin的取值也可以是百分比，这时这个值规定了该元素基于父元素尺寸的百分比，可以根据实际的使用场景来决定是用具体的数值还是用百分比。4. 绝对定位结合margin: autohtml代码：《div id="box"》《div id="child"》呆呆今天退役了(。﹏。)《/div》《/div》css代码：#box {width: 300px;height: 300px;background: #ddd;position: relative;}#child {width: 200px;height: 100px;background: #A1CCFE;position: absolute;top: 0;bottom: 0;margin: auto;line-height: 100px;}运行结果如下：这种实现方式的两个核心是：把要垂直居中的元素相对于父元素绝对定位，top和bottom设为相等的值，我这里设成了0，当然你也可以设为99999px或者-99999px无论什么，只要两者相等就行，这一步做完之后再将要居中元素的margin设为auto，这样便可以实现垂直居中了。被居中元素的宽高也可以不设置，但不设置的话就必须是图片这种自身就包含尺寸的元素，否则无法实现。5. 使用padding实现子元素的垂直居中html代码：《div id="box"》《div id="child"》今天西安的霾严重的吓人，刚看了一眼PM2.5是422《/div》《/div》css代码：#box {width: 300px;background: #ddd;padding: 100px 0;}#child {width: 200px;height: 100px;background: #F7A750;line-height: 50px;}运行结果如下：这种实现方式非常简单，就是给父元素设置相等的上下内边距，则子元素自然是垂直居中的，当然这时候父元素是不能设置高度的，要让它自动被填充起来，除非设置了一个正好等于上内边距+子元素高度+下内边距的值，否则无法精确的垂直居中。这种方式看似没有什么技术含量，但其实在某些场景下也是非常好用的。6. 设置第三方基准html代码：《div id="box"》《div id="base"》《/div》《div id="child"》今天写了第一篇博客，希望可以坚持写下去！《/div》《/div》css代码：#box {width: 300px;height: 300px;background: #ddd;}#base {height: 50%;background: #AF9BD3;}#child {height: 100px;background: rgba(131, 224, 245, 0.6);line-height: 50px;margin-top: -50px;}运行结果如下：这种方式也非常简单，首先设置一个高度等于父元素高度一半的第三方基准元素，那么此时该基准元素的底边线自然就是父元素纵向上的中分线，做完这些之后再给要垂直居中的元素设置一个margin-top，值的大小是它自身高度的一半取负，则实现垂直居中。7. 使用flex布局html代码：《div id="box"》雾霾天气，太久没有打球了《/div》css代码：#box {width: 300px;height: 300px;background: #ddd;display: flex;align-items: center;}运行结果如下：这种方式同样适用于块级元素：html代码：《div id="box"》《div id="child"》程序员怎么才能保护好眼睛？《/div》《/div》css代码：#box {width: 300px;height: 300px;background: #ddd;display: flex;align-items: center;}#child {width: 300px;height: 100px;background: #8194AA;line-height: 100px;}运行结果如下：***隐藏网址***flex也就是flexible，意为灵活的、柔韧的、易弯曲的。元素可以通过设置display:flex;将其指定为flex布局的容器，指定好了容器之后再为其添加align-items属性，该属性定义项目在交叉轴（这里是纵向轴）上的对齐方式，可能的取值有五个，分别如下：flex-start:：交叉轴的起点对齐；flex-end：交叉轴的终点对齐；center：交叉轴的中点对齐；baseline：项目第一行文字的基线对齐；stretch（该值是默认值）：如果项目没有设置高度或者设为了auto，那么将占满整个容器的高度。8. 第二种使用弹性布局的方式html代码：《div id="box"》《div id="child"》答案当然是多用绿色的背景哈哈《/div》《/div》css代码：#box {width: 300px;height: 300px;background: #ddd;display: flex;flex-direction: column;justify-content: center;}#child {width: 300px;height: 100px;background: #08BC67;line-height: 100px;}运行结果如下：这种方式也是首先给父元素设置display:flex，设置好之后改变主轴的方向flex-direction: column，该属性可能的取值有四个，分别如下：row（该值为默认值）：主轴为水平方向，起点在左端；row-reverse：主轴为水平方向，起点在右端；column：主轴为垂直方向，起点在上沿；column-reverse：主轴为垂直方向，起点在下沿。justify-content属性定义了项目在主轴上的对齐方式，可能的取值有五个，分别如下（不过具体的对齐方式与主轴的方向有关，以下的值都是假设主轴为从左到右的）：flex-start（该值是默认值）：左对齐；flex-end：右对齐；center：居中对齐；space-between：两端对齐，各个项目之间的间隔均相等；space-around：各个项目两侧的间隔相等。9. 还有一种在前面已经见到过很多次的方式就是使用 line-height 对单行文本进行垂直居中html代码：《div id="box"》我是一段测试文本《/div》css代码：#box{width: 300px;height: 300px;background: #ddd;line-height: 300px;}运行结果如下：这里有一个小坑需要大家注意：line-height(行高) 的值不能设为100%，我们来看看官方文档中给出的关于line-height取值为百分比时候的描述：基于当前字体尺寸的百分比行间距。所以大家就明白了，这里的百分比并不是相对于父元素尺寸而言，而是相对于字体尺寸来讲的。10. 使用 line-height 和 vertical-align 对图片进行垂直居中html代码：《div id="box"》《img src="duncan.jpeg"》《/div》css代码：#box{width: 300px;height: 300px;background: #ddd;line-height: 300px;}#box img {vertical-align: middle;}运行结果如下：vertical-align并不像看起来那样天真无邪童叟无欺，以后会单独拎出来专门写一篇。11. 使用 display 和 vertical-align 对容器里的文字进行垂直居中html代码：《div id="box"》《div id="child"》我也是一段测试文本《/div》《/div》css代码：#box {width: 300px;height: 300px;background: #ddd;display: table;}#child {display: table-cell;vertical-align: middle;}运行结果如下：这里关于vertical-align啰嗦两句：vertical-align属性只对拥有valign特性的html元素起作用，例如表格元素中的《td》《th》等等，而像《div》《span》这样的元素是不行的。valign属性规定单元格中内容的垂直排列方式，语法：《td valign="value"》，value的可能取值有四种：top：对内容进行上对齐middle：对内容进行居中对齐bottom：对内容进行下对齐baseline：基线对齐关于baseline值：基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。希望我的回答可以帮到您哦
