关于手机上的flex布局
Flex是Flexible Box的缩写，意思是“灵活的布局”，用于为箱式模型提供最大的灵活性。
任何容器都可以被指定为Flex布局。
要使用flex布局，首先设置父容器display: flex，然后设置justify-content:center以实现水平居中，最后设置align-items: center以实现垂直居中。
例如:
运行结果:
什么是对齐内容和对齐项目？从哪里可以看到横向和纵向的语义？是的，flex真的没那么简单，所以我们要从两个基本概念开始。
不难说，flex的核心概念是容器和轴。包括外部容器的父容器和内部容器的子容器，轴包括主轴和横轴。可以说flex布局的所有特性都是建立在这两个概念之上的。flex的布局涉及12个CSS属性(不包括display: flex)，包括6个父容器和6个子容器。但是，只有四个常用的属性，两个父容器和两个子容器。先说常用的。
首先，先说轴。理解了轴之后，我们就可以更好地理解下面例子中的属性了。
如图所示，轴& # 160；包括& # 160；纺锤& # 160；还有& # 160；横轴，我们知道& # 160；调整-内容& # 160；确定属性子容器沿主轴的排列，align-items & # 160；确定属性的子容器如何沿横轴排列。那么轴本身是怎么确定的呢？在柔性布局中，柔性方向& # 160；属性决定主轴方向，横轴方向由主轴决定。
2.1主轴
主轴的开始由flex-start表示，结束段由flex-end表示。对应于不同主轴方向的起始段和结束段的位置也不同。
右:伸缩方向:行
向左:弯曲方向:行反向
向下:伸缩方向:列
向上:弯曲方向:列反向
共轴
逆时针旋转主轴90°得到十字轴，十字轴的起点和终点也用flex-start和flex-end表示。
上述属性是flex布局最常用的部分，通常可以满足大多数要求。如果要实现复杂布局，就需要知道更多的属性。
容器有以下特点:父容器可以统一设置子容器的排列，子容器也可以单独设置自己的排列。如果两者同时设置，则以子容器的排列为准。
设置子容器沿主轴的排列:justify-content
justify-content属性用于定义如何沿着主轴排列子容器。
柔性起点:起点对齐，示例:
柔性端:端对端对齐，示例:
中心对齐:
Space-around:子容器沿主轴均匀分布，首尾子容器与父容器的距离为子容器间距离的一半。
Space-between:子容器沿主轴均匀分布，位于起点和终点的子容器与父容器相切。
设置子容器如何沿横轴排列:对齐-项目
align-items属性用于定义如何沿横轴方向分布子容器的间距。
弹性起点:起点对齐
柔性端:端到端对齐
中心:中心对齐
基线:基线对齐。默认情况下，这里的基线指的是文本的第一行，即第一条基线。所有子容器都与基线对齐，横轴起点到元素基线距离最大的子容器将与横轴起点相切以确定基线。在这个例子中，我的蓝线表示基线。
拉伸:子容器沿横轴方向的尺寸被拉伸以与父容器一致。(不为元素设置固定高度)
如何在主轴上伸缩:flex
子容器是弹性的(flex表示弹性)，它们会自动填充剩余的空空间。子容器的膨胀率由flex属性决定。
flex的值可以是不带单位的数字(如1、2、3)、带单位的数字(如15px、30px、60px)或none关键字。子容器会根据flex定义的大小比例自动伸缩，如果值为none，则不会伸缩。
虽然flex是多个属性的缩写，允许1-3个值一起使用，但通常只有一个值可以满足需求。其完整写法请参考下图。
设定单个子容器如何沿横轴排列:自对齐。
每个子容器也可以独立定义沿横轴的排列。该属性的可选值与父容器的值相同& # 160；对齐-项目& # 160；属性完全相同，如果两者同时设置，则& # 160；将使用子容器的。align-self & # 160；属性为准。
弹性起点:起点对齐
柔性端:端到端对齐
中心:中心对齐
当然，如果baseline和stretch分别设置子容器，就不会受到父容器的影响，这里就不举例了。
目前已经被所有浏览器支持，也就是说现在使用这个功能是安全的。
css两个p左右怎么对齐？
1、使用p标签创建一个模块，在p内，再使用p标签创建两个模块，并分别设置p标签的class属性和id属性。。
2、在css标签内，通过class或id分别定义p的宽度和高度、背景颜色。
3、在css标签内，再设置最外层p为flex布局，并通过align-items属性设置p内两个p垂直方向居中对齐，通过justify-content属性设置p内两个p水平方向两端对齐。
用代码写html语言，怎么让字体居中？
下面介绍关于html元素水平居中的几种方式1、对于行内元素采用text-align:center;的方式3、用table实现4、块级的元素但是通过转换成行内元素来实现块级元素的水平居中显示5、父子元素都采用相对定位，父元素left:50%;子元素left:-50%;相对自己的长度减回50%，这样实现向右偏移后拉回多的部分6、采用css3的flexbox，display:flex;7、用父元素的 display:relative;直接采用position:absolute;left:0;right:0;margin:auto来实现水平以居中下面是讲解的具体的代码：
火狐浏览器，使用flex布局后，项目的上下内边距是基于父元素高度而非宽度？
父元素高度设置为空或者auto即可，如height:auto或者不要height;，举例如下:1.高度采用auto;这里是子集内容,子集内容采用的是宽度780px,高度1000px,并且居中对齐；这是父级内容，宽度为800px,高度自适应2.高度不设置；如：这里是子集内容,子集内容采用的是宽度780px,高度1000px,并且居中对齐；这是父级内容，宽度为800px
元素垂直居中解决方法？
方法一：使用flex布局
方法二：使用transform将元素进行移动，必要时可将margin设为负值（需要知道元素的尺寸）
方法三：通过改变父元素和子元素的position属性实现居中效果
方法四：子元素设置display: inline-block，父元素设置text-align: center且line-height等于height
