CSS3的布局学习

1.flex弹性盒子模型布局

2.多列布局

3.媒体查询

4.响应式图片

一：弹性盒子模型

分为弹性容器，弹性子元素，主轴，侧轴。

弹性容器常有的属性：

flex-direction 设置主轴的方向 row column row-reverse column-reverse

flex-wrap 超出时是否折行 wrap nowrap

flex-flow 上面两个的复合属性

justify-content 主轴上的对其方式 flex-start flex-end center space-between space-around

align-content 侧轴上有空白式 的对其方式

align-items 

弹性子元素的属性：

order 顺序 可为负

flex-grow 扩展比例

flex-shrink 收缩比例

flex-basis 伸缩基本值

flex 上面三个的复合 1 1 100%

align-self 单独对某个子元素设置

eg:

display:-webkit-box;

display:-webkit-flex;

display:-ms-flexbox;

display:flex;

-weibkit-flex-flow:row wrap;

-ms-flex-flow:    ;

flex-flow:    ;

-webkit-flex:   ;

-ms-flex:   ;

flex:   ;

多列：

column-width:auto|```;

column-count:

columns: 上面的复合

column-rule:1px solid red

column-gap:2px ;

媒体查询：

  <link rel="stylesheet" media="(max-width:800px)" href="example.css"/>
  <style>
  @media (max-width:800px){
    
  }
  </style>

智能手机：>480px  平板：>768px 电脑：>992px

四：响应式图片

<picture>

<source media="()" srcset="srcurl"></>

<img src=""/>

</picture>

<script src="picturefill.js"></>

版权声明：本文为博主原创文章，未经博主允许不得转载。