【转】CSS3 布局属性全接触

 

1.【弹性盒模型Flexbox】，最大的特性在于，能够动态修改子元素的宽度和高度，以满足在不同尺寸屏幕下的恰当布局。

flex-direction:row | row-reverse | column | column-reverse /*设置主轴方向，确定弹性子元素排列方式*/
flex-wrap: nowrap | wrap | warp-reverse /* 设置弹性子元素超出弹性容器范围时是否换行 */
flex-flow: [flex-direction]||[flex-wrap] /* 复合属性(flex-direction和flex-wrap)，设置弹性子元素排列方式 */
justify-content: flex-start | flex-end | center | space-between | space-around /* 设置弹性子元素在主轴上的对齐方式 */
align-items: flex-start|flex-end|center|baseline|stretch /* 设置弹性子元素侧轴上的对齐方式 */
align-content:flex-start|flex-end|center|space-between|space-around /* 侧轴有空白且有多行时，设置弹性子元素侧轴上的对齐方式 */
order:<integer> /* 设置弹性子元素的顺序，数值小的排在前面，可以为负值。 */
flex-grow:<number> /* 设置弹性子元素的扩展比率，不允许为负值，默认值0 */
flex-shrink:<number> /* 设置弹性子元素的收缩比率，不允许为负值，默认值1 */
flex-basis:<length>|<percentage>|auto /* 设置弹性子元素的伸缩基准值，不允许为负值 */

代码示例：采用弹性盒模型实现菜单项目

<ul class="menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">Sass</a></li>
    <li><a href="#">Ruby</a></li>
    <li><a href="#">Mongo</a></li>
</ul>
……
 
/*
  * 移动优先原则，优先实现小屏幕下的布局
  * 使用颜色，#39ADD1 #3079AB #982551 #E15258 #CC6699 #52AC43
  * */
 .menu
 {
     list-style-type: none;
     padding: 0;
     margin: 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: #3079AB;
 }
 .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;
     }
 }

 

2.【多列属性详解】

代码示例：图片瀑布流的实现

/* 图片瀑布流的实现 */
<!--
emmet简写html
h1{图片瀑布流}+ul.picC>li*18>img[src="img/$.jpg"]   
-->
<h1>
    图片瀑布流</h1>
<ul class="picC">
    <li>
        <img src="img/1.jpg" alt="" /></li>
    <li>
        <img src="img/2.jpg" alt="" /></li>
    <li>
        <img src="img/3.jpg" alt="" /></li>
    <li>
        <img src="img/4.jpg" alt="" /></li>
    <li>
        <img src="img/5.jpg" alt="" /></li>
    <li>
        <img src="img/6.jpg" alt="" /></li>
    <li>
        <img src="img/7.jpg" alt="" /></li>
    <li>
        <img src="img/8.jpg" alt="" /></li>
    <li>
        <img src="img/9.jpg" alt="" /></li>
    <li>
        <img src="img/10.jpg" alt="" /></li>
    <li>
        <img src="img/11.jpg" alt="" /></li>
    <li>
        <img src="img/12.jpg" alt="" /></li>
    <li>
        <img src="img/13.jpg" alt="" /></li>
    <li>
        <img src="img/14.jpg" alt="" /></li>
    <li>
        <img src="img/15.jpg" alt="" /></li>
    <li>
        <img src="img/16.jpg" alt="" /></li>
    <li>
        <img src="img/17.jpg" alt="" /></li>
    <li>
        <img src="img/18.jpg" alt="" /></li>
</ul>
……


/* 图片瀑布流的实现 */
h1
{
    width: 100%;
    height: 50px;
    margin: 0;
    text-align: center;
    line-height: 50px;
    background-color: #fff;
    box-shadow: 0 2px 6px 0 raba(0,0,0,.5);
    position: fixed;
    left: 0;
    top: 0;
}
.picC
{
    width: 90%;
    margin: 50px auto;
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    list-style-type: none;
}
.picC li
{
    margin-top: 10px;
}

 

3.【媒体查询解析】

方式1：

<link rel="Stylesheet" media="(max-width:800px)" href="example.css" />

方式2：

@media (max-width:600px)
{
    .facet_sidebar
    {
        display: none;
    }
}

 

 

 

 

 

4.【响应式表格项目实战】

 

5.【响应式图片项目实战】

 

 

转自 极客学院。