两栏布局

#两栏布局 1、浮动（定宽）+常规(流式布局) 常规流是设置为流式布局（实现动态页面） 例： 宽度设置为百分比 width:80% 注：要给一个最小宽度（一般会设置在body身上）， 以便由于页面太小，导致内容布局错乱。 为了考虑搜索引擎，因此浮动元素要写在HTML后面。 把主要是内容放的越靠前。让搜索引擎先抓取到主要内容。 2、定位+常规 当标签设置为绝对位置后,会向外一层一层找，找到包含我，并且position不等于static的元素。 起点就是这个元素的填充盒（content+padding）的左上角。 # 弹性盒子 -主轴的显示方式 - row按行显示（从左到右） - row-reverse按行倒序显示 - column从上到下按列显示 - column-reverse按列倒序显示 - flex-direction: row-reverse; - flex-direction: column; - flex-direction: column-reverse; - 设置项目是否换行，需要考虑两种情况 1.主轴进行换行，前是项目宽的总和大于容器的宽。 2.交叉轴进行换行，前是项目高的总和大于容器的高。 - flex-start:左对齐（默认值）,flex-end:右对齐,center:居中 # 剩余空间：容器尺寸减去项目的尺寸得到的值。 -space-between:两端对齐，剩余空间分配给每个项目的间距（除第1个和最后1个） -space-around:分散对齐，剩余空间除以项目的个数，再除以2，分配给每个项目左右的间距。 -justify-content: center; justify-content: flex-start; justify-content: flex-end; justify-content: space-between;(两端对齐) justify-content: space-around;(分散对齐) 项目样式： align-self:某一个或多个项目交叉轴的对齐方式。 order:设置项目在页面中的排序 flex-grow:设置项目放大比例 前提是所有项目的尺寸小于容器的尺寸。 放大比例：剩余空间除以flex-grow的合，再按比例分给相应的项目。 flex-shrink:设置项目缩小比例 缩小比例：当所有项目的尺寸大于容器的尺寸时，设置了flex-shrink会优先进行缩小。 并且，会按照缩小比例对应到相应的项目。