CSS-01 基础对齐设置

CSS:;
1、white-space:
处理文本中的空白符,比如空格和换行符
值:normal: 默认。空白会被浏览器忽略。
pre:空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap:文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止

例子:<p style="white-space:nowrap">开票单位:</p>

;
2、display:flex
flex-wrap: wrap
让弹性盒元素在必要的时候拆行

flex-wrap:
nowrap:默认值。规定灵活的项目不拆行或不拆列。
wrap: 规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse:规定灵活的项目在必要的时候拆行或拆列,但是以相反的顺序。
initial:设置该属性为它的默认值
inherit:从父元素继承该属性


flex-direction:
设置 <div> 元素内弹性盒元素的方向为相反的顺序:
row:默认值。灵活的项目将水平显示,正如一个行一样。
row-reverse:与 row 相同,但是以相反的顺序。
column:灵活的项目将垂直显示,正如一个列一样
column-reverse:与 column 相同,但是以相反的顺序
initial:设置该属性为它的默认值。
inherit:从父元素继承该属性。

flex-flow:
让弹性盒的元素以相反的顺序显示,且在必要的时候进行拆行:
此属性是 flex-direction 和 flex-wrap 属性的复合属性。

例子:flex-flow:row-reverse wrap;

flex-grow: 属性用于设置或检索弹性盒子的扩展比率。
注意:如果元素不是弹性盒对象的元素,则 flex-grow 属性不起作用。

number:一个数字,规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
initial:设置该属性为它的默认值。
inherit:从父元素继承该属性。

例子:
div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;} //让第二个元素的宽度为其他元素的三倍:

object.style.flexGrow="5"

;
3、position:
属性规定元素的定位类型
absolute:生成【绝对】定位的元素,相对于 static 定位以外的第一个【父元素】进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed:生成【绝对】定位的元素,相对于浏览器【窗口】进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

relative:生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit:规定应该从父元素继承 position 属性的值

;
4、justify-content【横向】、align-content【纵向】
注意:使用此属性,必须设置display: flex

用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

flex-start:默认值。项目位于容器的开头。
flex-end:项目位于容器的结尾。
center:项目位于容器的中心。
space-between:项目位于各行之间留有空白的容器内。
space-around:项目位于各行之前、之间、之后都留有空白的容器内

;
5、align-content【纵向】、justify-content【横向】
注意:使用此属性,必须设置display: flex
在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)

stretch:默认值。元素被拉伸以适应容器。
center:元素位于容器的中心。
flex-start:元素位于容器的开头
flex-end:元素位于容器的结尾。
space-between:元素位于各行之间留有空白的容器内。
space-around:元素位于各行之前、之间、之后都留有空白的容器内。


原文地址:https://www.cnblogs.com/qiupiaohujie/p/12509206.html