前端——flex布局

        本来想着每天一更，但开学事情太多了。想着自己好像也不太可能花太多时间去写博客，那就挑一些个人在物联网项目开发中用得多的知识写写哈哈哈。由于只是作为自己学习的记录，所以我的的写作风格比较随性，如有不适，万望担待。

---

目录

前言

一、为什么需要用到flex布局？

二、flex布局

1.基本结构

2.属性介绍

3.简单的代码样例

总结

---

前言

        这里我想介绍一下我手敲前端代码时用得最多的布局——flex，为什么要介绍这个布局呢？其实我个人觉得，在前端页面完全自己手敲的时候 ，一个好的布局会更好地助力你开发。而flex布局明显满足我的开发需求，并且适应多种前端开发情况。

---

一、为什么需要用到flex布局？

        其实以我之前的开发经验，前端页面对于初学者来说比较难处理的问题就是居中，不论是文字居中、水平居中、竖直居中、块居中，还是行内元素居中。居中问题确实是初学者比较难处理的问题。也许有些人会说：我可以用fixed；我可以直接调整元素占用页面比例再减去一半尺寸不也能实现居中吗。诚然，但你还是没考虑兼容不同屏幕的问题。而且，这几种方式实现起来有点麻烦。

二、flex布局

1.基本结构

        Flex对容器适用，同样也适用于行内元素，更不用说块元素了。告诉网页你对该元素开启了flex布局仅需要一行代码：

.test{
    display:flex;
}

 在flex布局中，元素的结构一般有两种排列方式：水平排列；竖直排列。现在以水平排列为例：如图，一个container的容器中有三个元素（div1,div2,div3）要编译器知道你放入container的元素是水平排列的，仅需设置flex-direction这个属性

.container{
    display:flex;
    flex-direction:row;
}

 

2.属性介绍

        在flex中是有两个轴的区分的，当你设置了flex-direction的方向，即默认设置了主轴的方向。 而与主轴垂直的轴方向就是交叉轴。通过设置主轴和交叉轴这两个方向上的元素分布，就可以比较轻松的实现了元素的布局。

这里介绍六个属性：

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

flex-direction 就不赘述了，忘了的请看前面哈哈哈。

flex-wrap

        由于启动了flex布局，假定设置水平排列元素。现在由于元素太多是不是就放不下了，这时候就要考虑要换行的问题。flex-wrap就可以设定是否在元素装满容器时换行。

这里有几个属性值：

• nowrap                       不换行（默认）
• wrap                           换行
• wrap-reverse              换行，第一行在下方

flex-flow

这个是flex-direction和flex-wrap的混合简写形式，默认的格式是：

.container{
    display:flex;
    flex-flow:row wrap;
}

justify-content

定义了元素在主轴上的对齐方式

属性值如下：

• flex-start                     左端与flex容器主轴边缘对齐
• flex-end                      右端与flex容器主轴边缘对齐
• center                         居中
• space-between          两端与flex容器主轴边缘重合对齐
• space-around            flex容器中的每个元素两端空间相等

 align-items

定义项目在交叉轴上的对齐方式

属性值如下：

• flex-start                     左端与flex容器交叉轴边缘对齐
• flex-end                      右端与flex容器交叉轴边缘对齐
• center                         居中
• baseline                     每个元素第一行文字基线对齐
• stretch                       占满容器空间

 align-content

定义多根轴线的对齐方式吗，几乎没用过哈哈哈

这里还有其他的一些属性，我个人不太常用，但还是简单说一下

order                定义项目的排列方式，数值越小排序越靠前

flex-grow         定义项目的放大比例，默认是0

flex-shrink       定义项目的缩小比例

flex-basis        定义项目原本的大小，即主轴的空间

3.简单的代码样例

WXML部分代码

<view class="container">
    <view class="top"></view>
    <view class="application">
        <view class="top_title">申请审核</view>
        <view class="apl_item" >
            <view class="title">STM32借用申请</view>
            <view class="hr"></view>
            <view class="info">
                <view>姓名：小白</view>
                <view>学号：20211113365</view>
                <view>借用时间段：2022.06.01—2022.10.09</view>
                <view class="btn">
                    <button class="button1" bindtap="refuse" data-item="{{item}}">拒绝</button>
                    <button class="button" bindtap="allow" data-item="{{item}}">允许申请</button>
                </view>
            </view>
        </view>
    </view>


</view>

WXSS部分代码

.container{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.top{
    width: 200%;
    height: 800rpx;
    border-radius: 50%;
    background-color: #69C3AA;
    margin-top: -400rpx;
}

.application{
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;   
    z-index: 1100;
    margin: 30rpx;
    margin-top: -350rpx; 
    padding-top: 20rpx;
    border-radius: 20rpx;
    /* border:2px solid green; */
    background-color: rgba(241, 241, 241, 0.795);
}

 

---

总结

        敲了一个多小时总算写完我的第二篇博客了，其实Flex布局在我个人实际的前端开发中应该是比较多的，当然了，现在更多人是使用别人写好的前端模板，在巨人的肩膀上进行前端开发；而在实际的项目部署中，也很少有人使用前端的原生语言傻傻的敲，更多的人采用前端框架来辅助开发。写这篇文章主要是讲一下自己个人学习前端的时候一个有用的布局，当然，类似的前端布局还有grid，只不过我个人在实际开发中很少用罢了。

        再补一句哈哈哈，grid也是很有用的，其实要想更好的理解前端flex、grid布局，盒子模型还是要学好哈哈哈。若有错误，欢迎指正，谢谢。