码迷,mamicode.com
首页 > 其他好文 > 详细

Flexbox

时间:2016-01-02 14:13:47      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:

使用 Flexbox 的牛逼布局

.container {
  display: -webkit-flex;
  display: flex;
}
.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
.none {
  -webkit-flex: none;
          flex: none;
  width: 200px;
}
.flex1 {
  -webkit-flex: 1;
          flex: 1;
}
.flex2 {
  -webkit-flex: 2;
          flex: 2;
}

空间足够的时候,我的宽度是200px,如果空间不足,我会变窄到100px,但不会再窄了。无论窗口如何变化,我的宽度一直是200px。我会占满剩余宽度的2/3。


使用 Flexbox 的居中布局

.vertical-container {

  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
<div class="vertical-container">
CSS里总算是有了一种简单的垂直居中布局的方法了!
<div>

 


Flexbox

标签:

原文地址:http://www.cnblogs.com/jayruan/p/5094415.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!