前端布局

TIP

常见布局主要分为四种吧，前两种传统布局

1. float+clear（浮动+清除） display inline-block （行向布局）

2. position relative+absolute（相对、绝对定位）

3. flex一维布局

4. Grid二维布局

主要记录一下后两种布局

flex布局

一、 有六个属性设置在box父容器上，来控制子元素的显示方式；分别是：

• flex-direction 设置主轴对齐方式 默认 row x轴从左到右；
• flex-wrap 子元素换行的方式 默认nowrap ；
• flex-flow flex-direction和flex-wrap的简写 默认row nowrap；
• justify-content 子元素的对齐方式 默认flex-start 左对齐
• align-items
• align-content

1. justify-content 子元素的对齐方式

flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

2. align-items：交叉轴如何对齐，如果flex-direction：row和row-reverse 那么交叉轴就是y轴

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

二、 有五个属性设置在子元素项目上：

• order ：默认（0） 值越小越靠前，
• flex-grow :放大比例(剩余空间的扩充比例,剩余空间占满),默认是0
• flex-shrink:缩小比例，总空间不够进行缩小的比例
• flex-basis：设置子元素的宽高属性
• align-self：属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。