CSS3布局属性

一， 弹性盒模型：

弹性盒模型.png

图中各元素：
flex container (弹性容器)；
flex item(弹性子元素)；
轴分为主轴（main axis）和侧轴（cross axis）,弹性子元素沿着侧轴依次排列，侧轴垂直于主轴；
弹性容器主轴的开始（main start）,结束（main end）;侧轴的开始（cross start） ,结束（cross end） 他们代表弹性子元素的起始和结束位置。

弹性盒模型的属性分类

弹性容器属性

弹性容器属性.png

• flex-direction : row|row-reverse|column|column-reverse
  设置主轴方向，弹性子元素排列方式

• row：主轴水平方向，排列顺序与页面文档方向相同。如果文档方向为ltr，则排列顺序为从左到右；如果文档方向为rtl,则排列顺序为从右往左
• row-reverse:主轴方向水平方向，与文档方向相反。
• column：主轴为垂直方向。排列顺序从上到下。
• column-reverse:主轴方向为垂直方向。排列顺序从下到上。

• flex-wrap : nowrap|wrap|wrap-reverse
  设置弹性子元素超出弹性容器时，是否换行

• flex-flow : [flex-direction]|[flex-wrap]
  复合属性，弹性子元素排列方式

• justify-content : flex-start|flex-end|center|space-between|space-around
  设置弹性子元素主轴上的对齐方式

• flex-start : ltr环境下，左对齐
• flex-end: ltr环境下，右对齐
• center: 居中对齐
• space-between:第一个和最后一个对齐弹性容器的边缘，其余均匀分布

• space-around: 全部均匀分布（子元素间隔宽度是左右边缘距离的2倍）

  
  
  

  justify-content.png

• align-items:flex-start|flex-end|center|baseline|stretch
  设置弹性子元素侧轴上的对齐方式

• stretch:默认值 从侧轴开始到结束 铺满整个侧轴

• baseline：基线对齐

  
  
  

  align-items.png

• align-content:flex-start|flex-end| center|space-between|sapce-around|stretch
  侧轴有空白且为多行时，弹性元素侧轴上的对齐方式

弹性子元素属性

弹性子元素属性.png

• order:
  设置弹性子元素的顺序，数值小的在前面，可以为负值

  
  
  

  order.png

• flex-grow:
  不允许为负值，默认值为0

  
  
  

  flex-grow.png

• flex-shrink:
  不允许为负，默认值为1

  
  
  

  flex-shrink.png

• align-self与align-items相同

Flexbox菜单项目实战

    
    
    
    


    

        
HTML
        
CSS
        
Node
        
Ruby
        
mongo
        
Sass
    

/* 利用autoprefixer插件的方式来实现兼容性问题 */
/*begin.css*/
.menu{
    list-style: none;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow:row wrap;
        -ms-flex-flow:row wrap;
            flex-flow:row wrap;
}

.menu li{
    height: 40px;
    text-align: center;
    line-height: 40px;
    -webkit-box-flex:1;
    -webkit-flex:1 1 100%;
        -ms-flex:1 1 100%;
            flex:1 1 100%;
}

.menu li:nth-child(1){
    background-color: #39ADD1;
}

.menu li:nth-child(2){
    background-color: #3079A1;
}
.menu li:nth-child(3){
    background-color: #982551;
}
.menu li:nth-child(4){
    background-color: #E15258;
}
.menu li:nth-child(5){
    background-color: #cc6699;
}
.menu li:nth-child(6){
    background-color: #52ac43;
}

.menu li a{
    color: #fff;
    text-decoration: none;
}

@media(min-width: 480px){
    .menu li{
        -webkit-box-flex :1;
        -webkit-flex :1 1 50%;
            -ms-flex :1 1 50%;
                flex :1 1 50%;
    }
}

@media(min-width: 768px){
    .menu{
        -webkit-flex-flow: row nowrap;
            -ms-flex-flow: row nowrap;
                flex-flow: row nowrap;
    }
}

说明：此兼容性问题比较麻烦，然而我们可以借助于插件来实现兼容性问题——插件是：autoprefixer
网址：http://codepen.io/

