2021-最后一天-2022-第一天-赶出-flex-布局-个人见解

最新推荐文章于 2024-04-25 17:53:36 发布

风车菊

最新推荐文章于 2024-04-25 17:53:36 发布

阅读量1k

点赞数

分类专栏：前端修炼文章标签：前端

本文链接：https://blog.csdn.net/qq_46931134/article/details/122765878

版权

前端修炼专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、与flex的缘分

暑假在家，闲的没事，在家里面没有啥事，就把在学校里面的一个想法，付诸于实践，想做一个跑腿软件，面向使用者为我们的在校的大学生，又因为，现在都在去重客户端，把一个个的app都改为了小程序，所以我就想者做一个跑腿的微信小程序，先后花费了几天设计架构，但是在之前我都是使用别人的模板设计我的程序，后端自己写，但是这个有时间，就想着突破一下自己，自己设计UI，自己设计布局，但是这就难为我这个后端狗了，在网上查找资料，得知微信官方推荐使用flex布局设计小程序，索性就学习了felx布局了，一学不知道，flex布局真的太香了，简单移动，代码少，快速成型，极端的时间内就可以搭建出完美的布局，特写此文，记录一下felx的牛掰之处。

二、我学习flex布局时的学习资料

阮一峰的网络日志：下面是我第一次接触 flex的敲门砖，撬开了我的布局脑回路
[flex布局教程：语法篇]: https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[flex布局教程：实例篇]: https://www.ruanyifeng.com/blog/2015/07/flex-examples.html
结合下面的pink老师的flex布局教程，得道于此处，感谢pink老师
[pink老师 flex 教程]: https://www.bilibili.com/video/BV14J4114768?p=415

三、网上到处都在的 flex介绍+本人见解

1、起源

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

2、flex布局是啥？？

flex 是英文单词 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

flex 正向她描述的一样，可以很好的适应屏幕的变化，非常的灵活，简单移动，就是非常弹性，又在可控范围之间，非常适合我这种，对前端布局不是很敏感的人，使用flex，很快就搭建出了布局样式。

3、flex优点

因为咱是个小白，只有学习和简单的使用经验，不敢高谈阔论flex布局与其他布局的对比，对他们下评论，站在小白的角度了，简单说两句，学习flex就因为他简单，干净，好理解，不像浮动，定位那么复杂，可以更好的入手，我建议新手（是那些，不是很懂css布局，但是又想自己手动搭建出一个布局的人，很急的人）可以优先学习这个flex布局。

4、一山不容二虎

因为我们的flex 布局是一个布局方案，写法类似如下，需要使用display属性，指定我们的容器使用flex布局，那么浮动，定位等布局方案就要失效，不起作用了，可以看出flex布局可以直接覆盖我们的浮动定位等布局， 即设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

    <style>
        .container {
            display: flex;
        }
    </style>
</head>
<body>
    <div class="container">
        
    </div>
</body>

5、flex 布局两个简单概念

**容器（container）：**相信各位都学过盒子模型，可以理解为容器就是个盒子，盒子布局是一个个的盒子，flex 是一个个容器构成，不多叨叨。

**项目（item）：**使用flex布局后，容器的子元素都会变成我们的项目 item ，自动化的行为，而且，所有的子元素都自动转换为块级元素，即使a标签也会自动变成块级元素。

    <style>
        .container {
            display: flex;
            background-color: pink;

            width: 400px;
            height: 200px;
        }

        .item {
            border: 1px solid red;
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <a class="item" href="#">a标签演示</a>
    </div>
</body>

在这里插入图片描述

四、走进容器

基于容器和项目的概念，我们可以继续往下学习。。

1、容器的平面图

主轴：也可以叫做x轴（个人理解），只有一个，便于指定flex-item的布局

侧轴（交叉轴）：同理也叫做y轴（个人理解），可以有多个或1个，同理，个人习惯一个一个flex容器，可以避免很多不必要的麻烦。

main-size: 表示项目再主轴上站的空间大小，即项目的宽度，默认为auto，即项目原来大小，使用这个我们可以设置某个元素，不放大，不缩小，固定位置。

cross-size: 同理为项目再侧轴上的大小，即项目的高度，默认为auto，即项目原来大小

注意: main-size,其实也就决定该项目再该行列站多大比例

2、容器的属性

总共有六个属性来设置我们的容器

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

2.1、flex-direction

 .container {
            display: flex;
            flex-direction: row | row-reverse | column | column-reverse;
        }

这个很好理解，就是决定我们的主轴的位置，即项目的排列方向，侧轴会更具主轴位置自动变换

存在四个值：

row（默认值）：主轴水平方向从左到右
在这里插入图片描述

row-reverse：主轴水平方向从右到左

在这里插入图片描述

column：主轴竖直向下

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gbgZmGRx-1643717729316)(C:\Users\Alkaid\AppData\Roaming\Typora\typora-user-images\image-20220131151656326.png)]$

column：主轴竖直向上

