flex

最新推荐文章于 2022-05-03 17:50:26 发布

Venciki

最新推荐文章于 2022-05-03 17:50:26 发布

阅读量329

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_33188421/article/details/98071597

版权

web 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

Flex布局：

一个样例引入flex布局（水平垂直居中）

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .content{
            height: 200px;
            width: 200px;
            background-color: #eee;
            display:flex;
        }
        .item{
            width: 50px;
            height: 50px;
            background-color: white;
            margin:auto;
        }
    </style>
</head>
<body>
    <div class="content">
        <class class="item">
            item
        </class>
    </div>
</body>
</html>

尽管页面怎么拉也不会变。

对子元素直接的影响

修改了display：flex;
会将直接的子元素的 display改成block。

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            display: flex;
        }
    </style>
</head>
<body>
    <div>
    <a href="#">a</a>
    <span>span</span>
    <p>p</p>
    <input type="text">
    <img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
    </div>
</body>
</html>

在这里插入图片描述

父级加了 display：flex；后会消除margin塌陷的问题
清除对浮动的影响，例子：

平时会出现这样的效果：

一个在浏览器的最左边，另一个在浏览器的最右边。
当我们给它的父级加上display：flex时，会有如下的效果（清除了浮动）：

容器和项目

container容器：如果你给一个元素添加了display:flex;，称为这是一个容器。
item项目：容器里卖弄的直接子元素，称为项目。

主轴和交叉轴

主轴：在容器当中，项目（多个）按一定的方向进行排列的。默认时按从左向右的方向进行排列。这里排列的方向就是主轴的方向吗，在容器内部，主轴方向与容器交际的部分为主轴。
交叉轴：与主轴垂直的那个轴。默认是从三个向下的方向。

容器的属性值

flex-direction
1. row:是默认值，从左往右排
2. column:从上往下
3. row-reverse:从右往左
4. column-reverse：从上往下排列

flex-wrap 换行

我们来写这样一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            display: flex;
            width: 500px;
            height: 400px;
            background-color: #ccc;
            flex-direction: row;/*row默认值从左往右，column从上往下,row-reverse从最右边往最左边排。*/

        }
        .item{
            height: 30px;
            width: 200px;
            background-color:#fff;
            border: 1px solid red;
            /* margin: 30px; */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">3</div>
        <div class="item">3</div>
        <div class="item">3</div>
    </div>
</body>
</html>

container的子元素已经一共有6个而且每个的宽度都为200px;,而container本身只有400px，子元素的宽度明显已经超出了父级的宽度，但是我们来看一下效果：
在这里插入图片描述

（主轴方向为水平方向）：

flex-wrap:nowrap; 默认值
flex-wrap默认值是不换行，会压缩每一个项目的宽度。
flex-wrap:wrap; 允许换行，在主轴的方向上换行。
默认的方向是水平从左向右，换行从上向下
flex-wrap:wrap-reverse; 从上往下换行。

（主轴方向为竖直方向）：
flex-wrap:wrap;

由于项目的子元素的高没有超过容器的高，所以不换行。
现在我们把项目的高度改一下

换行及换行的方向是和主轴方向相关的。必须要先知道主轴的方向是什么方向。

flex-flow: 简化代码，是flex-direction与flex-wrap的合写
1. flew-flow:flex-directions flex-wrap;
justify-content:容器内的项目再按主轴方向上进行排列，这个属性决定了项目与项目之间的位置关系。在主轴方向上有富余的空间(项目的宽度之和下雨容器的宽度)，如何去处理富余的空间；
```
  我们来看看他都有那些值及对应的效果：
```
1. justify-content:flex-start;
2. justify-content:flex-end;
3. justify-content:center;
4. justify-content:space-around; /容器很大，项目不足以填充整个容器，所以会有一部分的空白空间/
  /环绕。让项目之间的有相等空间进行环绕/
5. justify-content:space-between; /项目与项目之间的空间是相等的。类似于“两端对齐的效果”/
  
  (注意主轴方向)
align-items : 和（justify-content）差不多项目在交叉轴方向上的摆放位置
取值：strech(默认值) | flext-start | flex-end | center | baseline
align-content :
当容器中有多行项目（当然，前提是允许换行）时，每一行项目就会产生一根主轴，多行项目就会产生多个主轴。这个属性决定着多跟主轴之间的位置关系。

项目的属性值

order

取值：数值；
功能：容器中有多个项目，项目的默认摆放时沿主轴方向，按文档中dom元素的书写顺序进行排列的。order属性用于更改排列顺序。数值越小，越靠前，默认值为0，可以为负数。
flex-grow

取值：数值
功能：放大因子。使用前提：主轴方向上有多余的空间可以让项目去”伸展“。
计算：
1. 统计多余的空间：M = 容器的宽度-所有项目宽度之和
2. 确定均分的份数：N = 项目flex-grow的值之和
3. 计算单位空间 P = M/N
4. 项目放大后的宽度：R = 宽度 + p * 当前flex-grow值
  
  有两个item，第一个设置了flex-grow为1，第二个使用默认值：flex-grow。结果是：如果主轴上有多余的空间，则第一个项目会填充这个空间，而第二个项目又没变化。
结果如下：

对于这个我们来计算一下他的放大后的宽度。 M=500-100-200=200, N=1+0=1, p=200/1=200px, item1=100+2001=300px, item2=200+2000=200px
结论：如果一个项目的flex-grow为0，则它的宽度不会放大
-------- 如果flex-grow越大，说明它在放大后，会得到更多的空间。
-------- 如果flex-grow越小，说明它在放大后，会得到更小的空间。
特别地：如果所有的项目有一样的flex-grow值，它们会等分多余的空间。就是说，放大后的大小 = 自己的大小 + 平均分配的值。
flex-shrink

取值：数值
功能：缩小因子。使用前提：主轴方向上的空间不够，项目被压缩。默认值为1（当容器主轴方向不能容下全部的项目，并且也不哟允许换行，由于flex-shrink 为1，所有的项目都会被压缩。各自被压缩数值是不一样的，如下公式：）
（1）总差值，即需要被压缩的大小：M=容器的宽度-项目的宽度之和
（2）加权和：N =flex-shrink*项目宽度值之和
（3）缩小后的宽度 = 项目值 - 项目值 * flex-shrink /N * M。
结论：
1.项目默认会被缩小（空间不够）.flex-shrink：1
2.Flex-shrink越大，被压缩越多。
3.Flex-shrink越小，被压缩越少。如果flex-shrink=0，不会被压缩。
flex-basis

项目再主轴上占据的大小。默认为auto（主轴是水平方向时就是宽度，主轴时垂直方向时：默认为height值。）
flex

flex属性是flex-grow，flex-shrink 和 flex-basis的间歇，默认值为 0 1 auto。后两个属性可选。该属性有两个快捷值：auto(1 1 auto) 和 none(0 0 auto)。
align-self

取值：auto | flex-start | flex-end | center | baseline | strech
属性允许单个项目有与其他项目不一样的对齐方式，可覆盖容器的align-items属性。

Venciki

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
flex

Flex布局：一个样例引入flex布局（水平垂直居中） <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt...
复制链接

扫一扫