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全生命周期开发者社区

更多推荐

沃云统一开发平台介绍

沃云集成平台研发平台介绍1.平台优势2.平台原理3.研发平台使用方法4.遇到的问题5.现阶段实现的功能6.后续需要补充的功能和优化内容研发平台介绍1.平台优势解决孤岛式应用，实现能力共享；现有系统框架过于复杂，跨系统业务处理成本居高不下，协同服务共享，降低运维成本；提高项目应用资源监控能力，改善资源利用率；业务微服务化，快速发布、快速部署，快速响应业务需求变化；沃云平台不仅提供了自动化的、可快速部

avatar 云原生

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

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

avatar 云原生

基于docker的test-containers环境百宝箱

笔者语录： 我开了个公众号【Java你我他】，欢迎大家关注。  在很多时候，程序猿们更关注代码本身，而不愿意把时间花费在环境搭建上，这也是Docker变得越来越受欢迎的原因之一。test-containe是Docker生态圈中的一颗新星，其 主要针对测试领域、背靠Docker实现环境百宝箱功能。  test-containers： 你要的环境，我都有~  假设我们现在需要一个redis-clust

avatar 云原生