flex简介——css

文章目录flex(弹性盒、伸缩盒)浮动的高度塌陷弹性盒弹性容器定义弹性容器属性flex-direction主轴：弹性元素的排列方向称为主轴侧轴（辅轴）：和主轴垂直的方向称为侧轴flex-directionflex-flowjustify-contentalign-items所以设置弹性容器子元素居中的方法align-content与align-content对应的align-self弹性元素的属性

_洋

4696人浏览 · 2022-04-19 09:06:52

_洋 · 2022-04-19 09:06:52 发布

flex(弹性盒、伸缩盒)

flex弹性盒、伸缩盒，是css中的又一种布局手段，它主要用来代替浮动来完成页面的布局。

浮动会有很多缺陷：如父元素塌陷等。
flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变

浮动的高度塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 800px;
            border:10px rgb(214, 144, 144) solid; 
        }
        li{
            width: 100px;
            height: 100px;
            background-color: cadetblue;
            font-size: 50px;
            text-align: center;
            float: left;
        }
        li:nth-child(2){
            background-color: coral;
        }
        li:nth-child(3){
            background-color: darkgreen;
        }

    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    
</body>
</html>

在这里插入图片描述

弹性盒

弹性容器

定义

要使用弹性盒，必须先将一个元素设置为弹性容器
我们通过display来设置弹性容器
可选值：

display: flex设置为块级弹性容器
display :inline-flex设置为行内的弹性容器
区别是：块级弹性容器会独占一行，行内的弹性容器不会独占一行。

设置为弹性容器，里面的元素就会像浮动的效果排列成一行，不同的是felx不会使元素脱离文档流，就不会有高度塌陷等问题。

弹性容器属性

flex-direction

flex-direction指定容器中弹性元素的排列方式
可选值:

row 默认值，弹性元素在容器中水平排列（左向右)
row-reverse弹性元素在容器中反向水平排列(右向左)
column弹性元素纵向排列（自上向下）
column-reverse弹性元素方向纵向排列（自下向上）

主轴：弹性元素的排列方向称为主轴

即可以利用flex-direction指定主轴方向

row ：从左向右
row-reverse ：从右向左
column：从上向下
column-reverse：从下向上

侧轴（辅轴）：和主轴垂直的方向称为侧轴

在这里插入图片描述

flex-wrap

flex-wrap：设置弹性元素是否在弹性容器中自动换行
可选值：

nowrap 默认值,元素不会自动换行
wrap元素沿着辅轴方向自动换行
wrap-reverse元素沿着辅轴反方向换行

flex-flow

flex-direction和flex-wrap的简写，及可以指定主轴方向，有可以指定是否换行。
eg：

flex-direction: row;
flex-wrap: wrap;

相当于

 flex-flow: row wrap;

justify-content

如何分配主轴上的空白空间（主轴上的元素如何排列)

小tips: justify表示主轴上的排列；align表示辅轴上的分布
可选值;
flex-start元素沿着主轴起边排列（空白留在右侧）
flex-end 元素沿着主轴终边排列（空白留在左侧）
center元素居中排列（空白平均留在两边）
space-around空白分布到元素两侧
space-between空自均匀分布到元素间
space-evenly空白分布到元素的单侧

align-items

align-items元素在辅轴上如何对齐-元素间的关系
-可选值:
stretch默认值，将元素的长度设置为相同的值。长度不够的进行拉伸
即每行的长度分别相同，不同行的长度可以不一样。不同行的长度 = 元素的本身长度 + 被分配的空白的长度（被分配的空白的长度 = 空白总长度/元素行数）
在这里插入图片描述

flex-start元素不会拉伸，沿着辅轴起边对齐

在这里插入图片描述

flex-end 沿着辅轴的终边对齐
center居中对齐
baseline基线对齐，文字的基线是在一行的

所以设置弹性容器子元素居中的方法

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

align-content

align-content辅轴空白空间的分布
可选值：

flex-start元素沿着辅轴起边排列（空白留在下侧）
flex-end 元素沿着辅轴终边排列（空白留在左侧）
center 元素居中排列（空白平均留在上下两边）
space-around空白分布到元素上下两侧
space-between空自均匀分布到元素间
stretch 空白分布到元素的单侧（默认值），也通常说成空白在辅轴上被拉伸以填满容器。

与align-content对应的align-self弹性元素的属性

注意align-self是弹性元素的属性，它用来覆盖当前弹性元素上的align-items
eg：
单独为1设置align-self。
在这里插入图片描述

