css flex排序居中

Alignment

这里我特别要提到的是Flexbox，因为他可以使内容在水平和垂直方向居中，仅需要3行CSS代码。

示例代码：

  1. .box {  
  2.   display: +flex;  
  3.   +justify-content: center;  
  4.   +align-items: center;  
  5.  }  
  6.    
  7. <section class="box"> 
  8.   <div>A</div><div>B</div><div>C</div> 
  9. </section> 

 备注：代码中的“+”表示供应商前缀，例如“+flex”可能是-webkit-flex，-ms-flex等。

以上例子会产生如下布局：

演示！

display：flex——通知父容器要成为一个‘flex container’。在上面的插图中，红色的区域表示flex container并且里面包含三个“孩子”，蓝色的区域，属于‘flex items’。A、B、C这三个字母位于主轴和十字轴位置上。仅仅使用了：justify-content:center和align-items:center这两行代码。

排序和方向定位

Flexbox的另一个神奇属性是我们可以从标签的呈现方式上对其进行完全独立排序。这个需要用到两个新的CSS属性，order和flex-direction。Order是对每个“兄弟姐妹”成员进行排序，flex-direction修改他们的方向（行VS列）。

你想把A、B、C这三个字母放在同一个列里面吗？没问题，只需要设置flex-direction:column即可。

备注：默认情况下，每个项目的排序是根据标签的默认排序来的，但是我们可以轻易地覆盖默认排序，通过给B一个比其他家庭成员低一阶的值，它将优先于其他成员。

  1. .box {  
  2.   +flex-direction: column;  
  3. }  
  4. .box > :nth-child(2) {  
  5.   +order: -1;  
  6. } 

效果：

值得注意的是，我们不能改变文件内容，它仍然是A、B、C三个字母。Flexbox可以使我们能够独立于内容进行编排页面样式。

1 2 3 4 下一页

 

Flexibility

Flexbox的“面包”和“黄油”正是flexibility这一特征的体现。除了alignment、orientation、和ordering，还可以通知项目成员增加/减少填充它们周围可利用的空间。这些都可以通过flex属性实现。

Flex属性需要三个值，第一个postive flex值：与其他兄弟姐妹相比，还有多少元素可以增加；第二个是negative flex：可以缩小多少个元素；第三个表示元素所需的宽度。

修改我们之前的例子，我们可以使用flex属性来使B的空间可以多添加2个成员。

  1. .box > * {  
  2.   +flex: 1 0 auto;  
  3. }  
  4. .box > :nth-child(2) {  
  5.   +flex: 3 0 auto;  
  6. } 

期望效果：

posted @ 2015-02-09 19:28  way~  阅读(940)  评论(0)  编辑  收藏  举报