flex布局

flex布局

详解flex布局的各种参数~

flexible:能够伸缩或者容易变化,以适应外界条件的变化
box:通用的矩形容器
flex:是flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

flex布局是基于flex-flow流布局的,容器默认存在两根轴,水平的为主轴,垂直的为侧轴,主轴开始位置和边框交叉点叫做main start,结束位置叫做main end,侧轴开始位置和边框的交叉点叫做cross start,结束位置叫做cross end,项目默认主轴排列,主轴占据的空间叫做main size,侧轴占据的空间叫做cross size.

1.flex-direction属性

flex-direction属性决定主轴的方向(项目的排列方向)

flex-direction:row;
row为默认值:主轴为水平方向,起点在左端

flex-direction:row-reverse;
row-reverse:主轴为水平方向,起点在右端

flex-direction:column;
column:主轴为垂直方向,起点在上沿

flex-direction:column-reverse;
column-reverse:主轴为垂直方向,起点在下沿

2.flex-wrap属性

默认情况下,项目都排在一根轴线上,可以用flex-wrap来定义怎么排列

flex-wrap:nowrap;
nowrap为默认值:不换行

flex-wrap:wrap;
wrap:换行,第一行在上方

flex-wrap:wrap-reverse;
wrap-reverse:换行，第一行在下方

3.flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写,默认是row nowrap;

flex-flow:flex-direction flex-wrap;

4.justify-content属性

justify-content属性定义了项目在主轴上的对齐方式

justify-content:flex-start;
flex-start为默认值:左对齐

justify-content:flex-end;
flex-end:右对齐

justify-content:center;
center:居中

justify-content:space-between;
space-between:两端对齐,项目之间的间隔相等

justify-content:space-around;
space-around:每个项目两侧间隔相等

5.align-items属性

align-items属性定义项目在侧轴上如何对齐

align-items:flex-start;
flex-start:侧轴开始位置对齐

align-items:flex-end;
flex-end:侧轴结束位置对齐

align-items:center;
center:侧轴中点位置对齐

align-items:baseline;
baseline:项目第一行文字的基线对齐

align-items:stretch;
strech为默认值:如果项目没有设置高度或者设置为auto,将占满整个容器的高度

6.align-content属性

align-content属性定义了多根轴线的对齐方式,如果项目只有一根轴线,
该属性不起作用

align-content:flex-start;
flex-start:和侧轴的起点对齐

align-content:flex-end;
flex-end:和侧轴的终点对齐

align-content:center;
center:和侧轴的中点对齐

align-content:space-between;
space-between:和侧轴的两端对齐

align-content:space-around;
space-around:每根轴线两侧的间隔都相等

align-content:strech;
strech为默认值:轴线占满整个侧轴

—end—
have a good trip!