codepen.png

点击红色方框中的New Pen,进入如下页面

codepen1.png

没有考虑兼容性问题的css代码如下:

/*begin.css*/
.menu{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow:row wrap;
}

.menu li{
    height: 40px;
    text-align: center;
    line-height: 40px;
    flex:1 1 100%;
}

.menu li:nth-child(1){
    background-color: #39ADD1;
}

.menu li:nth-child(2){
    background-color: #3079A1;
}
.menu li:nth-child(3){
    background-color: #982551;
}
.menu li:nth-child(4){
    background-color: #E15258;
}
.menu li:nth-child(5){
    background-color: #cc6699;
}
.menu li:nth-child(6){
    background-color: #52ac43;
}

.menu li a{
    color: #fff;
    text-decoration: none;
}

@media(min-width: 480px){
    .menu li{
        flex :1 1 50%;
    }
}

@media(min-width: 768px){
    .menu{
        flex-flow: row nowrap;
    }
}

粘贴进css中并设置相关内容：

codepen2.png

途中的弹出框是点击css栏的设置按钮出来的，选中图片中红框框的单选按钮，close

codepen4.png

下拉框选中第二个即可完成css的兼容性内容

二，多列属性详解

可以轻松实现多列布局

attribute.png

多列属性实战--图片瀑布流

/*HTML*/



    
    
    
    


    
图片瀑布流
    

        

        

        

        

        

        

    

/*css*/
h1{
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.5);
    position: fixed;
    left: 0;
    top: 0;
    margin: 0;
}

.picC{
    width: 90%;
    margin: 50px auto;
    -webkit-columns:200px 4;
       -moz-columns:200px 4;
            columns:200px 4;
    -webkit-column-gap:20px;
       -moz-column-gap:20px;
            column-gap:20px;
    list-style: none;
}

.picC li{
    margin-top: 10px;
}

.pic li img{
    width: 200px;
    height: 300px;
}

注意：图片最好不要是png的，否则没办法看效果的。

三，媒体查询解析

响应式布局的核心是媒体查询。

媒体查询是获取用户行为和设备环境，然后提供 相应的css规则的过程的简称

媒体查询的使用

• link元素中的css媒体查询

• 样式表中的css媒体查询

• 媒体查询基本语法：

  
  
  

  media_snytax.png

• 媒体查询特征

  
  
  

  feature.png

• 媒体查询类型

  
  
  

  type.png

• 媒体查询规则

  
  
  

  rule.png

• 常见的屏幕尺寸大小

  
  
  

  size.png

遵循移动优先的规则：样例：

/* 超小屏幕，手机，小于768px */
/*没有任何媒体查询相关的代码，移动设备优先*/

/*小屏幕（平板，大于等于768px）*/
@media (min-width: 768px){
    ...
}

/*中等屏幕（桌面显示器，大于等于992px）*/
@media (min-width: 992px){
    ...
}

/*大屏幕（大桌面显示器，大于等于1200px）*/
@media (min-width: 1200px){
    ...
}

关于示例，在菜单项目实战中有所涉及，不再写例子

四，响应式图片实战

• 响应式图片时指用户代理根据输出设备的分辨率不同，加载不同类型的图片

• 实现的方法有：
  • 用srcset和sizes加载不同的图片
  • picture source media加载不同的图片
  • 用source type指定多种格式
  • 超赞的polyfill-picturefill

实例：

    
    
    
    


    

        
第一种方法：picture source media
        
            
            
            
            
            
            
        
        
第二种方法：srcset sizes设置响应式图片
     
        
    

/* img_reponse.css */

.imgContainer{
    max-width: 1000px;
    margin: auto;
}
.imgContainer h2{
    font-size: 2vw;
}
.imgContainer img{
    width: 100%;
}

说明：因为这两种方法的兼容性不是很好。所以在页面中会引入

来提高兼容性。
网址：http://scottjehl.github.io/picturefill/ 下载即可

picturefill.png

参考资料：极客学院《CSS3 布局属性全接触》视频教程