弹性布局
display:flex; justify-content:space-between; — 水平分布【item之间有相同的边距,和容器之间没边距】 justify-content: space-around; — item和item之间以及和容器之间都有边距 align-items: center; — 垂直居中分布 align-items:stretch; — 如果item没有设置高度,将item在交叉轴上进行拉伸 flex-direction: column; — 列 flex-direction:row; — 行 flex-direction: column-reverse;— 垂直方向反向 flex-direction: row-reverse;— 水平方向反向 flex-wrap: wrap-reverse; —反向换行 flex-wrap: wrap; —换行 flex-wrap: nowrap; —不换行 order: 1; — 调整顺序
要想使用弹性布局
必须给容器设置display:flex; 容器设置dispaly:flex;之后,item的浮动和display效果就失去作用了【子元素不需要在设置浮动】 默认情况下,内容item会全部分布在主轴方向的一行上,如果放置不下内容item会自动缩小 flex-direction 设置当前主轴的方向 row(行) row-reverse(水平方向的反向) column(列) column-reverse(垂直方向的反向) flex-wrap 设置当前item换行的方式 nowrap wrap wrap-reverse flex-flow flex-direction和flex-wrap 的集合写法 justify-content item在主轴上的对齐方式 flex-start(起点)flex-end(终点)center(整体居中)space-between(水平分布【item之间有相同的边距,和容器之间没边距】)space-around(item和item之间以及和容器之间都有边距) align-items 调整的是一条轴线上的元素在交叉轴上的对齐方式 flex-start(交叉轴的起点)flex-end(交叉轴的终点)center(交叉轴上居中)如果item没有设置高度,stretch将item在交叉轴上进行拉伸 align-content 设置多条轴线在交叉轴上的分布方式 order 给每个item一个编号,用来调整顺序 flex-grow 如果主轴存在剩余的空隙,值代表当前item要占据剩余空间的比例 flex-shrink 在不换行的情况下,如果主轴的空间不足,值代表每个item缩小的比例 flex-basis 表示item咋主轴上面要占据的基本宽度【设置在主轴方向上的宽度值】 flex flex-grow + flex-shrink + flex-basis的集合写法 align-self 单独调整当前item在交叉轴上的对齐方式
响应式布局
媒体查询screen 电脑 手机 平板查询条件 and(包括)or(或者)not(排除)1.当分辨率大于1900px时,width变为1800px@media screen and (min-width: 1900px){.container{width:1800px;}}2.当分辨率小于1280时起作用@media screen and (max-width: 1280px){.container{width:800px;}}
元素居中问题
父元素宽高已知
第一种方法:margin: 0 auto;第二种方法 position: absolute;left:200px;top:200px;
父元素宽高未知
第一种方法:position: absolute;left:50%;top:50%;margin-left: -50px;margin-top: -50px;第二种方法:position: absolute;left:calc(50% - 50px);top:calc(50% - 50px);第三种方法:position: absolute;left:50%;top:50%;transform: translate(-50px,-50px);第四种方法:position: absolute;left:50%;top:50%;bottom:50%;right:50%;margin:auto;
父元素子元素宽高未知
第一种方法:给父元素设置弹性布局,子元素内容撑开display: flex;justify-content: center;align-items: center;
设置侧边栏效果
1.左边元素脱离文档流(设置浮动).left{float:left;}.right{width:auto;margin-left:150px;}
2.定位.left{position: absolute;left: 0;top:0;}.right{width:auto;margin-left:150px;}
3.弹性布局.box{display: flex;}.right{width: auto;flex-grow: 1;}