Flex布局_flex布局元素同高
赞
踩
前端
什么是flex布局
Flex是Flexible Box的缩写 flex布局表示弹性布局，可以为盒状模型提供最大的灵活性。
适用范围：任何一个元素都可以指定为flex布局。
行内元素也可以适用flex布局。
Webkit内核的浏览器，必须加上-webkit前缀。
flex布局一些基本概念
容器和项目
什么叫容器
采用flex布局的元素被称为容器。
什么叫项目
在flex布局中的子元素被称作项目。
即父级元素采用flex布局，则父级元素为容器，全部子元素自动成为项目
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
容器的一些属性：有六个常用属性设置在一些容器上
- flex-direction 设置容器主轴的方向
- flex-wrap
- flew-flow
- justify-content
- align-items
- align-content
flex-wrap属性用于设置当项目在容器中一行无法显示的时候如何处理。
.wrap{
flex-wrap:nowrap | wrap | wrap-reverse;
}
flex-flow属性
justify-content 属性
用于设置项目在容器中的对齐方式。
该属性主要有五个属性值
align-items 属性
定义了项目在交叉轴上是如何对齐显示的。
- flex-start:交叉轴的起点对齐
- flex-end 交叉轴的终点对齐
- center 交叉轴居中对齐
- baseline 项目的第一行文字的基线对齐
- stretch：默认值：如果项目未设置高度或者高度为auto，将占满整个容器的高度
align-content属性
定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
flex-grow 属性
flex-group属性用来控制当前项目是否放大显示。默认值为0，表示即使容器有剩余空间也不放大显示。如果设置为1，则平均分摊后放大显示。
align-self 属性
会自己斟酌，理解容器的概念，把容器都好好的研究一遍，全部都将其搞透彻。研究透彻！
根据不同轴进行布局，布局出来的效果也不一样。
会自己操作然后，真正做到理解flex布局
小程序中的flex布局：
Flex布局的特点:
- 任意方向的伸缩，向左，向右，向下，向上
- 在样式层可以调换和重排顺序
- 主轴和侧轴方便配置
- 子元素的空间拉伸和填充
- 沿着容器对齐
display:block 是 指定为块内容器模式，总是使用新行开始显示，微信小程序的视图容器(view,scroll-view和swiper)默认都是 display:block。
display:flex 是指定为行内容器模式，在一行内显示子元素，可以使用 flex-warp 属性指定其是否换行，flex-warp 有三个值:nowrap(不换行),wrap(换行),wrap-reverse(换行第一行在下面)。
伸缩容器属性
伸缩容器有六个可以设置的属性，分别是：
flex-direction：定义了伸缩容器中flex item的排列方向
flex-wrap：定义了主轴方向排列的item是否换行
flex-flow：前两个属性的简写。
justify-content：主轴方向的对齐方式
align-items：侧轴方向的对齐方式
align-content：多根轴线的对齐方式
对齐方式 justify-content & align-items
- justify-conent 定义子元素在主轴上面的对齐方式
- align-items 定义子元素在侧轴上对齐的方式
justify-content 有5个可选的对齐方式:
flex-start 主轴起点对齐(默认值)
flex-end 主轴结束点对齐
center 在主轴中居中对齐
space-between 两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等
space-around 每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同。
align-items 表示侧轴上的对齐方式:
- stretch 填充整个容器(默认值)
- flex-start 侧轴的起点对齐
- flex-end 侧轴的终点对齐
- center 在侧轴中居中对齐
- baseline 以子元素的第一行文字对齐
总结
大致理解了，会自己根据写法，将其运用到小程序上，将flex布局给其搞透彻，完全理解透彻都行啦的样子与打算。
