目录

弹性盒子

声明定义：
使用display：flex或display：inline-flex 声明一个容器为弹性盒子。这个容器中的子元素们，会遵循弹性布局。

【注】display:flex;  设置为块级弹性盒  独立成行
display:inline-flex;  设置行内快弹性盒

flex:如果没有为父元素设置宽，默认为100%；
inline-flex：如果没有设置宽，，默认为所有子元素的宽的和。
在这里插入图片描述在这里插入图片描述

实例知识:让三个div居中叠在一起
父元素设置弹性盒子属性并设置相对定位
子元素全部绝对定位

.content {
        width: 1200px;
        height: 600px;
        background-color: teal;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .bo {
        position: absolute;
    }

在这里插入图片描述

text-align: center;

只对行内/行内块元素会生效

flex-direction 排列方向

用于设置盒子中的子元素的排列方向。
row 从左到右水平排列子元素（默认值）
column 从上往下垂直排列子元素
row-reverse 从右到左排列子元素
column-reverse 从下往上垂直排列子元素 row 从左到右水平排列子元素（默认值）
row-reverse
在这里插入图片描述在这里插入图片描述
可以看到内容也会反过来
123会变成321

flex-direction 排列方向的轴就是主轴，所以它可以是横的也可以是竖的

flex-wrap规定是否换行

规定flex容器是单行还是多行，是否换行
nowrap:不换行（默认值）
wrap：换行
wrap-reverse 反向换行。

flex-flow
是flex-direction与flex-wrap的组合写法。
flex-flow:flex-direction属性 flex-wrap属性；

           flex-flow: row nowrap;（左到右，换行）

弹性盒子与弹性元素
弹性盒子：指的是使用display：flex或display：inline-flex声明的容器。
弹性元素：指的是弹性盒子中的子元素。
主轴与侧轴（交叉轴）
主轴方向：为子元素排列的方向。可以通过flex-direction改变。
侧轴方向：与主轴方向垂直，为子元素的换行方向。可以通过flex-wrap改变。

justify-content主轴排列

用于控制弹性元素在主轴上的排列方式。
flex-start 元素紧靠主轴的起点（默认值）
flex-end 元素紧靠主轴的终点。
center 元素在主轴上居中。
space-between 第一元素紧靠起点，最后一个元素紧靠终点，余下的元素平均分配剩余空间。
space-around 每个元素两侧的间隔相等。元素之间的间隔比元素与容器边框的间隔要大一倍。
space-evenly 元素间距平均分配

flex-start 元素紧靠主轴的起点（默认值）在这里插入图片描述flex-end 元素紧靠主轴的终点。
在这里插入图片描述
center 元素在主轴上居中。
在这里插入图片描述当改变主轴时也可以垂直居中
在这里插入图片描述
space-between 第一元素紧靠起点，最后一个元素紧靠终点，余下的元素平均分配剩余空间。
在这里插入图片描述 space-around 每个元素两侧的间隔相等。元素之间的间隔比元素与容器边框的间隔要大一倍。
在这里插入图片描述

space-evenly 元素间距平均分配在这里插入图片描述
这些移动顺序只是盒子的排列，不会干扰内容，原来是1234还是1234

align-items侧轴排列方式

控制元素在侧轴上的排列方式。
多行单行都适用的属性。
flex-start 从侧轴开始的地方对齐
flex-end 从侧轴结束的地方对齐
center 中间对齐
stretch 拉伸 没有设置侧轴方向上的宽/高时，等于父盒子的宽或高。

align-content
控制元素在侧轴上的排列方式。只适用于多行显示的弹性容器。
stretch 拉伸
flex-start 元素紧靠行的起点
flex-end 元素紧靠行的终点
center 元素在行中居中
space-between 第一个元素紧靠行的起点，最后一个元素紧靠行的终点，余下元素平均
分配剩余空间
space-around 元素在侧轴方向上的间隔相等。
space-evenly 元素间距离平均分配

flex-start 从侧轴开始的地方对齐
在这里插入图片描述
flex-end 从侧轴结束的地方对齐
在这里插入图片描述 center 中间对齐
在这里插入图片描述stretch 拉伸 没有设置侧轴方向上的宽/高时，等于父盒子的宽或高。

在这里插入图片描述 space-between 第一个元素紧靠行的起点，最后一个元素紧靠行的终点，余下元素平均
分配剩余空间
在这里插入图片描述

单个元素的

align-self-侧轴排列

单个元素在侧轴上的排列方式。 align-self

弹性元素：
不要再去设置float。
设置完绝对定位后，该元素就不再是弹性元素了，不参与弹性布局。
弹性元素均为块级元素。

    align-self:
        用于控制单个元素在侧轴上的排列方式。
        stretch 拉伸
        flex-start元素紧靠行的起点
        flex-end元素紧靠行的终点
        center元素在行中居中

flex-end元素紧靠行的终点在这里插入图片描述

在这里插入图片描述

flex-grow放

用于将弹性盒子的可用空间，按照比例分配给弹性元素。

在这里插入图片描述

flex-shrink缩

在弹性盒子装不下子元素时，对子元素缩小的比例设置。
在这里插入图片描述

flex-basis

大部分情况下与宽度相等。优先级比宽要高。定义了元素在主轴上的空间。

在这里插入图片描述

flex: auto

flex:auto 是根据内容的大小来分，不是平的（除非内容都是一样，才平分）

  <style>
    .wrap {
      height: 100px;
      display: flex;
    }
    .box {
      border: 2px solid yellowgreen;
      flex: auto;
    }
  </style>
  <body>
    <div class="wrap">
      <div class="box">挪威的森林</div>
      <div class="box">让我走进你的梦里</div>
      <div class="box">测试数据测试数据测试数据</div>
    </div>
  </body>

在这里插入图片描述

flex: 1

flex:1 不管内容多少，一般都是平分空间，空间大小都一致

  <style>
    .wrap {
      height: 100px;
      display: flex;
    }
    .box {
      border: 2px solid yellowgreen;
      flex: 1;
    }
  </style>
  <body>
    <div class="wrap">
      <div class="box">挪威的森林</div>
      <div class="box">让我走进你的梦里</div>
      <div class="box">测试数据测试数据测试数据</div>
    </div>
  </body>

在这里插入图片描述

order

用于控制弹性元素的位置。默认为0，数值越小越靠前。
在这里插入图片描述

【注】
1.文本节点也可以被弹性布局操作。
2.绝对定位的元素不参与弹性布局。
在这里插入图片描述
在这里插入图片描述

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

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

更多推荐

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

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

avatar 云原生

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

企业级ELK Stack构建介绍

avatar 云原生

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

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

avatar 云原生