弹性元素

弹性容器的子元素是弹性元素（弹性项)，注意只有孩子，没有后代。
只有孩子是弹性元素，后代不算。
弹性元素可以同时是弹性容器。

弹性元素属性

flex-grow

flex-grow指定弹性元素的伸展的系数，即当父元素有多余空间的时,子元素如何伸展。

父元素的剩余空间,会按照flex-grow指定的比例进行分配。
flex-grow 取值：
0：表示不伸长
1，2，3：其他正整数，数据越大说明伸长越长。
如果都为同一个数，则都伸长相同的长度。——默认情况
如果为不同的数则按照数的大小进行比例分配

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 800px;
            border:10px rgb(214, 144, 144) solid; 
            display: flex;
            flex-direction: row;
        }
        li{
            width: 100px;
            height: 100px;
            background-color: cadetblue;
            font-size: 50px;
            text-align: center;
        }
        li:nth-child(1){
            flex-grow: 1;
        }
        li:nth-child(2){
            background-color: coral;
            flex-grow: 2;
        }
        li:nth-child(3){
            background-color: darkgreen;
            flex-grow: 3;
        }

    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    
</body>
</html>

在这里插入图片描述

flex-shrink

flex-shrink指定弹性元素的收缩系数

当父元素中的空间不足以容纳所有的子元素时，对子元素进行收缩。
flex-shrinl 取值：
0：表示不收缩
1，2，3：其他正整数，数据越大说明收缩越大。
如果都为同一个数，则都收缩相同的长度。——默认情况
如果为不同的数则按照数的大小进行比例分配。

补充：
缩减系数的计算方式比较复杂，缩减多少是根据缩减系数和元素大小来计算。
不一定缩减系数大锁的就多，有元素大小和缩减系数共同决定缩减的大小。
一般情况下，缩减系数越大，元素越大缩减的就越多。

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 200px;
            border:10px rgb(214, 144, 144) solid; 
            display: flex;
            flex-direction: row;
        }
        li{
            width: 100px;
            height: 100px;
            background-color: cadetblue;
            font-size: 50px;
            text-align: center;
        }
        li:nth-child(1){
            flex-shrink: 1;
        }
        li:nth-child(2){
            background-color: coral;
            flex-shrink: 2;
        }
        li:nth-child(3){
            background-color: darkgreen;
            flex-shrink: 3;
        }

    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    
</body>
</html>

在这里插入图片描述

flex-basis

flex-basis 指的是元素在主轴上基础长度。
如果主轴是模向的则该值指定的就是元素的宽度
如果主轴是纵向的则该值指定的是就是元素的高度
可选值：

默认值是 auto，表示参考元素自身的高度或宽度（width或heigth）
如果传递了一个具体的数值，则以该值为准

即：flex-basis和width、heigth是冲突的，但是优先级比 width、heigth 高，如果他有值就按他来，如果它没值就按width、heigth来。
eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 800px;
            border:10px rgb(214, 144, 144) solid; 
            display: flex;
        }
        li{
            width: 200px;
            height: 100px;
            font-size: 50px;
            text-align: center;
            line-height: 100px;

            flex-basis: 100px;
        }
        li:nth-child(1){
             background-color: cadetblue;
        }
        li:nth-child(2){
            background-color: coral;
        }
        li:nth-child(3){
            background-color: darkgreen;
        }

    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    
</body>
</html>

在这里插入图片描述

合并使用 flex

按弹簧来说：flex-basis相当于弹簧的基本长度，flex-shrink相当于弹簧的收缩长的，flex-grow相当于弹簧的拉伸长度。

flex可以设置弹性元素所有的三个样式
格式：flex: 增长缩减基础;
有默认设定好的值，也可以自己设置值。默认设定好的3个值：

initial “flex:0 1 auto”
auto “flex: 1 1 auto”
none "flex: 0 0 auto”——弹性元素没有弹性

order

通过order可以指定弹性元素的排列顺序。
eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 800px;
            border:10px rgb(214, 144, 144) solid; 
            display: flex;
        }
        li{
            width: 200px;
            height: 100px;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
        }
        li:nth-child(1){
             background-color: cadetblue;
             order:3;
        }
        li:nth-child(2){
            background-color: coral;
             order:2;
        }
        li:nth-child(3){
            background-color: darkgreen;
             order:1;
        }

    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    
</body>
</html>

在这里插入图片描述

练习

