CSS学习（二十）-flexbox模型

Posted 2020-06-29 bwshqh

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS学习（二十）-flexbox模型相关的知识，希望对你有一定的参考价值。

一、理论：
1.混合版本flexbox模型
a.display
1)flexbox 设置元素为块级容器
2)inline-flexbox 设置元素为内联块伸缩容器
b.display容器的基本使用
1)主要用于IE10浏览器
2.伸缩流方向flex-direction
a.flex-direction
1)row ltr-->自左向右排列，rtl-->自右向左排列
2)row-reverse ltr-->自右向左排列，rtl-->自左向右排列
3)column 按出现顺序从上到下排列
4)column-reverse 伸缩项目从下到上排列
二、实践：

(注：1，2，3是伸缩布局盒，4，5是flexbox模型)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="screen">
        *{
            margin: 0;
            padding: 0;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        #header,#footer{
            width:100%;
            padding:10px;
            background-color:#ccc;
        }
        #sidebar-left,
        #sidebar-right{
            width:220px;
            padding:10px;
            background-color: #123589;
        }
        #main{
            background-color: #9eaab6;
            padding: 10px;
            margin : 0 10px;
        }
        #page{
            width:100%;
            display:-moz-box;
            display:-webkit-box;
            display:box;
        }
        #main{
            -moz-box-flex: 1;
            -webkit-box-flex:1;
            -moz-box-flex: 1;
        }
    </style>
</head>
<body>
    <div id = "header">
        <h1>Header</h1>
    </div>
    <div id = "page">
        <div id="main">
            <h1>MainContent</h1>
        </div>
        <div id="sidebar-left">
            <h1>LeftContent</h1>
        </div>
        <div id="sidebar-right">
            <h1>RightContent</h1>
        </div>
    </div>
    <div id="footer">
        <p>footer</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="screen">
        *{
            margin: 0;
            padding: 0;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        #header,#footer{
            width:100%;
            padding:10px;
            background-color:#ccc;
        }
        #sidebar-left,
        #sidebar-right{
            width:220px;
            padding:10px;
            background-color: #123589;
        }
        #sidebar-right{
            -moz-box-ordinal-group: 2;
            -webkit-box-ordinal-group: 3;
            -moz-box-ordinal-group: 3;
        }
        #main{
            background-color: #9eaab6;
            padding: 10px;
            margin : 0 10px;
            -moz-box-flex:1;
            -webkit-box-flex:1;
            box-flex:1;
            -moz-box-ordinal-group: 2;
            -webkit-box-ordinal-group: 2;
            box-ordinal-group:2;
        }
        #page{
            width:100%;
            display:-moz-box;
            display:-webkit-box;
            display:box;
        }
        #main{
            -moz-box-flex: 1;
            -webkit-box-flex:1;
            -moz-box-flex: 1;
        }
    </style>
</head>
<body>
    <div id = "header">
        <h1>Header</h1>
    </div>
    <div id = "page">
        <div id="main">
            <h1>MainContent</h1>
        </div>
        <div id="sidebar-left">
            <h1>LeftContent</h1>
        </div>
        <div id="sidebar-right">
            <h1>RightContent</h1>
        </div>
    </div>
    <div id="footer">
        <p>footer</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="screen">
        body{
            height: 100%;
            display: -webkit-box;
            display:-moz-box;
            display:box;
            -moz-box-orient: vertical;
            -webkit-box-orient:vertical;
            box-orient:vertical;
            width:100%;
        }
        *{
            margin: 0;
            padding: 0;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-box-sizing:border-box;
        }
        #header,#footer{
            width:100%;
            padding:10px;
            background-color:#ccc;
        }
        #sidebar-left,
        #sidebar-right{
            width:220px;
            padding:10px;
            background-color: #123589;
        }
        #sidebar-right{
            -moz-box-ordinal-group: 3;
            -webkit-box-ordinal-group: 3;
            box-ordinal-group: 3;
        }
        #main{
            background-color: #9eaab6;
            padding: 10px;
            margin:0 10px;
            -moz-box-ordinal-group: 2;
            -webkit-box-ordinal-group: 2;
            -moz-box-group: 2;
        }
        #page{
            width:100%;
            display:-moz-box;
            display:-webkit-box;
            display:box;
        }
        #main{
            -moz-box-flex: 1;
            -webkit-box-flex:1;
            -moz-box-flex: 1;
        }
    </style>
