CSS Secret 读书笔记之弹性布局

在CSS Secret中提到了弹性布局，这里就简单写了四个实例来回顾下弹性布局

居中

可以利用flex，让子容器在父容器中居中。设置父容器display属性为flex，并设置子容器margin属性为auto即可。
HTML代码：

<div class="parent">
        <div class="child">
            child
        </div>
</div>

CSS代码：

.parent,.child{
    border:1px solid #333;
}
.parent{
    display: flex;
    height: 300px;
}
.child{
    width: 100px;
    height: 100px;
    margin: auto;
}

效果如下：

自适应列表

有一组列表，有固定的宽度，但是想让它们能够根据浏览器窗口的大小进行自适应调整，可以使用弹性布局。
HTML代码：

<ul class="flex-container">
    <li class="flex-item">1</li>
    <li class="flex-item">2</li>
    <li class="flex-item">3</li>
    <li class="flex-item">4</li>
    <li class="flex-item">5</li>
    <li class="flex-item">6</li>
</ul>

CSS代码：

.flex-container{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.flex-item{
    background: tomato;
    width: 200px;
    height: 150px;
    margin-top: 10px;
    padding: 5px;
    line-height: 150px;
    color: white;
    font-size: 3em;
    text-align: center;
}

效果如下：

自适应导航

为了适应移动端的屏幕尺寸，可以根据屏幕由小到大依次设置为多行居中、单行居中以及单行左(右)对齐。
HTML代码：

<ul class="navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">Details</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
</ul>

CSS代码：

.navigation{
    margin: 1em 0;
    padding: 0;
    list-style: none;

    background: deepskyblue;
    display: flex;
    justify-content: flex-end;

}
.navigation a{
    display: block;
    text-decoration: none;
    padding: 1em; 
    color: white;
}
.navigation a:hover{
    background: tomato;
}
@media all and (max-width: 800px){
    .navigation{
        justify-content: space-around;
    }
}
@media all and (max-width: 600px){
    .navigation{
        flex-flow: column wrap;
        padding: 0; 
    }
    .navigation a{
        text-align: center;
        padding: 10px;
        border-top: 1px solid rgba(255,255,255,0.3);
        border-bottom: 1px solid rgba(0,0,0,.1);
    }
}

效果如下：

自适应布局

最后来一个很常用的自适应布局，主要用于适应移动端的屏幕尺寸。整体思路大概是先考虑移动端，设置所有div的宽度为100%；在中等屏幕中设置两个侧边栏在同一行；在宽屏中，设置左侧边栏在主要内容左侧，右侧边栏在主要内容右侧。
HTML代码：

<div class="wrapper">
    <div class="header">Header</div>
    <div class="main">
        <p>this is main作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。</p>
    </div>
    <div class="aside aside-1">aside-1</div>
    <div class="aside aside-2">aside-2</div>
    <footer class="footer">this is footer</footer>      
</div>

CSS代码：

.header {
        background: tomato;
    }
    .footer {
        background: lightgreen;
    }
    .main {
        text-align: left;
        background: deepskyblue;
    }
    .aside-1 {
        background: gold;
    }
    .aside-2 {
        background: hotpink;
    }
    /*移动端*/
    .wrapper > * {
        padding: 10px;
        flex: 1 100%;
    }
    /*中等屏幕*/
    @media all and (min-width: 600px){
        .aside{
            flex: 1 auto;
        }
    }
    /*宽屏*/
    @media all and (min-width: 800px){
        .main {flex: 2 0;} /*扩大比例为2缩小比例为0*/
        .aside-1 {order: 1;}
        .main {order: 2;}
        .aside-2 {order:3;}
        .footer {order:4;}
    }

效果如下：