2.2 、flex-wrap

.container {
	 background-color: pink;
	 width: 300px;
     height: 200px;
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap || warp || warp-reseve;
    }

决定我们item项目，在一行上排列不下时，是否维持原状不缩小，换行

有三个属性值：

nowrap（默认）：不换行 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-El7V8e6z-1643717729317)(C:\Users\Alkaid\AppData\Roaming\Typora\typora-user-images\image-20220131152256308.png)]$
wrap：换
wrap-reverse：换行，但是换行到第一行，倒着来

2.3、flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

2.4、justify-content（重要）

justify-content属性定义了项目在主轴上的对齐方式，啥意思？？？

其实就是当我们一排项目，在一行时，我们的项目如何分配这一行的空间位置，就是使用这个属性控制

默认在主轴的起点对齐

.container{
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start：主轴开始位置对齐
flex-end: 主轴结束位置对齐
center：项目在主轴中间排列，向两边散去（比较常用）
space-between：项目在主轴上，第一个项目和最后一个项目分别start -end排列，剩下的空间，由剩下的项目平分排列（两端对齐，项目之间的间隔都相等。）
space-around：项目在主轴上，平均分配（每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。）

学习到这，是不是感觉布局变得很简单，div行级元素，位置变得很好控制，简单的几行代码，好了，下面会变的更简单，再学习一个控制侧轴上的排列顺序，哈哈，优先级排序，二改变一的位置，即再学习一下侧轴上项目的排列

2.5、align-items（重要）针对只存在一个交叉轴的情况

.container{
    align-items: flex-start | flex-end | center | baseline | stretch
}

flex-start,flex-end，center同上属性

在这里插入图片描述

baseline：项目的第一行文字的基线对齐。不常用
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

2.6、align-content 针对多个交叉轴设置位置

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

五、深入项目 item

1、浅浅了解

一下六个属性是设置再我们的flex容器的flex-item中的

order
flex-grow
flex-shrink
flex-basis
flex
align-self

2、order 顺序控制

<div class="container">
        <div class="item" style="order: 9;">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>

order顾名思义就是就是排序意思，用在我们的项目上就是指定我们项目再排列时，谁在前，谁在后

因为我们flex布局再布局时，默认排序就是我们写的标签先后顺序，但是我们可以使用order属性手动控制项目展示的位置顺序
在这里插入图片描述

3、flex-grow 放大控制

定义了项目的放大比例，默认为 0，啥意思里，就是我们一行排列项目结束后，还存在很多的剩余空间，但是就剩下了，因为项目默认不放大，但是一旦我们指定数字 1 ，表示剩余的空间分出一份给该项目

eg：一旦所有项目都指定flex-grow为1，就剩下的空间，所有项目放大平均分配

.item {

      border: 1px solid red;

      width: 50px;

      height: 50px;

      margin: 5px 5px;

      flex-grow: 1;

    }

在这里插入图片描述

eg：一个设置为1，另外一个项目设置为2，剩下的空间分为三份，一个项目分1分，一个项目分2份，放大，剩下项目，不放大

  <div class="container">
        <div class="item" style="flex-grow: 1;">1</div>
        <div class="item" style="flex-grow: 2;">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>

在这里插入图片描述

4、flex-shrink 控制缩小

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

同上：

eg：所有项目都设置flex-shrink为1的话，就会等比例缩小

.container {
            background-color: pink;
            width: 800px;
            height: 200px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .item {
            border: 1px solid red;
            width: 400px;
            height: 50px;
            margin: 5px 5px;
        }

在这里插入图片描述
eg：一个项目flex-shrink为0，即不缩小，其他默认，即默认的项目等比例缩小

<div class="container">
        <div class="item">1</div>
        <div class="item" style="flex-shrink: 0;">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>

在这里插入图片描述

5、flex-basis 控制项目再主轴上的大小

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

6、flex 重要，常用(剩下的空间分几份)

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

flex ：1 表示 1 1 auto

flex： 2 表示 2 1 auto

都后期，我们可以直接使用 flex 属性来分配所有的空间，完全程度使用我们的空间大小。

eg：所有项目平均分配空间

.container {
            background-color: pink;
            width: 800px;
            height: 200px;
            display: flex;
        }

.item{

	flex:1;

}

在这里插入图片描述
eg：flex ： 0 0 30%

表示不放大，不缩小，无论屏幕放大或缩小，站固定比例30%

7、即为子，也可为父

我们的flex容器中的项目的布局方式也是可以使用flex布局，也就是说，一个元素既可以时项目也可以是容器的根节点。

.container {
            background-color: pink;
            width: 800px;
            height: 300px;
            display: flex;
            flex-direction: column;

        }
/*
	item 也是使用flex 布局
*/
  .item {
            border: 1px solid red;
            height: 50px;
            margin: 5px 5px;
            display: flex;
        }

六、flex常用布局方式

1、网格布局

1.1、基本网格布局等比例划分

最简单的布局方式，每行都是一个flex容器，每行里面的项目的flex属性为1，即可以放大和缩小，平均分配空间

在这里插入图片描述

<style>
        .container {
            background-color: pink;
            width: 800px;
            height: 300px;
            display: flex;
            flex-direction: column;

        }

        .item {
            border: 1px solid red;
            height: 50px;
            margin: 5px 5px;
            display: flex;
        }

        .item-item {
            border: 1px solid #aaa;
            margin: 5px 5px;
            text-align: center;
            line-height: 30px;
        }

        .row-2-1 {
            flex: 1;
        }

        .row-3-1 {
            flex: 1;
        }

        .row-4-1 {
            flex: 1;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1 style="text-align: center;">等比例划分</h1>
        <div class="item">
            <div class="item-item row-2-1">1/2</div>
            <div class="item-item row-2-1">1/2</div>
        </div>
        <div class="item">
            <div class="item-item row-3-1">1/3</div>
            <div class="item-item row-3-1">1/3</div>
            <div class="item-item row-3-1">1/3</div>
        </div>
        <div class="item">
            <div class="item-item row-4-1">1/4</div>
            <div class="item-item row-4-1">1/4</div>
            <div class="item-item row-4-1">1/4</div>
            <div class="item-item row-4-1">1/4</div>
        </div>
    </div>
</body>

1.2、百分比布局

某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。

当一行的项目都是百分比布局时，我们可以允许项目缩小和放大

固定大小比例时，就要要求项目不放大，也不缩小

但是我们本人更喜欢使用flex属性，指定我们项目分配剩下位置的大小，即flex ：1；flex：1；flex：4；

即剩下的项目分为六分，两个项目各占1份，另外一个项目占4份，因为允许放大和缩小，非常弹性。

在这里插入图片描述

 		.row-30 {
            flex: 0 0 30%;
        }

        .row-40 {
            flex: 1 1 40%;
        }

 <div class="container">
        <h1 style="text-align: center;">百分比划分</h1>
        <div class="item">
            <div class="item-item row-2-1">1/2 auto</div>
            <div class="item-item row-2-1">1/2 auto</div>
            <div class="item-item row-30">30%</div>
        </div>
        <div class="item">
            <div class="item-item row-30">30%</div>
            <div class="item-item row-40">40%</div>
            <div class="item-item row-30">30%</div>
        </div>

    </div>

2、圣杯布局

圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏

在这里插入图片描述

<style>
        .container {
            background-color: pink;
          
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
// 分1份
        .header {
            background-color: red;
            flex: 1;
        }
// 分1份
        .footer {
            background-color: red;
            flex: 1;
        }
// 分四份
        .main {
            display: flex;
            flex-direction: row;
            flex: 4;
        }

        .main-left {
            background-color: greenyellow;
            flex: 0 0 25%;
        }

        .main-center {
            background-color: blue;
            flex: 0 0 50%;
        }

        .main-right {
            background-color: greenyellow;
            flex: 0 0 25%;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">头部</div>
        <div class="main">
            <div class="main-left">mian-left</div>
            <div class="main-center">main-center</div>
            <div class="main-right">main-right</div>
        </div>
        <div class="footer">尾部</div>
    </div>
</body>

</html>

3、输入框布局

我们常常需要在输入框的前方添加提示，后方添加按钮，有时提示内容或者输入框时固定大小的等等，使用flex做很简单。

可以让我们的提示信息和按钮按照原来大小布局设置好，再把剩下的空间给输入框即flex：1；

在这里插入图片描述

 <style>
        .InputAddOn {
            display: flex;

            background-color: pink;
        }

        .InputAddOn-field {
            flex: 1;
        }
    </style>
</head>

<body>
    <div class="InputAddOn">
        <span class="InputAddOn-item">提示内容</span>
        <input class="InputAddOn-field">
        <button class="InputAddOn-item">点击按钮</button>
    </div>
</body>

4、底部，始终再最下面flex解决方案

有时候我们的，主体内容比较少，就会导致我们的底部导航栏，跑到上面去，这时我们可以使用flex布局，把底部始终固定再底部
项目排列完毕后，再把剩下的空间都分给主体部分，即flex：1；即可完美解决问题

七、参考资料

风车菊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-最后一天-2022-第一天-赶出-flex-布局-个人见解

一、与flex的缘分暑假在家，闲的没事，在家里面没有啥事，就把在学校里面的一个想法，付诸于实践，想做一个跑腿软件，面向使用者为我们的在校的大学生，又因为，现在都在去重客户端，把一个个的app都改为了小程序，所以我就想者做一个跑腿的微信小程序，先后花费了几天设计架构，但是在之前我都是使用别人的模板设计我的程序，后端自己写，但是这个有时间，就想着突破一下自己，自己设计UI，自己设计布局，但是这就难为我这个后端狗了，在网上查找资料，得知微信官方推荐使用flex布局设计小程序，索性就学习了felx布局了，一学
复制链接

扫一扫