导航条

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./reset.css">
    <style>
        .nav{
            width: 1210px;
            height: 48px;
            line-height: 48px;
            margin: 50px auto;
            background-color: #e8e8e8;
            display: flex;
        }
        .nav li{
            flex-grow: 1;
        }
        .nav a{
            display: block;
            color: #808080;
            text-decoration: none;
            font-size: 16px;
            text-align: center;
        }
        .nav a:hover{
            color: #fff;
            background-color: #636363;
        }
        
    </style>
  </head>
  <body>
    <ul class="nav">
      <li><a href="#">HTML/CSS</a></li>
      <li><a href="#">Browser Side</a></li>
      <li><a href="#">Server Side</a></li>
      <li><a href="#">Programming</a></li>
      <li><a href="#">XML</a></li>
      <li><a href="#">Web Building</a></li>
      <li><a href="#">Reference</a></li>
    </ul>
  </body>
</html>

在这里插入图片描述

淘宝导航栏

补充

打开移动端的方法：
打开开发者工具->点击手机图标
在这里插入图片描述
-> 选择手机型号，再刷新即可

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            width: 100%;
        }
        .nav .inner{
            display: flex;
            justify-content: space-around;
            margin-bottom: 10px;
        }
        .item{
            /* flex:auto; */
            width: 18%;
            text-align: center;
        }
        .item img{
            width: 100%;
        }
        .item a{
            color: #333;
            text-decoration: none;
            font-size: 18px;
        }
    </style>
</head> 
<body>
    <!--  -->
    <div class="nav">
        <div class="inner">
            <div class="item">
                <a href="#"><img src="https://gw.alicdn.com/imgextra/i4/O1CN01XCiY1B1px9ivHkDGm_!!6000000005426-2-tps-183-144.png" alt=""></a>
                <span>天猫新品</span>
            </div>
            <div class="item">
                <a href="#"><img src="https://gw.alicdn.com/imgextra/i3/O1CN01FgQFp81spmBXqQMtA_!!6000000005816-2-tps-183-144.png" alt=""></a>
                <span>今日爆款</span>
            </div>
            <div class="item">
                <a href="#"><img src="https://gw.alicdn.com/imgextra/i1/O1CN01tsk5OY1q0MUo5PJga_!!6000000005433-2-tps-183-144.png" alt=""></a>
                <span>天猫国际</span>
            </div>
            <div class="item">
                <a href="#"><img src="https://gw.alicdn.com/imgextra/i2/O1CN01yK3Cxn1sTnAx1fOjq_!!6000000005768-2-tps-183-144.png" alt=""></a>
                 <span>飞猪旅行</span>
            </div>
            <div class="item">
                <a href="#"><img src="https://gw.alicdn.com/imgextra/i1/O1CN01iZIGkz1URSOUdRHqS_!!6000000002514-2-tps-183-144.png" alt=""></a>
                 <span>天猫超市</span>
            </div>
        </div>
         <div class="inner">
            <div class="item">
                <a href="#"><img src="https://gw.alicdn.com/imgextra/i1/O1CN018Ilnep1Qt9ryh1Vue_!!6000000002033-2-tps-183-144.png" alt=""></a>
                 <span>淘宝吃货</span>
            </div>
            <div class="item">
                <a href="#"><img src="https://gw.alicdn.com/imgextra/i2/O1CN01gUIFrA1OuPj70aTIW_!!6000000001765-2-tps-183-144.png" alt=""></a>
                 <span>省钱卡</span>
            </div>
            <div class="item">
                <a href="#"><img src="https://gw.alicdn.com/imgextra/i3/O1CN013WcsZW1jfr4AXnmVl_!!6000000004576-2-tps-183-144.png" alt=""></a>
                 <span>淘金币</span>
            </div>
            <div class="item">
                <a href="#"><img src="https://gw.alicdn.com/imgextra/i2/O1CN01ZOR1cv1yjGFORGh1V_!!6000000006614-2-tps-183-144.png" alt=""></a>
                 <span>阿里拍卖</span>
            </div>
            <div class="item">
                <a href="#"><img src="https://gw.alicdn.com/tfs/TB1WgOmesieb18jSZFvXXaI3FXa-183-144.png?getAvatar=1" alt=""></a>
                 <span>分类</span>
            </div>
        </div>
    </div>

    
</body>
</html>

在这里插入图片描述

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

云原生

所有评论(0)

查看更多评论

_洋

@mantou_riji

已为社区贡献1条内容