ionicCSS08_栅格

头部导入ionic.min.CSS

1.ionic栅格Grid

        1）ionic 的栅格(Grid)和其他大部分框架有所不同，它采用了弹性盒子模型(Flexible Box Model) 。 而且在移动端，基本上的手机都支持flexbox。row 样式指定行，col 样式指定列。

         2）在row简单添加columns,columns会被平分row的空间. 如果有三列,就添加三列, 有五列就添加五列. 不像 bootstrap, ionic没有12列的限制,也没有列大小的限制. 你还可以在每个列中设置垂直居中.

       3）row 类是用来定义行, col 是用来定义列. 可以有4列和2列.也可以用3, 6, 7, 23 等等, 不重要. 关键在于创建你想要的列,不用担心他们的占位百分比, 因为都是自动的.

       注意：例子中添加了边框和灰色背景以便于能够被清晰的看到行列结构。<style type="text/css">

.addCss {height:600px;}.row>div{border: 1px solid #333;}</style>

<div class="content has-header addCss">			<div class="row">			  <div class="col">.col</div>			  <div class="col">.col</div>			  <div class="col">.col</div>			  <div class="col">.col</div>			  <div class="col">.col</div>			</div></div>
1.2指定宽度栅格
        可以 设定一行中各个列的大小不一样。默认情况下，列都会被划分为同等大小。但你也可以按百分比来设置列的宽度（一行为 12 个栅格）。使用栅格系统的好处在于你只需要指明你需要的列占位百分比即可,其他的列就会被平均分配使用剩下的空间.
1.3栅格偏移
       默认左侧偏移col-offset-偏移量
<div class="content has-header addCss">			<div class="row">			  <div class="col col-33 col-offset-33">.col</div>  			  <div class="col">.col</div>			</div>			<div class="row">			  <div class="col col-33">.col</div>  			  <div class="col col-33 col-offset-33">.col</div>			</div>			<div class="row">			  <div class="col col-33 col-offset-67">.col</div>			</div></div>
1.4纵向对齐
<div class="content has-header addCss">			<div class="row">			  <div class="col">.col</div>			  <div class="col">.col</div>			  <div class="col">.col</div>			  <div class="col">1<br>2<br>3<br>4</div>			</div>			<div class="row">			  <div class="col col-top">.col</div>			  <div class="col col-center">.col</div>			  <div class="col col-bottom">.col</div>			  <div class="col">1<br>2<br>3<br>4</div>			</div>			<div class="row row-top">			  <div class="col">.col</div>			  <div class="col">.col</div>			  <div class="col">.col</div>			  <div class="col">1<br>2<br>3<br>4</div>			</div>			<div class="row row-center">			  <div class="col">.col</div>			  <div class="col">.col</div>			  <div class="col">.col</div>			  <div class="col">1<br>2<br>3<br>4</div>			</div>			<div class="row row-bottom">			  <div class="col">.col</div>			  <div class="col">.col</div>			  <div class="col">.col</div>			  <div class="col">1<br>2<br>3<br>4</div>			</div></div>
1.5响应式栅格respondive grid
手持设备屏幕在切换时，例如横屏，竖屏等。就需要设置每行的栅格可以实现根据不同宽度自适应大小。
responsive-sm  小于手机横屏
responsive-md          小于平板竖屏
responsive-lg 小于平板横屏
<div class="content has-header addCss">			<div class="row responsive-sm">			  <div class="col">.col</div>			  <div class="col">.col</div>			  <div class="col">.col</div>			  <div class="col">.col</div>			</div></div>