你还在傻傻地用float吗 float
我是小渔歌，点击右上方“关注”，每天为你分享【前端技术知识】干货 。
大家在做移动端的时候，还有人在用浮动（float）布局吗？
弹性盒模型（flex）可以解决一切，当你用熟悉了之后，你绝对不会再用浮动布局了 。
下面就给大家介绍一下，这个弹性盒模型他究竟有何魅力？
演示代码公共dom结构与样式 。
<style>.container {display: flex;flex-direction: row;width: 340px;border: 1px solid #000000;height: 80px;}.item {width: 40px;height: 40px;border-radius: 5px;border: 1px solid #000000;} </style><div class="container"><div class="item one">1</div><div class="item two">2</div><div class="item three">3</div><div class="item fourt">4</div></div>1. flex-direction
【你还在傻傻地用float吗 float】指定弹性子元素在容器中的排列方向 。
row 横向排列，左对齐 。
文章插图
flex-direction: row
row-reverse：横向排列，右对齐，并且内容是反向顺序 。
文章插图
flex-direction:row-reverse
column 纵向排列，顶部对齐 。
文章插图
flex-direction:column
column-reverse 纵向排列，底部对齐，并且内容是反向顺序 。
文章插图
flex-direction:column-reverse
2. justify-content：横轴上的对齐方式
flex-start：左对齐（默认值） 。
文章插图
justify-content:flex-start
flex-end：右对齐 。
文章插图
justify-content：flex-end
center:水平居中 。
文章插图
justify-content:center
space-between：平均分布 。两头没有间隙 。
文章插图
justify-content:space-between
space-around：平均分布 。两头有间隙 。
文章插图
justify-content:space-around
3. align-items：纵轴上的对齐方式
这个给每个子元素设置不同的高度效果更明显一点 。
flex-start：顶部对齐（默认值） 。
文章插图
align-items:flex-start
flex-end：底部对齐 。
文章插图
align-items:flex-end
center：居中 。
文章插图
align-items:center
baseline：基线对齐 。给第二个元素设置一个值，可以看到它是基于文字一条线对齐的 。
文章插图
align-items:baseline
stretch 。与baseline不同的是他是基于子元素顶部一条线对象的 。
文章插图
align-items:stretch
4.flex-wrap：子元素换行方式
nowrap：默认单行 。这时候我们不管把子元素设置多大都不会换行 。
文章插图
flex-wrap:nowrap
wrap：多行 。
文章插图
flex-wrap:wrap
wrap-reverse：翻转多行 。
文章插图
flex-wrap:wrap-reverse
initial 。inherit：继承 。5.align-content：用于修改flex-wrap属性，修改各行对齐方式
flex-start 。
文章插图
align-content:flex-start
flex-end 。
文章插图
align-content:flex-end
center 。
文章插图
align-content:center
space-between 。
文章插图
align-content:space-between
space-around 。
文章插图
align-content:space-around
stretch：默认 。上面是父元素的属性，再来看下弹性子元素的属性有哪些？
order 属性值为整数，数字越小，越靠前 。把第四个元素设置成-1 。
文章插图
order:-1
align-self：纵轴 。单独设置某一个子元素的排列方式，这里我们给第四个元素再设置成center,这个大家可以试试其它值,同align-items属性值 。
文章插图
align-self:center
flex：用于指定弹性子元素之间怎么分配空间 。设置元素的占用空间，这里我们给第四个元素设置成2，可以看到它比其它元素占用的空间要大 。
文章插图
flex:2
大家可以动手试下啦[中国赞]
往期精彩内容
能用CSS实现的效果，就尽量把Javascript踢开吧？
在JavaScript中call与apply的实际应用你知道多少？
推荐阅读
- 你对曾经的“电报”知多少 电报
- 怎么选新鲜水果和蔬菜 下面教你如何选择新鲜水果和蔬菜
- 男朋友难过了安慰说说
- 手把手教你升级ANT ant
- 你拨的用户忙什么意思
- 地有天没有他有你没有地里有田边没有池中有水中没有 我没有他有天没有地有
- 19款别克君越如何拉手刹 教你三个方法
- 韮菜花怎幺淹制 送给爱吃的你
- 幼儿园开学祝福语简短
- 请抓住我的手你别放弃歌名