CSS学习（二十）-flexbox模型

最新推荐文章于 2024-03-08 18:05:09 发布

bwshqh

最新推荐文章于 2024-03-08 18:05:09 发布

阅读量1.5k

点赞数

分类专栏： css css学习

本文链接：https://blog.csdn.net/bwshqh/article/details/50989483

版权

css学习同时被 2 个专栏收录

22 篇文章 2 订阅

订阅专栏

css

21 篇文章 0 订阅

订阅专栏

一、理论：
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>