</head>
<body>
    <div id = "header">
        <h1>Header</h1>
    </div>
    <div id = "page">
        <div id="main">
            <h1>MainContent</h1>
        </div>
        <div id="sidebar-left">
            <h1>LeftContent</h1>
        </div>
        <div id="sidebar-right">
            <h1>RightContent</h1>
        </div>
    </div>
    <div id="footer">
        <p>footer</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="screen">
        *{
            margin:0;
            padding: 0;
        }
        .flexbox-container{
            padding:10px;
            border:1px solid hsla(120,30%,50%,0.8);
            margin:50px;
            background-color: hsla(10,80%,10%,0.2);
        }
        .flexbox-container >div{
            width: 100%;
            height: 100px;
            border:1px solid hsla(120,30%,50%,0.8);
            margin: 5px;
            font-size:20px;
            text-align: center;
            line-height: 100px;
            color:#fff;
            font-weight: bold;
        }
        .flexbox-container > div:nth-child(1){
            background-color: hsla(120,30%,50%,0.8);
        }
        .flexbox-container > div:nth-child(2){
            background-color: hsla(120,30%,10%,0.8);
        }
        .flexbox-container > div:nth-child(3){
            background-color: hsla(20,30%,50%,0.8);
        }
        .flexbox-container > div:nth-child(4){
            background-color: hsla(20,80%,50%,0.8);
        }
        .flexbox-container > div:nth-child(5){
            background-color: hsla(320,80%,50%,0.8);
        }
        .flexbox-container > div:nth-child(6){
            background-color: hsla(320,80%,50%,0.8);
        }
        .flexbox-container{
            display: ms-flexbox;
            -ms-flex-direction: row;
        }
    </style>
</head>
<body>
    <div class="flexbox-container">
        <div>Box1</div>
        <div>Box2</div>
        <div>Box3</div>
        <div>Box4</div>
        <div>Box5</div>
        <div>Box6</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="screen">
        *{
            margin:0;
            padding: 0;
        }
        .flexbox-container{
            padding:10px;
            border:1px solid hsla(120,30%,50%,0.8);
            margin:50px;
            background-color: hsla(10,80%,10%,0.2);
        }
        .flexbox-container >div{
            width: 100%;
            height: 100px;
            border:1px solid hsla(120,30%,50%,0.8);
            margin: 5px;
            font-size:20px;
            text-align: center;
            line-height: 100px;
            color:#fff;
            font-weight: bold;
        }
        .flexbox-container > div:nth-child(1){
            background-color: hsla(120,30%,50%,0.8);
        }
        .flexbox-container > div:nth-child(2){
            background-color: hsla(120,30%,10%,0.8);
        }
        .flexbox-container > div:nth-child(3){
            background-color: hsla(20,30%,50%,0.8);
        }
        .flexbox-container > div:nth-child(4){
            background-color: hsla(20,80%,50%,0.8);
        }
        .flexbox-container > div:nth-child(5){
            background-color: hsla(320,80%,50%,0.8);
        }
        .flexbox-container > div:nth-child(6){
            background-color: hsla(320,80%,50%,0.8);
        }
        .flexbox-container{
            display:-ms-flexbox;
            -ms-flex-direction:column;
        }
    </style>
</head>
<body>
    <div class="flexbox-container">
        <div>Box1</div>
        <div>Box2</div>
        <div>Box3</div>
        <div>Box4</div>
        <div>Box5</div>
        <div>Box6</div>
    </div>
</body>
</html>

以上是关于CSS学习（二十）-flexbox模型的主要内容，如果未能解决你的问题，请参考以下文章

css 粘性页脚片段（来源：treehouse flexbox课程）

css 此代码将删除WordPress库图像周围的边框，并将布局模型更改为CSS flexbox。

Java学习总结（二十四）——前端：CSS样式设计（CSS引入，选择器，盒子模型，浮动元素）

CSS3弹性盒模型flexbox布局基础版

css3弹性盒模型（Flexbox）

深入了解 Flexbox 伸缩盒模型