display的属性:1、display:none;2、display:block;3、display:inline;4、display:inline-block;5、display:inline-table;6、display:table;7、table-row;8、table-cell;9、display:list-item;10、display:flex。
一、display的属性
- display:none:设置元素隐藏,具体可见:display:none。
- display:block:设置元素为块级元素,块级元素可以独占一行,可设宽高。
- display:inline:设置元素为行内元素,一行可有多个行内块元素,不可设宽高。
- display:inline-block:设置元素为行内块元素,既有行内元素的(一行可有多个)特性,又有块元素的(可设宽高)特性。
- display:inline-table:inline-table得到的是,外面是“内联盒子”,里面是“table盒子”。
- display:table:元素会作为块级表格来显示,类似 table,表格前后带有换行符;配合table-cell使用可实现水平垂直居中。
- table-row:元素会作为一个表格行显示,类似 tr。
- table-cell:元素会作为一个表格单元格显示,类似 td和 th。
- display:list-item:为元素内容生成一个块型盒,随后再生成一个列表型的行内盒。会把元素作为列表显示,要完全模仿列表的话还需要加上 list-style-position,list-style-type。
- display:flex:该属性会将元素变为弹性盒子(或内联的弹性盒子),它能够扩展和收缩容器内的元素,以最大限度地填充可用空间。
二、display:flex用法详解
1、flex-direction
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
2、flex-wrap
- nowrap(默认):不换行。
- wrap:换行,名列前茅行在上方。
- wrap-reverse:换行,名列前茅行在下方。
3、justify-content:
- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- space-between:两端对齐,项目之间的间隔都相等。
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
4、align-items:
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的名列前茅行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
5、align-content:
定义了多根轴线的对齐方式,如果项目只有一根轴线,那么该属性将不起作用。
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴。
6、flex-grow
项目中盒子会按照字的多少呈现出合适的大小。
7、flex-shrink
属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效。
8、align-self: auto | flex-start | flex-end | center | baseline | stretch
属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
延伸阅读
display简介
display是CSS中的一个常用属性,可用于规定元素应该生成的框的类型,在网页开发中经常需要用到。display属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。
文章标题:display有哪些属性,发布者:Z, ZLW,转载请注明出处:https://worktile.com/kb/p/34126