flex布局常用代码

曹え 5811 发布于:2023-03-17 05:44:26


常用属性


flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content



flex-direction:设置主轴的方向。

它可能有4个值:

row: (默认值)主轴为水平方向,起点在左端,从左至右排列;

row-reverse:主轴为水平方向,起点在右端,从右至左排列;

column:主轴为垂直方向,起点在上沿,从上至下排列;

column-reverse:主轴为垂直方向,起点在下沿,从下至上排列。


flex-wrap: 控制项目(子元素)是否换行。
它可能取3个值:

  • nowrap:(默认值)不换行;

  • wrap:换行,第一行在上方;

  • wrap-reverse:换行,第一行在下方。


justify-content:设置主轴上的子元素对齐方式。

它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右:

flex-start:(默认值),左对齐(沿着主轴开始位置至末尾位置对齐);

flex-end:右对齐(沿着主轴末尾位置至开始位置对齐);

center:居中对齐;

space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍;

space-between: 两端对齐,项目之间的间隔都相等。


align-items:定义项目在交叉轴上如何对齐。

注意:align-items适用于项目在一行中,不适用于换行。

它可能取5个值,具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下:

flex-start:交叉轴的起点对齐;

flex-end:交叉轴的终点对齐;

center:交叉轴的中点对齐(可以理解为垂直居中);

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

stretch:(默认值),如果项目未设置高度或设为auto,将占满整个容器的高度。


觉得有用请点个赞吧!
0 253