Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

flex实现的两端对齐

  使用display:inline-blocktext-align:justify来实现两端对齐看起来有点麻烦了,实际上现代浏览器提供了更容易实现两端对其的做法。在flex布局方式下,使用justify-content属性可以修改元素的排列方式,其中space-between值就是两端对其。
<style>
#panel {
  border:1px solid #CCC;padding:10px;
  display:flex;
  justify-content:space-between;
}
#panel>div {border:1px solid #CCC;width:50px;height:50px;}
</style>
<div id="panel">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

  如果不考虑低版本IE的兼容,这个方法会比之前的方法更正规。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^