• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

弹性布局flexbox

124 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

相关文章

微信收款码
微信收款码