编程知识 cdmana.com

干货:CSS 布局

分类

固定宽度布局:一般宽度为960/1000/1024 px

不固定宽度布局:主要靠文档流的原理来布局

响应式布局:PC上固定宽度,手机上不固定宽度

各种布局的使用场景

float布局 子元素上加float:left和width 在父元素上加.clearfix 此布局不需要做响应式,是专门为 IE 做准备的。 在 IE 6/7 存在双倍marginbug 时,可以针对 IE 6/7 把margin减半。或者加上一句display: inline-block。 flex布局 让一个元素变成 flex 容器 .container{ display: flex; /or inline-flex/ } 复制代码 改变 items 流动方向(主轴)

flex-direction: row从左到右

flex-direction: row-reverse从右到左

flex-direction: column从上到下

flex-direction: column-reverse从下到上

改变折行

flex-wrap: nowrap默认,不换行,自动缩进

flex-wrap: wrap换行,第一行在上方

flex-wrap: wrap-reverse换行,第一行在下方

主轴对齐方式 在没有改变flex-direction方向时,默认主轴是横轴。

justify-content: flex-start靠左对齐

justify-content: flex-end靠右对齐

justify-content: center居中

justify-content: space-between两边对齐,项目与项目之间的空隙相等

justify-content: space-around每个项目两边的空隙相等,因此项目与项目之间的空隙会是两端空隙的2倍

justify-content: space-evenly两端以及项目之间的空隙相等

次轴(纵轴)对齐

align-items: flex-start顶端对齐

align-items: flex-end底端对齐

align-items: center居中

align-items: strech默认,如果项目为设置高度或auto,将占满整个容器的高度

多行内容

align-content: flex-start起点对齐

align-content: flex-end终点对齐

align-content: center居中

align-content: stretch占满

align-content: space-between两端对齐,轴线之间的间隔平均分布

align-content: space-around轴线与边框和轴线与轴线的空隙平均分布

order属性 order属性定义项目的排列顺序。数值越小,排列靠前,默认为0。 .item{ order: <integer>; } 复制代码

flex-grow属性 flex-grow属性定义项目的放大比例,默认为0

如果项目的属性都为1时,它们将等分剩余的空间,如果有一个项目的属性为2,其它项目属性为1时,那么前者占据剩余的空间要比其他项目多一倍。 flex-shrink属性 定义了项目的缩小比例,默认为1,空间不足时,项目缩小 flex-basis属性 控制基准宽度,默认值auto,即项目的本来大小。 flex属性 flex属性是flex-grow、flex-shrink和flex-basis的简写,默认值是0 1 auto。后两个属性可选。 .item{ flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>] } 复制代码 该属性有两个快捷值:auto(1 1 auto)和none (0 0 auto)。 建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。 align-self属性 align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。 .item{ align-self: auto | flex-start | flex-end | center | baseline | stretch; } 复制代码

Grid布局 成为一个容器 .container{ display: grid | inline-grid; } 复制代码 行和列 .container{ grid-template-columns: 40px 50px auto 50px 40px; grid-template-rows: 25% 100px auto; } 复制代码

设置范围 .item{ grid-column-start: 2; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; } 复制代码

等份 给每个项目设置一个属性值,比如有三个项目,给每个项目取值为1fr,即空间划为三等分给三个项目。 .container{ grid-template-columns: 1fr 1fr 1fr; 复制代码 分区 命名网格区域的名称,所对应的项目占据的空间大小。 .container{ width: 400px; height: 300px; border: 1px solid red; display: grid; grid-template-columns: 50px 50px auto 50px; grid-template-rows: auto; grid-template-areas: "header header header header" "main main . aside" "footer footer footer footer" } .header{ grid-area: header; background: red; } .main{ grid-area: main; background: blue; } .aside{ grid-area: aside; background: yellow; } .footer{ grid-area: footer; background: grey; } 复制代码

空隙gap .container{ grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; grid-column-gap: 10px; grid-row-gap: 15px; } 复制代码

版权声明
本文为[osc_60387719]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/4799168/blog/4712228

Tags flex
Scroll to Top