Layout布局
传统的盒状模型:
content box+padding+border+margin
display: block; inline; etc. https://developer.mozilla.org/en-US/docs/Web/CSS/display
position: static; relative; absolute; sticky
float: none; left; right
但有局限性,如垂直居中等样式实现困难;
* 弹性盒子模型(Flexible Box, 即Flex):(important!)
阮一峰老师的链接:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
指定容器/行内元素/webkit内核的浏览器中的容器使用flex布局:
.box {
display:flex; /* 容器指定为flex布局 */
display:inline-flex; /* 行内元素指定为flex布局 */
display:-webkit-flex; /* webkit内核的浏览器指定为flex布局需要添加webkit前缀,safari浏览器 */
display:flex;
}
两条轴,横向main-axis,;纵向cross-axis
容器的六种属性:
- flex-direction:主轴的方向(即item的排列方向)
row
(默认值):主轴为水平方向,起点在左端。
row-reverse
:主轴为水平方向,起点在右端。
column
:主轴为垂直方向,起点在上沿。
column-reverse
:主轴为垂直方向,起点在下沿。
- flex-wrap:是否换行
wrap
:换行,第一行在上方。
nowrap
(默认):不换行。
wrap-reverse
:换行,新加的在上方,第一行在下方。
- flex-flow:flex-direction和flex-wrap的组合的简写方式
默认为: row nowrap
- justify-content: item在主轴上的对齐方式
flex-start
(默认值):左对齐
flex-end
:右对齐
center
: 居中
space-between
:两端对齐,item之间的间隔都相等(最两端没有空隙)。
space-around
:每个item两侧的间隔相等(item之间的间隔比item与边框的间隔大一倍,因为两个的侧面都有一个空隙)
- align-items:item在交叉轴上的对齐方式
flex-start
:交叉轴的起点对齐。
flex-end
:交叉轴的终点对齐。
center
:交叉轴的中点对齐。
baseline
: item的第一行文字的基线对齐。
stretch
(默认值):如果item未设置高度或设为auto,将占满整个容器的高度。
- align-content:有多根轴线时的对齐方式。如果项目只有一根轴线,该属性不起作用
flex-start
:与交叉轴的起点对齐。
flex-end
:与交叉轴的终点对齐。
center
:与交叉轴的中点对齐。
space-between
:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around
:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch
(默认值):轴线占满整个交叉轴。
容器内item的六种属性:
order
flex-grow
flex-shrink
flex-basis
flex
align-self
变量:
作用域:
小知识:
z-index属性可以控制元素显示位置,越大越靠前,就会显示再别的层的上面,可以用来控制设置遮挡效果使得某元素始终浮在表面