html中的弹性布局

1.什么是弹性布局

弹性布局是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间

2.flex模型

 flex模型有两个轴

主轴，所谓主轴就是沿着flex元素放置的方向进行延申的轴 主轴开始的地方叫做 main  start主轴结束的地方叫做main end

交叉轴，所谓交叉轴就是与主轴垂直的轴，他开始的地方叫做cross start，结束的地方叫做cross end

弹性布局的具体表现在于，父元素中有flex属性，有这个属性的元素，我们称之为flex容器，父元素里面的子元素，我们称之为flex项，也叫flex item

display: flex

3.常用属性

flex-direction

用来指定主轴分方向，其默认值为row,常用属性值有colum,row-reverse和column-reverse

flex-direction: row;

flex-direction: column;

flex-direction: row-reserve;

flex-direction: column-reserve;

flex-wrap

常用属性值有nowrap wrap wrap-reverse 用来指定flex项的环绕效果也就是排序顺序

flex-wrap:wrap;

flex-wrap:nowrap;

flex-wrap:wrap-reserve;

justify-content

属性值有flex-start 默认值左对齐 flex-end 右对齐 center居中 space-between 两端对齐，项目之间间隔相等 space-between项目两侧间距相等，项目之间间距比两侧间距大一倍

justify-content:flex-start;

justify-content:flex-end;

justify-content:center;

justify-content:space-between;

justify-content:space-around;

align-items

交叉轴对齐方式 flex-start交叉轴的起点对齐 flex-end交叉轴的终点对齐 center交叉轴的中点对齐 baseline项目的第一行文字的基线对齐 项目的第一行文字的基线对齐 stretch如果项目未设置高度或设为auto，将占满整个容器的高度

align-items:flex-start;

align-items:flex-end;

align-items:center;

align-items:baseline;

align-items:stretch;

align-content

flex-start flex-end center和上面一样space-between与交叉轴两端对齐，轴线之间的间隔平均分布 space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍stretch 默认值，轴线占满整个交叉轴