1 弹性布局:
弹性布局:一种布局方式,主要解决某个元素中子元素的布局方式
父元素设置了display:flex,让所有子元素变成弹性布局
弹性布局的相关概念
(1)容器:设置了display:flex的元素,称为容器;容器本身不是弹性布局.
(2)项目:真正发生弹性布局的子元素们称为项目
(3)主轴(4条):项目们排列方向的一条轴
项目们如果哪找横向排列,主轴是x轴.
项目们如果按照纵向排列,主轴是y轴
项目们在主轴上的排列方式,称为主轴的起点和终点.
(4)交叉轴(2条):永远与主轴垂直的轴,项目们在交叉轴上的排列方式称为交叉轴的起点和终点.
语法:将一个元素设置display:flex.它本身就变成了弹性容器,他的儿子们就变成了弹性项目,
display:flex--将块级元素设置为容器
display:inline-flex--将行内元素设置为容器
容器的text-align失效,
项目的float/clear/vertical-align全部生效
容器的样式属性
①主轴的方向:
flex-direction:row/row-reverse(x轴/x轴翻转)
flex-direction:column/column-reverse(y轴/y轴翻转)
②项目的换行
主轴方向放不下所有项目要不要换行
flex-wrap:nowrap(默认)/wrap(正常换行)/wrap-reverse(换行并翻转)
③主轴方向和换行的简写
flex-flow:direction wrap;
④项目们在主轴上的排列方式
justify-content:flex-start(默认,主轴起点对齐)/flex-end(主轴终点对齐)/center(主轴中心对齐)/space-around(每个外边距相同)/space-between(两端对齐,两端无空白)
⑤项目们在交叉轴上的排列方式
align-items:flex-start(默认，交叉轴起点对齐)/flex-end(交叉轴终点对齐)/center（交叉轴中心）/stretch(项目在交叉轴上没有尺寸，充满交叉轴)
项目的样式属性
作用在某一个项目上，不影响其他项目
①设置项目在主轴上的排列顺序
order:无单位数字，值越小，越靠近起点
②flex-grow：
如果容器在株洲方向，有剩余空间，项目会变大，设置数字越大，变大的越快
无单位数字，默认为0
③flex-shrink：如果容器在主轴方向，空间不够时，项目会缩小，设置的数字越大，缩小越快
无单位整数，默认值为1
与flex-wrap：wrap冲突
④单独设置某一个项目的交叉轴对齐方式
align-self:flex-start/flex-end/center/stretch/auto(使用容器定义的align-items的值)