CSS3 flex布局的妙用

来源：互联网发布：软件加速编辑：程序博客网时间：2024/04/28 06:49
<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    <title>flex布局</title>    <meta name="description" content="">    <meta name="keywords" content="">    <link href="components/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>    <script src="components/bootstrap.min.js"></script>    <script src="components/jquery.vide.js"></script></head><body><style>    .father-container {        background-color: #a8e4ff;        padding: 50px 0;    }    /*dislpay:flex使父容器表现为块盒子;display:inline-flex使容器表现为行盒子*/    .flex-container {        display: flex;    }    .inline-flex-container {        display: inline-flex;    }    .align-items-stretch {        -webkit-align-items: stretch;        align-items: stretch;    }    .align-items-baseline {        -webkit-align-items: baseline;        align-items: baseline;    }    .align-items-center {        -webkit-align-items: center;        align-items: center;    }    .align-items-flex-start {        -webkit-align-items: flex-start;        align-items: flex-start;    }    .align-items-flex-end {        -webkit-align-items: flex-end;        align-items: flex-end;    }    .justify-content-flex-start {        -webkit-justify-content: flex-start;        justify-content: flex-start;    }    .justify-content-flex-end {        -webkit-justify-content: flex-end;        justify-content: flex-end;    }    .justify-content-center {        -webkit-justify-content: center;        justify-content: center;    }    .justify-content-space-between {        -webkit-justify-content: space-between;        justify-content: space-between;    }    .justify-content-space-around {        -webkit-justify-content: space-around;        justify-content: space-around;    }    .center-container {        display: inline-flex;        justify-content: center;        align-items: center;    }    .element-autoheight {        width: 50px;        padding: 5px;        margin: 5px;        background-color: tomato;    }    .element-fixedsize {        width: 50px;        height: 50px;        padding: 5px;        margin: 5px;        background-color: tomato;        text-align: center;        line-height: 50px;        color: white;        font-weight: bold;        font-size: 2em;    }    .center-item {        width: 50px;        height: 50px;        background: tomato;    }    .flex-container1 {        padding: 0;        margin: 5px;        float: left;        list-style: none;        width: 160px;        height: 300px;        display: flex;        flex-flow: row wrap;        background-color: #a8e4ff;        /*flex-direction:row;        flex-wrap:wrap;*/    }    .flex-start {        -webkit-align-content: flex-start;        align-content: flex-start;    }    .flex-end {        -webkit-align-content: flex-end;        align-content: flex-end;    }    .flex-end li {        background: gold;    }    .flex-end li:nth-child(3) {        margin-bottom: 0;    }    .center {        -webkit-align-content: center;        align-content: center;    }    .center li {        background: deepskyblue;    }    .space-between {        -webkit-align-content: space-between;        align-content: space-between;    }    .space-between li {        background: lightgreen;    }    .space-between li:nth-child(3) {        margin-bottom: 0;    }    .space-around {        -webkit-align-content: space-around;        align-content: space-around;    }    .space-around li {        background: hotpink;    }    .stretch {        -webkit-align-content: stretch;        align-content: stretch;    }    .stretch li {        background: chocolate;        margin-bottom: 4px;        height: auto;    }    .stretch li:nth-child(3) {        margin-bottom: 0;    }    .flex-item {        background: tomato;        margin-bottom: 5px;        width: 160px;        height: 80px;        line-height: 80px;        color: white;        font-weight: bold;        font-size: 1em;        text-align: center;    }</style><div class="container">    <h3>align-items</h3>    <div class="col-md-12">        <div class="col-md-4">            <h4>stretch（拉升至等高）</h4>            <div class="inline-flex-container align-items-stretch" style="background-color: #a8e4ff;">                <div class="element-autoheight">                    <div style="height: 50px;"></div>                </div>                <div class="element-autoheight">                    <div style="height: 100px;"></div>                </div>                <div class="element-autoheight">                    <div style="height: 70px;"></div>                </div>                <div class="element-autoheight">                    <div style="height: 90px;"></div>                </div>            </div>        </div>        <div class="col-md-4">            <h4>baseline（子元素基线对齐）</h4>            <div class=" inline-flex-container align-items-baseline" style="background-color: #a8e4ff;">                <div class="element-autoheight">                    <div style="height: 50px;"></div>                </div>                <div class="element-autoheight">                    <div style="height: 100px;"></div>                </div>                <div class="element-autoheight">                    <div style="height: 70px;"></div>                </div>                <div class="element-autoheight">                    <div style="height: 90px;"></div>                </div>            </div>        </div>        <div class="col-md-4">            <h4>center（子元素垂直居中对齐）</h4>            <div class="inline-flex-container align-items-center" style="background-color: #a8e4ff;">                <div class="element-autoheight">                    <div style="height: 50px;"></div>                </div>                <div class="element-autoheight">                    <div style="height: 100px;"></div>                </div>                <div class="element-autoheight">                    <div style="height: 70px;"></div>                </div>                <div class="element-autoheight">                    <div style="height: 90px;"></div>                </div>            </div>        </div>        <div class="col-md-4">            <h4>flex-end（子元素对齐下边缘）</h4>            <div class="inline-flex-container align-items-flex-end" style="background-color: #a8e4ff;">                <div class="element-autoheight">                    <div style="height: 50px;"></div>                </div>                <div class="element-autoheight">                    <div style="height: 100px;"></div>                </div>                <div class="element-autoheight">                    <div style="height: 70px;"></div>                </div>                <div class="element-autoheight">                    <div style="height: 90px;"></div>                </div>            </div>        </div>        <div class="col-md-4">            <h4>flex-start（子元素对齐上边缘）</h4>            <div class="inline-flex-container align-items-flex-start" style="background-color: #a8e4ff;">                <div class="element-autoheight">                    <div style="height: 50px;"></div>                </div>                <div class="element-autoheight">                    <div style="height: 100px;"></div>                </div>                <div class="element-autoheight">                    <div style="height: 70px;"></div>                </div>                <div class="element-autoheight">                    <div style="height: 90px;"></div>                </div>            </div>        </div>    </div>    <hr class="col-md-12">    <h3>align-self</h3>    <h4>和align-item一样，只不过是应用在子元素上（下面例子：改变align-item样式）</h4>    <div class="inline-flex-container align-items-stretch" style="background-color: #a8e4ff;">        <div class="element-autoheight">            <div style="height: 50px;"></div>        </div>        <div class="element-autoheight">            <div style="height: 140px;"></div>        </div>        <div class="element-autoheight">            <div style="height: 70px;"></div>        </div>        <div class="element-autoheight" style=" -webkit-align-self: flex-end;align-self: flex-end;">            <div style="height: 100px;font-size: 12px;">我本来是拉伸的，现在我和下边缘对齐了</div>        </div>    </div>    <hr class="col-md-12">    <h3>align-content</h3>    <div style="float: left;padding-bottom: 20px;">        <div class="flex-container1 flex-start">            <div class="flex-item">flex-start</div>            <div class="flex-item">flex-start</div>            <div class="flex-item">flex-start</div>        </div>        <div class="flex-container1 flex-end">            <li class="flex-item">flex-end</li>            <li class="flex-item">flex-end</li>            <li class="flex-item">flex-end</li>        </div>        <div class="flex-container1 center">            <li class="flex-item">center</li>            <li class="flex-item">center</li>            <li class="flex-item">center</li>        </div>        <div class="flex-container1 space-between">            <li class="flex-item">space-between</li>            <li class="flex-item">space-between</li>            <li class="flex-item">space-between</li>        </div>        <div class="flex-container1 space-around">            <li class="flex-item">space-around</li>            <li class="flex-item">space-around</li>            <li class="flex-item">space-around</li>        </div>        <div class="flex-container1 stretch">            <li class="flex-item">stretch</li>            <li class="flex-item">stretch</li>            <li class="flex-item">stretch</li>        </div>    </div>    <hr  style="clear: both;">    <h3>justify-content</h3>    <div class="col-md-12">        <h4>flex-start（左边缘对齐）</h4>        <div class="flex-container justify-content-flex-start" style="background-color: #a8e4ff;">            <div class="element-fixedsize">1</div>            <div class="element-fixedsize">2</div>            <div class="element-fixedsize">3</div>            <div class="element-fixedsize">4</div>        </div>        <h4>flex-end（右边缘对齐）</h4>        <div class="flex-container justify-content-flex-end" style="background-color: #a8e4ff;">            <div class="element-fixedsize">1</div>            <div class="element-fixedsize">2</div>            <div class="element-fixedsize">3</div>            <div class="element-fixedsize">4</div>        </div>        <h4>center（居中对齐）</h4>        <div class="flex-container justify-content-center" style="background-color: #a8e4ff;">            <div class="element-fixedsize">1</div>            <div class="element-fixedsize">2</div>            <div class="element-fixedsize">3</div>            <div class="element-fixedsize">4</div>        </div>        <h4>space-between（等间距对齐，左右无间距）</h4>        <div class="flex-container justify-content-space-between" style="background-color: #a8e4ff;">            <div class="element-fixedsize">1</div>            <div class="element-fixedsize">2</div>            <div class="element-fixedsize">3</div>            <div class="element-fixedsize">4</div>        </div>        <h4>space-around（等间距对齐，左右有间距）</h4>        <div class="flex-container justify-content-space-around" style="background-color: #a8e4ff;">            <div class="element-fixedsize">1</div>            <div class="element-fixedsize">2</div>            <div class="element-fixedsize">3</div>            <div class="element-fixedsize">4</div>        </div>    </div>    <hr class="col-md-12">    <h3>子块完全置中(justify-content,align-items)</h3>    <div class="father-container center-container col-md-6">        <div class="center-item"></div>    </div>    <hr class="col-md-12"></div></body></html>
0 0