Flex布局介绍(推荐使用在小程序 好用)
2.1什么是flex布局?
1)Flex是Flexible Box的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性。
2)任何一个容器都可以指定为flex布局
2.2Flex属性
1)flex-direction://设置项目主格的方向
row:(默认值):主轴为水平方向,起点在左端
row-reverse:主轴为水平方向,起点在右端
column:主轴为垂直方向,起点为上沿
column-reverse:主轴为垂直方向,起点在下沿
学习地址:http://www.runoob.com/w3cnote/flex-grammar.html
2.3基本概念:采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size
2.4容器的属性:
以下六个属性设置在容器上
flex-direction
flex-wrap:
默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行,可能取三个值
(1)nowrap(默认):不换行。
(2)wrap:换行,第一行在上方
(3)wrap-reverse:换行,第一行在下方。
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
justify-content(横向)
justify-content属性定义了项目在主轴上的对齐方式
a. flex-start:左对齐
b. flex-end:右对齐
c. center:居中
d. space-between:两端对齐,项目之间的间隔都相等
e. space-around:每个项目两侧的间隔相等
align-items(纵向)
align-items属性定义项目在交叉轴上如何对齐。
具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下
a. flex-start:交叉轴的起点对齐
b. flex-end:交叉轴终点对齐
c. center:交叉轴的终点对齐
d. baseline:项目的第一行文字的基线对齐
e. stretch(默认值):如果项目未设置高度或者设为auto,将填满整个容器的高度
align-content
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