display :flex 弹性盒子布局要点

弹性盒子布局有好几个用法

1.页面布局用到

<div style="display:flex">
    <div style="flex:1">aaa</div>
    <div style="flex:1">bbb</div>
    <div style="flex:1">ccc</div>
</div>

当容器内部元素需要自适应宽,按父级百分比来布局的时候就可以用 flex布局。
与普通 左右浮动布局相比
优点:内部元素不需要固定宽,父元素宽变小时也不会掉下来。

2.未知宽的元素水平居中

<div style="display:flex">
    <p style="margin:auto">我需要居中显示</p>
</div>

比绝对定位什么的好用多了,而且不知道元素的宽度也是可以让他水平居中的

其他

.container{ display :flex}
.container{ display :inline-flex}     // 行内元素的
.container{ display :webkit-flex}     // webkit内核  for  safair

注意:当设置flex布局后,float vertical-align,clear 都将失效了

容器的属性

    flex-direction
    flex-wrap
    flex-flow
    justify-content
    align-items
    align-content

1. flex-direction :决定主轴的方向,即项目的排列方向。
flex-direction:row/row-reverse/column/column-reverse

2.flex-wrap: 是否换行,默认情况不换行
flex-wrap:wrap/nowrap/wrap-reverse

3.flex-flow : 是 属性flex-direction 与 flex-wrap 的缩写,默认都是 row和 nowrap

4.jusity-content: 定义了项目在主轴上的对齐方式
jusity-content: flex-start // 从左到右
jusity-content: flex-end // 从右到左
jusity-content: center // 居中
jusity-content: space-between // 两端靠两边对齐,项目之间的间隔相等
jusity-content: space-around // 每个项目两侧的间隔相等,所以两个项目之间的距离是分别到两端的距离的两倍

5.align-items :属性定义项目在交叉轴上如何对齐
6.align-content:属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

项目的属性

    order
    flex-grow
    flex-shrink
    flex-basis
    flex
    align-self

关于以上属性的细节 直接看:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

注意 一般写的过程中要考虑很多兼容问题

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-orient: row;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值