利用flex布局,写了从一到九的麻将排版格式
父元素(容器):flex container
- flex-direction: 子元素(项目)的排列方向,默认 row
属性值 + 作用解释 1. row(默认值):主轴为水平方向,起点在左端 2. row-reverse:主轴为水平方向,起点在右端 3. colunm:主轴为垂直方向,起点在上沿 4. colunm-reverse:主轴为垂直方向,起点在下沿
- flex-wrap: 子元素(项目)的总宽度超出时是否换行,默认 nowrap
属性值 + 作用解释 1. nowrap(默认):不换行 2. wrap:换行,第一行在上方 3. wrap-reverse:换行,在第一行的下方
- flex-flow: 上两种属性的简写,默认 row nowrap
- justify-content: 主轴 main axis 的对齐方式,默认 flex-start
属性值 + 作用解释 1. flex-start(默认值):左对齐 2. flex-end:右对齐 3. center:右对齐 4. space-between:两端对齐,项目之间的间隔都相等 5. space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。 6. space-evenly:项目之间的间隔都相等
- align-content: 交叉轴 cross axis 的 多行 的对齐方式,默认 stretch
属性值 + 作用解释 1. stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。 2. flex-start:交叉轴的起点对齐 3. flex-end:交叉轴的终点对齐 4. center:交叉轴的中点对齐 5. space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。 6. space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- align-items: 交叉轴 cross axis 的 单行 的对齐方式,默认 stretch
属性值 + 作用解释 1. stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。 2. flex-start:交叉轴的起点对齐 3. flex-end:交叉轴的终点对齐 4. center:交叉轴的中点对齐 5. baseline:项目的第一行文字的基线对齐。
子元素(项目):flex item
- order: 子元素(项目)的排列顺序,数值越小排列在前面,默认 0
属性值<integer> 0、1、2、3、4...
- flex-grow: 子元素(项目)的放大比例,默认 0
属性值<number> 0、1、2、3、4... 注:0不放大
- flex-shrink: 子元素(项目)的缩小比例,默认 1
属性值<number> 0、1、2、3、4... 注:0不缩小
- flex-basis: 子元素(项目)的占用空间,默认 auto
属性值<length> 1. 自定义:100px、200px、300px... 2. 默认大小:auto
- flex: 上面三种属性的简写,默认 0 1 auto
快捷属性:优先推荐使用这个属性,而不是单独写三个属性 1. auto:(1 1 auto) 2. none:(0 0 auto)
- align-self: 交叉轴 cross axis 上单个项目的对齐方式,默认 auto
属性值 + 作用解释 1. auto(默认值):和父元素上面的align-items属性保持一致 2. flex-start:交叉轴的起点对齐 3. flex-end:交叉轴的终点对齐 4. center:交叉轴的中点对齐 5. baseline:项目的第一行文字的基线对齐。 6. stretch:如果项目未设置高度或设为auto,将占满整个容器的高度。
麻将布局分析:
首先我们可以把上面的几种排版格式分出来,可以发现有几种是一样的。
1、①筒和⑤筒的中间:子元素在父元素里面居中对齐(水平居中、垂直居中)
/* 父元素 */
display: flex;
justify-content: center;
align-items: center;
2、②筒、③筒和⑦筒的上部分:父元素排列成一列,子元素不同方式对齐
/* 父元素 */
display: flex;
flex-direction: column;
justify-content: space-between; // 主轴两端对齐 (②筒)
align-items: center;
/* 子元素 */
align-self: center; // 交叉轴中点对齐(③筒)
align-self: flex-end; // 交叉轴终点对齐(③筒)
3、④筒、⑤筒、⑥筒和⑧筒:属于父元素包含一行的子元素排成一列、一行的子元素在包含两个项目排成一行,两端对齐;
/* 父元素 */
display: flex;
flex-direction: column;
/* 子元素 */
display: flex;
justify-content: space-between;
4、⑨筒:需要用到超出父元素换行属性
/* 父元素 */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
总结
1、flex布局与传统布局在对齐方式的写法上前者要简单许多
2、flex布局的兼容性没有传统布局的在浏览器好,在旧的浏览器不支持
3、flex也称之为弹性布局,可以随着窗口大小自动收缩元素的大小,不用写死
4、flex布局在html5的功能效果显著,不过还是会有很多小问题需要自己处理
gitHub代码查看:flexibleBox
推荐学习网址: