前言

  flex弹性布局是最重要、最常用和最特殊的display，独特到有一堆为它单独服务的属性。并且常用到甚至可以单独拿一篇博客单独讲它。可说是有了flex可以满足90%的布局需求，它的核心思想就是弹性，可以通过它去动态调整内部子元素的位置。

flex的基本属性

CSS 中提供了以下属性来实现 Flex 布局：

排列方式flex-direction

flex-direction 属性用来决定主轴的方向（即项目的排列方向），属性的可选值如下

row

wxml

<!--pages/main/main.wxml-->
<view class="myParentBox">
    <view class="myChildBox">内容A</view>
    <view class="myChildBox">内容B</view>
    <view class="myChildBox">内容C</view>
    <view class="myChildBox">内容D</view>
    <view class="myChildBox">内容F</view>
</view>

wxss

Page {
    width: 100%;
    height: 100%;
    background-color: gray;
}

.myParentBox {
    width: 100%;
    height: 100%;
    background-color: grey;
    display: flex;
    /* 这里将flex-direction 设置成 row */
    flex-direction: row	;
}

.myChildBox {
    width: 50px;
    height: 50px;
    margin: 5px;
    background-color: greenyellow;
}

效果图

row-reverse

 

column

column-reverse 

 

内容换行flex-wrap 

值	描述
nowrap	不换行
wrap	换行
wrap-reverse	从后到前换行
inherit	从父元素继承此属性的值
initial	将此属性设置为属性的默认值
unset	未设置

nowrap

wxml

<view class="myParentBox">
    <view class="myChildBox">内容A</view>
    <view class="myChildBox">内容B</view>
    <view class="myChildBox">内容C</view>
    <view class="myChildBox">内容D</view>
    <view class="myChildBox">内容F</view>
    <view class="myChildBox">内容G</view>
    <view class="myChildBox">内容H</view>
    <view class="myChildBox">内容I</view>
    <view class="myChildBox">内容J</view>
    <view class="myChildBox">内容K</view>
    <view class="myChildBox">内容L</view>
</view>

wxss

Page {
    width: 100%;
    height: 100%;
    background-color: gray;
}

.myParentBox {
    width: 100%;
    height: 100%;
    background-color: grey;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.myChildBox {
    width: 50px;
    height: 50px;
    margin: 5px;
    background-color: greenyellow;
}

效果图

 

wrap

wrap-reverse

横轴对齐方式justify-content

值	描述
flex-start	默认值，左对齐
flex-end	右对齐
center	居中
space-between	两端对齐，项目之间的间隔是相等的
space-around	每个项目两侧的间隔相等
initial	将此属性设置为属性的默认值
inherit	从父元素继承属性的值

flex-start

wxml

<view class="myParentBox">
    <view class="myChildBox">内容1</view>
    <view class="myChildBox">内容2</view>
    <view class="myChildBox">内容3</view>
    <view class="myChildBox">内容4</view>
</view>

wxss

Page {
    width: 100%;
    height: 100%;
    background-color: gray;
}

.myParentBox {
    width: 100%;
    height: 100%;
    background-color: grey;
    display: flex;
    /* justify-content 设置成flex-start */
    justify-content: flex-start;
}

.myChildBox {
    width: 50px;
    height: 50px;
    background-color: greenyellow;
}

效果图

center

space-between 

space-around

flex-grow属性 用于item的宽度或者高度的均分

 效果图：

 这里关注 取消 与 确定 按钮的宽度均分

.wxml

      <view class="dialogButtonParent">
        <view bindtap="onClickCancel" class="dialogButton1">取消</view>
        <view class="dialogLine2"/>
        <view bindtap="onClickPositive" class="dialogButton2">确定</view>
      </view>

.wxss

.dialogButtonParent{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100rpx;
}

.dialogLine2{
  width: 2px;
  height: 100%;
  background-color: #FFFFFF;
}

.dialogButton1{
  text-align: center;
  color: white;
  background-color: #212121;
  line-height: 100rpx;
  border-bottom-left-radius: 50rpx;
  flex-grow: 1;
}

.dialogButton2{
  height: 100rpx;
  text-align: center;
  background-color: #212121;
  color: tomato;
  line-height: 100rpx;
  border-bottom-right-radius: 50rpx;
  flex-grow: 1;
}

将取消按钮的flex-grow 设置为2的效果

flex-basis 属性

flex-basis其实就是width或者height（取决于你设置的display）两者的功能一样。但是flex-basis设置后width或者height就会失效

box-sizing 属性

首先box-sizing是在子元素里添加的属性

你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。 而box-sizing属性可以让你不用考虑 border 或 padding的 数值影响宽高。

• content-box 是默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
• border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

效果图：

 上面可以看到在添加了box-sizing: border-box; 属性后，边框与实际设置的宽度为一体的，不额外增加border的宽度

代码

.childView1 {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: tomato;
    color: white;
    flex-basis: 100px;
    box-sizing: content-box;
    border: 10px solid greenyellow;
    margin: 5px;

}

.childView2 {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: tomato;
    color: white;
    flex-basis: 100px;
    box-sizing: border-box;
    border: 10px solid greenyellow;
    margin: 5px;
}

.childView3 {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: tomato;
    color: white;
    flex-basis: 100px;
    border: 10px solid greenyellow;
    margin: 5px;
}

flex-flow 将flex-direction与flex-wrap组合在一起简写


你可以将两个属性 flex-direction 和 flex-wrap 组合为简写属性 flex-flow。第一个指定的值为 flex-direction ，第二个指定的值为 flex-wrap.

.myFlexView {
    display: flex;
    flex-flow: row wrap;
    justify-content:center;
}

End

本栏目推荐文章
• Flex&Bison
• 解释flex: 1 1 0%;flex: 1 1 auto;flex: 0 1 auto;flex: none;
• 移动端最新布局处理
• 基于k8s Deployment的弹性扩缩容及滚动发布机制详解
• 202401102331 -《Flex9格布局——从1到9》
• day33 Istio弹性(超时&重试)和故障注入 （10.6）
• Flex布局解决最后一行左对齐
• EasyMR：为 AI 未来赋能，打造弹性大数据引擎的革命
• 如何使用Vue实现响应式布局
• 前端系列：基于 Flex 弹性布局详解

弹性 布局 flex前端 弹性 布局flex 弹性 布局flex 弹性 布局 文件flex 弹性 布局display flex 弹性 布局expanded flex 弹性 布局css3 flex 布局 弹性flex vue 弹性flex 弹性flex css 布局flex