display:flex  设置盒子为伸缩容器

盒子里的子（儿子）元素（块元素，行内，行内块）都变成伸缩项目，一旦成为了伸缩项目，全都会“块状化”

默认主轴

flex-direction:主轴方向

flex-wrap:主轴换行

flex-flow:flex-direction flex wrap 复合属性

主轴对齐：justify-content

侧轴对齐：单行：align-items

                     多行：align-content

flex-direction

改变了主轴的方向，侧轴方向也随之改变。

flex-wrap:主轴换行

 <style>
        .outer {
            width: 300px;
            height: 200px;
            background-color: #888;
            /* 将该元素变为了伸缩容器（开启了flex布局） */
            display: flex;
        }
        .inner {
            width: 50px;
 /* 不设置高度 */
            background-color: skyblue;
            border: 1px solid black;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3 </div>
        <div class="inner">4</div>
        <div class="inner">5</div>
        <div class="inner">6</div>
        
        <div class="inner">7</div>
    </div>
</body>

默认no-wrap

flex-wrap:no-wrap

换行 wrap

flex-wrap:wrap

反向换行

flex-wrap:wrap-reverse

沿着主轴方向排列

flex-flow

复合 flex-direciton 与flex-wrap  无顺序要求

flex-flow:column wrap 

高度有内容撑开

justify-content 主轴对齐方式

1. flex-start ：主轴起点对齐。—— 默认值
2. flex-end ：主轴终点对齐。
3. center ：居中对齐
4. space-between ：均匀分布，两端对齐（最常用）。
5. space-around ：均匀分布，两端距离是中间距离的一半。
6. space-evenly ：均匀分布，两端距离与中间距离一致。

================================================

1. flex-start ：主轴起点对齐。—— 默认值

====================================================

2:flex-end ：主轴终点对齐。

====================================================

3. center ：居中对齐

====================================================

4. space-between ：均匀分布，两端对齐（最常用）。

====================================================

5. space-around ：均匀分布，两端距离是中间距离的一半。

====================================================

6. space-evenly ：均匀分布，两端距离与中间距离一致。

侧轴对齐

1行：align-items

        1. flex-start ：侧轴的起点对齐。
        2. flex-end ：侧轴的终点对齐。
        3. center ：侧轴的中点对齐。
        4. baseline : 伸缩项目的第一行文字的基线对齐。
        5. stretch ：如果伸缩项目未设置高度，将占满整个容器的高度。—— （默认值）

多行：align-content    要先开启flex-wrap:wrap

====================

1行

align-items:flex-start

1行

align-items:flex-end

1行：align-items:center

1行：align-items:baseline    

 伸缩项目的第一行文字的基线对齐。

 <div class="inner" style="font-size: 50px;">x</div>

多行 align-content

flex-wrap:wrap要开启换行

1. flex-start ：与侧轴的起点对齐。
2. flex-end ：与侧轴的终点对齐。
3. center ：与侧轴的中点对齐。
4. space-between ：与侧轴两端对齐，中间平均分布。
5. space-around ：伸缩项目间的距离相等，比距边缘大一倍。
6. space-evenly : 在侧轴上完全平分。
7. stretch ：占满整个侧轴。—— 默认值

多行 align-content:flex-start

flex-wrap:wrap要开启换行

多行 align-content:flex-end

flex-wrap:wrap要开启换行

多行 align-content:center;

flex-wrap:wrap要开启换行

多行 align-content:space-between;

flex-wrap:wrap要开启换行

多行 align-content:space-around ;

flex-wrap:wrap要开启换行

多行 align-content:space-evenly;

flex-wrap:wrap要开启换行

多行 align-content:stretch;

flex-wrap:wrap要开启换行

父容器设置高度

子元素不设置高度，让其拉伸填错父容器

# css3
Logo
向您推荐>>Eolink开发者社区

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

更多推荐

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

企业级ELK Stack构建介绍

avatar 云原生

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

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

avatar 云原生

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

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

avatar 云原生