CSS学习（二十一）-flexbox模型之二

时间：2016-03-29 06:20:48 阅读：236 评论：0 收藏：0 [点我收藏+]

一、理论：
1.flex-flow
a.flex-direction 设置伸缩容器的伸缩流方向
b.flex-wrap 设置伸缩容器中的伸缩项目在伸缩容器无足够空间时，伸缩项目在伸缩容器中是否换行排列
2.flex-pack
a.具有与box-pack属性相同的参数
b.distribute 伸缩项目会平均分布在同一行里
c.start 伸缩容器中的第一个伸缩项目的起始边缘置于伸缩容器的主轴起始；下一个伸缩项目的起始边缘与第一个伸缩项目的末尾边缘紧挨在一起，其他伸缩项目依次沿着主轴依次排列。伸缩容器沿着布局轴方向的所有额外空间都被置于布局轴的末尾
d.end 所起效果与start相反
e.center 所有伸缩项目边挨边放置在一起
f.justify 所有伸缩项目会平均分配在行里，沿着伸缩容器布局轴方向的任何额外空间都被平均分布于各个伸缩项目之间
3.flex-align
a.具有box-align的所有属性
b.stretch 伸缩项目拉伸填充整个伸缩容器。
二、实践：

<!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;
            -ms-flex-flow: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: 50px;
            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%,80%,0.8);
        }
        .flexbox-container{
            display: -ms-flexbox;
            -ms-flex-flow: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>
</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: 100px;
            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 wrap;
            -ms-flex-flow:baseline;
        }
    </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>

三、其它：

1.以上三个都没有实现效果。不知哪位朋友知道原因前来指教一下。十分感谢：）

CSS学习（二十一）-flexbox模型之二

原文：http://blog.csdn.net/bwshqh/article/details/51002560

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)