flex布局学习笔记

（1）flex-shrink属性：flex-shrink属性默认值为1，当子元素宽度超过父元素时，会自动缩小子元素，否则不会自动缩小子元素，导致子元素超过父元素宽度。（4）使用nth-child()设置元素宽度：理论上将元素一设置为其他元素宽度的100倍，但是这里没有实现，因为要保证容器内元素可读，所以其他元素至少为最小宽度。（3）使用nth-child()设置某个元素的宽度：这里将第一个元素的宽

清风铃作响�

1979人浏览 · 2024-07-03 17:21:55

清风铃作响� · 2024-07-03 17:21:55 发布

教学视频来自25分钟彻底弄懂CSS Flex基础布局 / CSS Flex 入门教程_哔哩哔哩_bilibili

一、前置代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="container">
        <div class="item">item 1111111</div>
        <div class="item">item 2</div>
        <div class="item">item 3</div>
        <div class="item">
            item 4<br />
            item 4<br />
            item 4<br />
        </div>
        <div class="item">item 5</div>
    </div>
</body>
</html>

.container {
    border: 1px dashed black;
    width: 500px;
}
.item{
    background-color: cornflowerblue;
    border: 1px dashed black;
    border-radius: 10%;
}

二、flex元素的自动宽度

（1）将container设置为flex布局

.container{
    display: flex;
}

（2）取消flex布局，并将item设置为最大宽度（显示宽度元素的最大宽度为限）

.container{
    /* display: flex; */
}
.item{
    width: max-content;
}

（3）增加代码。当元素宽度超过父元素的宽度时，子元素的宽度默认为min-content（以元素中最长的单词为限）

<div class="item">
        Wife: You see. According to the statistics on the paper, 80% of those
        who have died of liver cancer have drunk alcohol. Husband: It's okay. To
        my investigation, all these people eat meals.
</div>
<div class="item">
        Wife: You see. According to the statistics on the paper, 80% of those
        who have died of liver cancer have drunk alcohol. Husband: It's okay. To
        my investigation, all these people eat meals.
</div>
<div class="item">
        Wife: You see. According to the statistics on the paper, 80% of those
        who have died of liver cancer have drunk alcohol. Husband: It's okay. To
        my investigation, all these people eat meals.
</div>
<div class="item">
        Wife: You see. According to the statistics on the paper, 80% of those
        who have died of liver cancer have drunk alcohol. Husband: It's okay. To
        my investigation, all these people eat meals.
</div>

.container{
    display: flex;
}

三、flex元素的增大逻辑

（1）flex-basis属性：设置元素的宽度为50px。

.container{
    display: flex;
}
.item{
    flex-basis: 50px;
}

（2）flex-grow属性：每个元素都占了50px，剩余250px的空间，将这些空间平分为5份，每个元素再多占一份。

.container{
    display: flex;
}
.item{
    flex-basis: 50px;
    flex-grow: 1;
}

（3）使用nth-child()设置某个元素的宽度：这里将第一个元素的宽度设置为50px+6/10*剩余空间的大小，剩余空间元素1分到6份，其他元素各分到1份。

.container{
    display: flex;
}
.item{
    flex-basis: 50px;
    flex-grow: 1;
}
.item:nth-child(1){
    flex-grow: 6;
}

（4）使用nth-child()设置元素宽度：理论上将元素一设置为其他元素宽度的100倍，但是这里没有实现，因为要保证容器内元素可读，所以其他元素至少为最小宽度。

.container{
    display: flex;
}
.item{
    flex-basis: 0px;
    flex-grow: 1;
}
.item:nth-child(1){
    flex-grow: 100;
}

可通过手动设置将元素宽度设置为0px，从而达到目的。

.container{
    display: flex;
}
.item{
    flex-basis: 0px;
    width: 0px;
    flex-grow: 1;
}
.item:nth-child(1){
    flex-grow: 100;
}

四、flex元素的缩小逻辑

（1）flex-shrink属性：flex-shrink属性默认值为1，当子元素宽度超过父元素时，会自动缩小子元素，否则不会自动缩小子元素，导致子元素超过父元素宽度。

.container{
    display: flex;
}
.item{
    flex-shrink: 0;
    flex-basis: 200px;
}

（2）flex属性：flex中包含的值分别是grow shrink basis。默认值分别是0，1，auto。
简写：flex: 1=flex: 1 1 auto

flex: 1 100px=flex: 1 1 100px

flex: 1 1=flex: 1 1 auto

flex: initial=flex: 0 1 auto

flex: auto=flex: 0 1 auto

flex: none=flex: 0 0 auto

等分： flex: 1 0px=flex: 1 1 0px。0px是因为flex要保证元素可读性，每个元素的最小宽度为该元素中最大不可拆分的单词的宽度，为了保证等分，需要先将元素的宽度设置为0.

五、flex容器的交叉轴对齐

(1)align-items为行高属性,当值为stretch时,将元素设置为与最高的元素同高.

.container{
    display: flex;
    width: 500px;
    align-items: stretch;
}

(2)align-items:flex-start:将元素设置在起点对齐,flex-end设置为在终点对齐.flex-center在中间对齐.

.container{
    display: flex;
    width: 500px;
    align-items: flex-start;
}

align-items: baselin设置将元素在文字基线处对齐

.container{
    display: flex;
    width: 500px;
    align-items: baseline;
}
.item:nth-child(1){
    font-size: 36px;
}

(3)justify-content属性:flex-start在主轴起点对齐.

flex-end在主轴终点对齐

center在主轴中间对齐

.container{
    display: flex;
    width: 500px;
    justify-content: flex-start;
}
.item:nth-child(1){
    font-size: 36px;
}

justify-content: space-between,收尾顶格,中间平分.

.container{
    display: flex;
    width: 500px;
    justify-content: space-between;
}
.item:nth-child(1){
    font-size: 36px;
}

justify-content: space-around;中间空间是两边空间的2倍

.container{
    display: flex;
    width: 500px;
    justify-content: space-around;
}
.item:nth-child(1){
    font-size: 36px;
}

justify-content: space-evenly;两边和中间的一致

六、flex元素的换行

(1)使用flex-wrap属性进行设置.当属性值为nowrap时,不进行换行.

.container{
    display: flex;
    width: 500px;
    height: 300px;
    flex-wrap: nowrap;
}
.item{
    flex-basis: 200px;
}

当值为wrap时,自动换行

wrap-reverse,逆转排序并换行

七、flex元素直接的多轴换行

align-content属性进行控制.默认值normal.

.container{
    display: flex;
    width: 500px;
    height: 300px;
    flex-wrap: wrap;
    align-content: normal ;
}
.item{
    flex-basis: 200px;
}

值为flex-start,从交叉轴开始对齐

值为flex-end,从交叉轴结束对齐

值为space-around,顶部和底部的距离为中间距离的一半

值为space-between,首尾无空隙中间平分

值为space-evenly,首尾,中间平分

八、补充内容

（1）设置元素在盒子中按水平和垂直方式居中对齐：

将item设置为flex布局方式，从而使用flex布局实现item中的内容在横轴和纵轴上居中的效果。

主要作用代码为

align-items: center;
justify-content: center;

.container {
  width: 500px;
  display: flex;
}
.item {
    /* 将item设置为flex布局方式 ，从而使用flex布局实现item中的内容在横轴和纵轴上居中的效果*/
  display: flex;
  flex-basis: 120px;
  align-items: center;
  justify-content: center;
}

向您推荐>>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启动容器后自动退出...