CSS弹性布局（一）

弹性布局可以用于做响应式页面的制作使用弹性布局需要使用要display里的flex属性例：让一个div是弹性布局，代码如下.div{display:flex;}flex里有很多属性，其中设置在容器上的属性有6个1.flex direction:决定主轴的方向（即项目的排列方向）。...

小栗子的普

4796人浏览 · 2018-12-26 19:28:55

小栗子的普 · 2018-12-26 19:28:55 发布

弹性布局可以用于做响应式页面的制作
使用弹性布局需要使用要display里的flex属性
例：让一个div是弹性布局，代码如下

.div{
	display:flex;
	}

flex里有很多属性，其中设置在容器上的属性有6个

1.flex direction:决定主轴的方向（即项目的排列方向）。

row:主轴为水平方向，起点在左边
例

<head>
    <meta charset="utf-8">
    <title>弹性布局</title>
    <style>
        .div{
            width: 1300px;
            background-color: green;
            height: 200px;
            display: flex;
            flex-direction:row;
        }
        .div1,.div2,.div3{
            width: 300px;
            height: 200px;
        }
        .div1{
            background-color: red;
        }
        .div2{
            background-color: darkcyan;
        }
        .div3{
            background-color: orange;
        }

    </style>
</head>

<body>
<div class="div">
    <div class="div1">one</div>
    <div class="div2">two</div>
    <div class="div3">three</div>
</div>
</body>

效果如下
在这里插入图片描述

row-reverse:主轴为水平方向，起点在右边。

.div{
            width: 1300px;
            background-color: green;
            height: 200px;
            display: flex;
            flex-direction:row;
        }

结果如下
在这里插入图片描述

column:主轴为垂直方向，起点在上沿。
例：

.div{
            width: 1300px;
            background-color: green;
            height: 200px;
            display: flex;
            flex-direction:column;
        }

结果如下
在这里插入图片描述

div的高度被自动压缩

column-reverse:主轴为垂直方向，起点在下沿。
例

.div{
            width: 1300px;
            background-color: green;
            height: 200px;
            display: flex;
            flex-direction:column-reverse;
        }

结果如下图
在这里插入图片描述

2.flex-wrap：一行排不下，如何换行

wrap:换行，第一行在上方
例

 .div{
            width: 100%;
            background-color: green;
            height: 200px;
            display: flex;
            flex-wrap: wrap;
        }

结果如下
在这里插入图片描述

nowrap:不换行
例

.div{
            width: 100%;
            background-color: green;
            height: 200px;
            display: flex;
            flex-wrap: wrap;
        }

结果如下
在这里插入图片描述

div不换行，宽度自动收缩

wrap-reverse:换行，第一行在下方。
例

.div{
            width: 100%;
            background-color: green;
            height: 200px;
            display: flex;
            flex-wrap: wrap-reverse;
            margin-top: 200px;
        }

结果如下
在这里插入图片描述

3.flex-flow：flex-direction属性和flex-wrap属性的简写形式

例

.div{
            width: 100%;
            background-color: green;
            height: 200px;
            display: flex;
            flex-flow: row wrap;
            margin-top: 200px;
        }

4.justify-content:项目在主轴上的对齐方式

flex-start:左端对齐
例

.div{
            width: 100%;
            background-color: green;
            height: 200px;
            display: flex;
            justify-content:flex-start;
            margin-top: 200px;
        }

结果如下
在这里插入图片描述

flex-end:右端对齐
例

.div{
            width: 100%;
            background-color: green;
            height: 200px;
            display: flex;
            justify-content:flex-end;
            margin-top: 200px;
        }

结果如下

在这里插入图片描述

center:居中对齐
例

.div{
            width: 100%;
            background-color: green;
            height: 200px;
            display: flex;
            justify-content:center;
            margin-top: 200px;
        }

结果如下
在这里插入图片描述

-space-around:每个项目两侧的间隔相等
例

.div{
            width: 100%;
            background-color: green;
            height: 200px;
            display: flex;
            justify-content:space-around;
            margin-top: 200px;
        }

结果如下
在这里插入图片描述

-space-between:两端对齐，项目之间的间隔都相等
例

.div{
            width: 100%;
            background-color: green;
            height: 200px;
            display: flex;
            justify-content:space-between;
            margin-top: 200px;
        }

结果如下
在这里插入图片描述

5.align-items:项目在交叉轴上如何对齐

flex-start
例

.div{
            width: 100%;
            background-color: green;
            height: 200px;
            display: flex;
            justify-content:space-between;
            align-item:flex-start;
            
        }

结果如下
在这里插入图片描述

flex-end
例

.div{
            width: 100%;
            background-color: green;
            height: 200px;
            display: flex;
            justify-content:space-between;
            align-item:flex-end;
            
        }

结果如下

在这里插入图片描述

center
例

.div{
            width: 100%;
            background-color: green;
            height: 200px;
            display: flex;
            justify-content:space-between;
            align-item:center;
            
        }

结果如下

在这里插入图片描述

stretch::如果项目未设置高度或设为auto，将占满整个容器的高度。
例

.div{
            width: 100%;
            background-color: green;
            height: 500px;
            display: flex;
            justify-content: space-between;
            align-items: stretch;

        }

结果如下
在这里插入图片描述

baseline:项目的第一行文字的基线对齐。
例

.div{
            width: 100%;
            background-color: green;
            height: 500px;
            display: flex;
            justify-content: space-between;
            align-items: stretch;

        }

在这里插入图片描述

6.align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...