我转过几个弯 绕过那个小雨楼
- 拿着蒲扇摆着衣衫渡着紧箍咒
- 不问天涯不停留 喝过几壶酒
- 不过年少白头道义放胸口
- 倘若明天之后 遥看前尘剑封侯
- 似那天上神仙无所求
- 朝朝暮暮君如梦醒十分不为何理由
- 是真是假是惶恐是无休
- 路过这风雨花满楼 片刻都不停留
- 我本这书生进京赶考留下许多愁
- 你问有没有时候 我叹这天道默悠悠
- 能否与我一醉方休
- 又过了几个弯 算尽天量道莫慌
- 踏这田园闻这芳草香
- 跌跌撞撞仗剑天涯折煞不枉无笔良
- 是梦是幻是温柔是家乡
- 路过这风雨花满楼 片刻都不停留
- 我本这书生进京赶考留下许多愁
- 你问有没有时候 我叹这天道默悠悠
- 能否与我一醉方休
- 路过这风雨花满楼 片刻都不停留
- 我本这书生进京赶考留下许多愁
- 你问有没有时候 我叹这天道默悠悠
- 能否与我一醉方休
- 谁能与我一醉方休
弹性布局flexbox
木灵鱼儿
1047 天前CSS
124
0
0
父元素设置：
display: flex;
justify-content: space-around;
align-items: center;
flex-flow: column wrap;（可选）
子元素设置：
flex: 1; （可选）
order: 1;（可选）
align-self: flex-start;（可选）
解释：
display: flex; 设置元素为弹性布局
justify-content: space-around; 设置子元素水平对齐方式！（flex-start：起点对齐；flex-end：终点对齐；center：居中对齐；space-between：一个子元素时为起点对齐，两个子元素为两边对齐【也就是起点和终点对齐】，两个以上为第一个和最后一个为两边对齐，其他的平均居中对齐；space-start：一个子元素为居中对齐，多个子元素为平均居中对齐。）
align-items: center; 设置子元素垂直对齐方式！（flex-start：起点对齐；flex-end：终点对齐；center：居中对齐；
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐；stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。）
flex-flow: column wrap; 设置子元素排列方向和换行的简写形式，flex-flow：flex-direction | flex-wrap；【 flex-direction：row（从左到右），row-reverse（从右到左），column（从上到下），colunm-reverse（从下到上）；flex-wrap：nowrap（不换行），wrap（超出自动换行），wrap-reverse（超出自动换行，而且顺序反过来）。 】
flex：1； 设置子元素的比例，1:2:1这种比例。
order：1； 设置子元素的排列顺序，但是要把所以的子元素设置才有效果。
align-self: flex-start; 单独设置子元素的垂直排列方式，属性值参考align-items的值。
<font color="#999999">由于是css3的属性，我们还需要兼容ie和其他低版本浏览器，我这边给个例子，具体可以自行百度下！</font>
例：
父元素：
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
子元素：
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
-ms-flex-item-align: start;
align-self: flex-start;
0
评论(0)