0%

弹性布局flexbox

发布于 / 分类: CSS / 暂无评论 / 阅读量 882

最后更新于 2018年04月11日

父元素设置:

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;
CSS的简写形式合集 一段指令教你查看笔记本电池损耗win8-win10
  • 滑动验证
    »
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao