css弹性布局

作者: 糖醋里脊120625 | 来源:发表于2019-07-31 17:43 被阅读0次

从浅入深全面了解CSS3弹性盒布局模型
[读]响应式布局：CSS3弹性盒flex布局模型
前端学习路径，细化分讲。加深新手对前端技术的认知
CSS flex弹性盒子布局
CSS3 弹性盒子(Flex Box)
div+css3弹性盒子(flex box)布局
Flex布局
CSS3弹性盒布局方式
CSS3弹性盒布局方式
CSS3 弹性盒子

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    width: 450px;
    height: 300px;
    background-color:#b7cf9b;
}
.flex-item {
    background-color:pink;
    width: 100px;
    height: 100px;
    margin: 25px;
}



<div class="flex-container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
</div>

完整demo

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
    *{
        margin:0;
        padding:0;
    }
    div>div{
        width:100px;
        height:100px;
        line-height:100px;
        border:1px solid;
        text-align:center;
        margin:10px;
    }
    #box{
        display:-moz-box;
        display:-webkit-box;
        display:-ms-flexbox;
        display:-webkit-flex; 
        display:flex;     
        border:1px solid;
        margin:20px;
    }
    /*自动铺平评分的样式*/
    #inline{            
        display:-moz-inline-box;
        display:-webkit-inline-box;
        display:-ms-inline-flexbox;
        display:-webkit-inline-flexbox;
        display:inline-flex;
        border:1px solid;
        margin:20px;
    }
</style>
</head>
<body>
    <div id="box">
        <div>A</div>
        <div>B</div>
        <div>C</div>
        <div>D</div>
    </div>
    <div id="inline">
        <div>A</div>
        <div>B</div>
        <div>C</div>
        <div>D</div>
    </div>
</body>
</html>