传统布局属性
-
display
-
flex
-
positon
Flex&Grid
Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。
Flex
www.ruanyifeng.com/blog/2015/0…
-
flex-direction
row
(默认值):主轴为水平方向,起点在左端。row-reverse
:主轴为水平方向,起点在右端。column
:主轴为垂直方向,起点在上沿。column-reverse
:主轴为垂直方向,起点在下沿。
-
flex-wrap
nowrap
(默认):不换行。wrap
:换行,第一行在上方。wrap-reverse
:换行,第一行在下方
-
flex-flow
属性是
flex-direction
属性和flex-wrap
属性的简写形式,默认值为row nowrap
flex-flow: <flex-direction> || <flex-wrap>;
-
justify-content
flex-start
(默认值):左对齐flex-end
:右对齐center
: 居中space-between
:两端对齐,项目之间的间隔都相等。space-around
:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
-
align-items
flex-start
:交叉轴的起点对齐。flex-end
:交叉轴的终点对齐。center
:交叉轴的中点对齐。baseline
: 项目的第一行文字的基线对齐。stretch
(默认值):如果项目未设置高度或设为 auto,将占满整个容器的高度。
-
align-content
对于只有一行的 flex 元素,align-content 是没有效果的
-
flex-start
:与交叉轴的起点对齐。 -
flex-end
:与交叉轴的终点对齐。 -
center
:与交叉轴的中点对齐。 -
space-between
:与交叉轴两端对齐,轴线之间的间隔平均分布。 -
space-around
:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。 -
stretch
(默认值):轴线占满整个交叉轴。align-content`属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
-
项目的属性
-
order
顺序
-
flex-grow
属性定义项目的放大比例,默认为
0
,即如果存在剩余空间,也不放大。如果所有项目的
flex-grow
属性都为 1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow
属性为 2,其他项目都为 1,则前者占据的剩余空间将比其他项多一倍。 -
flex-shrink
缩小比例,默认为 1,即如果空间不足,该项目将缩小。
如果一个项目的
flex-shrink
属性为 0,其他项目都为 1,则空间不足时,前者不缩小。(不缩放,不会换行) -
flex-basis
分配剩余空间之前,项目的占据的大小-
flex-basis: <length> | auto;
-
-
flex
flex
属性是flex-grow
,flex-shrink
和flex-basis
的简写,默认值为0 1 auto
。后两个属性可选。flex 不同取值对应的情况:
flex
取值为none
,则计算值为 0 0 auto;flex
取值为auto
,则计算值为 1 1 auto。flex
取值为一个非负数字,则该数字为flex-grow
值,flex-shrink
取 1,flex-basis
取 0%。flex
取值为一个长度或百分比,则视为flex-basis
值,flex-grow
取 1,flex-shrink
取 1。flex
取值为两个非负 数字,则分别视为flex-grow
和flex-shrink
的值,flex-basis
取 0%。flex
取值为一个非负数字和一个长度或百分比,则分别视为flex-grow
和flex-basis
的值,flex-shrink
取 1。
-
align-self
-
该属性可能取 6 个值,除了 auto,其他都与 align-items 属性完全一致。
-
auto | flex-start | flex-end | center | baseline | stretch;
-
CSS3 响应式布局: @media (min/max-width:***) @font-face
块级元素
1.行内元素:不独占一行,不能设置宽高 2.块级元素:独占一行,能设置宽高 3.行内块元素:不独占一行,但可以设置宽高
box-sizing
content-box
是默认值。如果你设置一个元素的宽为 100px,不包括 padding,border,margin。border-box
宽带包括 padding,border,不包括 margin。
box-shadow
/_ x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 _/ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
居中
margin:0 auto 是用于 block 的,无法用于 inline-block。
inline-block 要居中就更简单了,只需要父级元素设置 text-align:center;
Grid
grid-template-columns
属性定义每一列的列宽
grid-template-rows
属性定义每一行的行高
除了使用绝对单位,也可以使用百分比。
repeat(3,33.3%) # 33.3% 33.3% 33.3%
repeat(3,10px 20px) # 10px 20px 10px 20px
repeat(auto-fill,100px) #每列宽度100px,然后自动填充,直到容器不能放置更多的列
fr # 占比
minmax(100px, 1fr) # 最小100px 最大1fr
auto # 浏览器自己决定
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; # 网格线命名
间隔
column-gap
row-gap
gap: <row-gap> <column-gap>
grid-template-areas
grid-template-areas:
'a b c'
'd e f'
'g h i';
grid-auto-flow
grid-auto-flow: column | row | row dense(紧密排列);
justify-items align-items place-items
设置单元格内容的水平位置
place-items: <align-items> <justify-items>;
- start:对齐单元格的起始边缘。
- end:对齐单元格的结束边缘。
- center:单元格内部居中。
- stretch:拉伸,占满单元格的整个宽度(默认值)。
justify-content align-content place-content
是整个 grid 在父容器里面的水平位置
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
place-content: <align-content> <justify-content>;
space-around 和 space-evently 的区别
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。
space-evently:项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。
grid-template 属性 grid 属性
grid-template
简写
grid-template-columns
grid-template-rows
grid-template-areas
grid
属性简写
grid-template-rows
grid-template-columns
grid-template-areas
、
grid-auto-rows
grid-auto-columns
grid-auto-flow
项目属性
grid-column-start
属性:左边框所在的垂直网格线grid-column-end
属性:右边框所在的垂直网格线grid-row-start
属性:上边框所在的水平网格线grid-row-end
属性:下边框所在的水平网格线
.item-1 {
grid-column-start: header-start; # 指定为网格线的名字。
grid-column-end: span 2;;# 表示"跨越",即左右边框(上下边框)之间跨越多少个网格。
}
grid-column grid-row
.item {
grid-column: <start-line> / <end-line>;
grid-row: <start-line> / <end-line>;
}
grid-area
.item-1 {
grid-area: e; # 指定项目放在哪一个区域。
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
justify-self align-self place-self
设置单元格内容的水平位置
.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
<align-self> <justify-self>;
}