值 | 说明 |
---|---|
static | 默认值,普通布局 |
relative | 元素位置相对于static定位 |
absolute | 元素相对于position值不为static的第一位祖先元素定位 |
fixed | 元素相对于浏览器窗口定位 |
跟报纸的排版一样
果然如同报纸一样!
书中写的已经有些过时了。我就找一些资料按照书上的思路整理一下吧。(下面的图都是来自于阮一峰的Flex 布局教程:语法篇)
通过设置display为flex或者是inline-flex将其定义为弹性容器
flex-direction属性决定项目的排列方向。flex-direction的值有:row|row-reverse|column|column-reverse
方向如下图所示:
flex-wrap定义项目一行排不下的请况如何换行,他有三个值nowrap(不换行)|wrap(换行,第一行在上方)|wrap-reverse(换行,第一行在下方啊)
flex-flow是flex-direction和flex-wrap属性的简写形式,默认值是 row nowrap
justity-content属性定义项目在主轴上的对齐方式:属性值有:flex-stat|flex-end|center|space-between|space-around
align-items属性定义项目在交叉轴上如何对齐,它的属性值有:flex-start | flex-end | center | baseline | stretch
align-content属性定义了多跟轴线的对齐方式,若项目只有一根轴线,该属性不起作用。它的属性值:flex-start | flex-end | center | space-between | space-around | stretch
使用table元素来进行布局使内容呈现网格状,我觉的现有的grid布局很好的完成了这个功能
不想写了参考这个吧网格化布局