本篇文章给大家谈谈css布局flex，以及css布局经典实例对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。
一、CSS flex布局
1、 flex布局是一种无论对于块级元素还是行内元素都可以被采用的布局，且它使用起来也是十分的方便
2、当我们指定flex布局方式的时候，其属性值 float、clear、vertical-align就失效了
3、无论是块级元素还是行内元素，当他们指定使用flex布局的时候，就被称为“容器”（flex container）
4、他们的子元素自动成为容器成员，被称为“项目”（flex item）。
5、 flex布局是通过两根轴决定的，其实现方式其实和直角坐标系很像，都是通过轴来进行定位
6、每个容器都有两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴开始位置为main start，结束位置为main end。交叉轴的开始位置为cross start，结束位置为cross end
7、容器内的项目都是沿着主轴排列的，这点和块级元素有较大的不同，因为每个块级元素默认是占有一整行的，且排列方式为由上到下排列。
8、每个项目都占有一定的主轴空间和交叉轴空间，分别被称为main size和cross size
9、 flex布局下，容器和项目都有其各自的属性
10、决定主轴的方向，即决定项目的排列方向，其属性值有
11、决定了当一行放不下所有的项目时，其换行与否以及换行方式
12、定义了项目在主轴上的对齐方式，假设主轴是从左向右的水平排列
13、定义了项目在交叉轴上的对齐方式，假设交叉轴是从上到下排列
14、在这里重点说一下上面这两个属性。
15、这样可以很方便的设置水平垂直居中
16、另外说一下align-items：baseline这个属性值。如描述，这个属性值是通过文字来进行对齐，而不是每个项目的边界或是中心
17、在容器内具有多根主轴线时，可以定义这些轴线的对齐方式
18、 align-content属性和justify-content属性，这两者的属性值有较大的相似之处，这是因为，justify-content属性定义的是多个项目在主轴上的对齐方式，而align-content属性定义的是多根主轴在交叉轴上的对齐方式，这两者描述的对象就几乎一致
19、定义了多个项目的排列顺序，其使用方式和z-index属性值有异曲同工之处，都是指定属性值，属性值为整数。对于order属性，属性值越小，则排列越靠前；对于z-index属性，则属性值越小，就越在底层
20、设置了项目的放大比例，其默认值为1。
21、设置了项目的缩小比例，默认值为1。
22、在分配多余空间之前，为项目定义其占据的主轴空间
23、用来设置单个项目与其他项目不同的对齐方式，其属性值和align-items的属性的属性值基本一致，不过其默认值为auto，表示继承父元素的属性值。
二、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布局优缺点
传统布局，屏幕宽高变化时，盒子使用横向或者竖向的滚动条来查看被遮挡部分，也就是不管浏览器窗口的大小怎么变化就按html语义标签排列的布局来布置。
css3引入的，flex布局；优点在于其容易上手，根据flex规则很容易达到某个布局效果，然而缺点是：浏览器兼容性比较差，只能兼容到ie9及以上；
分别为不同的屏幕分辨率定义布局，在每个布局中，页面元素不随窗口大小的调整而发生变化，当窗口大小到达一定分辨率时变化一次。
页面元素的宽度按照屏幕进行适配调整，元素的位置不变，大小变化，屏幕太大或者太小导致元素不能正常显示。
<meta name="viewport" content="divice-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
使用meta标签设置，页面元素宽度随窗口调整自动适配。主要属性及其含义如下：name="viewport"： 名称=视图；width=device-width页面宽度=设备宽度(可以理解为获取你手机的屏幕宽度)；initial-scale - 初始的缩放比例 ；minimum-scale - 允许用户缩放到的最小比例 ；maximum-scale - 允许用户缩放到的最大比例 ；user-scalable - 用户是否可以手动缩放 。
二维布局系统，随意的定义每行每列的数目和大小。也非常简单方便，兼容性较差。
好了，文章到这里就结束啦，如果本次分享的css布局flex和css布局经典实例问题对您有所帮助，还望关注下本站哦！
