flex

Flex

所谓布局

使用代码控制页面中的每一个元素，按照设计图的样子在网页中进行排布

宏观布局与微观布局

宏观布局

宏观布局指的是我们观察一个网页的设计图，从设计图中发现一个网页从上至下可以分为几个部分

宏观布局的一个原则

当我们通过观察设计图进行网页内容区域的划分时，应尽量保证将一个具有独立功能或者含有独特意义的部分视作为一个网页的区域

微观布局

我们通过宏观将网页划分为多个独立的区域后，再对每个区域进行更为细致的观察。将每个区域的设计细节视作为组成这个区域的元素

block、inline与inline-block

在HTML标签的显示方式可以分为三种：块级元素（block）、行内元素（inline）和行内块元素（inline-block）

块级元素block

在HTML中div标签就是一个典型的块级元素，它的特点是：

1. 默认占有网页中一行的内容
2. 可以设置宽高
3. margin和padding的上下左右均对其有效
4. 多个块状元素标签写在一起，默认排列方式为从上至下

行内元素inline

在HTML的标签中，满足以下条件就是一个行内元素

1. 设置宽高无效，默认为元素内容宽高
2. 对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
3. 不会自动进行换行

行内块元素inline-block

如果想用让一个元素既可以设置宽高，又可以让其在一行内排列。可以将其设置为行内块元素

Flex布局

基本概念

flex意为：flexible box（弹性盒子）

在使用flex布局先要了解两个基本概念

1. flex container：flex容器

2. flex item：flex项目

从上面的两个概念中不难看出，想要使用flex布局，就必须要给需要布局的元素套一个父元素

使用flex消除元素块状属性

在上面的内容中我们发现，将div的显示方式设置为inline-block后，可以将块级元素并排显示。那我们如何使用flex布局来实现同样的功能呢？答案就是将块级元素的父元素设置为弹性容器

<view class="container">
    <view class="chunk color1">内容1</view>
    <view class="chunk color2">内容2</view>
    <view class="chunk color3">内容3</view>
</view>

.container {
    display: flex;
}

.chunk{
    width: 100px;
    height: 100px;
}

.color1 {
    background-color: red;
}

.color2 {
    background-color: green;
}

.color3 {
    background-color: blue;
}

上面代码的显示结果为

flex-direction的应用

1. flex-direction: column; 纵向排列
   

   <view class="container">
       <view class="chunk color1">内容1</view>
       <view class="chunk color2">内容2</view>
       <view class="chunk color3">内容3</view>
   </view>
   

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

2. flex-direction: rwo; 横向排列
   

   <view class="container">
       <view class="chunk color1">内容1</view>
       <view class="chunk color2">内容2</view>
       <view class="chunk color3">内容3</view>
   </view>
   

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

3. flex-direction: column-reverse; 纵向反向排列
   

   <view class="container">
       <view class="chunk color1">内容1</view>
       <view class="chunk color2">内容2</view>
       <view class="chunk color3">内容3</view>
   </view>
   

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

4. flex-direction: row-reverse; 横向反向排列
   

   <view class="container">
       <view class="chunk color1">内容1</view>
       <view class="chunk color2">内容2</view>
       <view class="chunk color3">内容3</view>
   </view>
   

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

主轴与交叉轴

在flex布局中有两个非常重要的概念就是主轴与交叉轴，但是主轴与交叉轴并没有一个固定的取值。

• 当我们通过设置flex-direction: row将元素的排列状态置位横向排列，那么此时x轴为主轴，y轴为交叉轴
• 当我们通过设置flex-direction: column将元素的排列状态置位纵向排列，那么此时y轴为主轴，x轴为交叉轴

为什么要确定轴

当我们正确的确定了主轴和交叉轴以后，就可以使用justify-content与align-items对flex item进行排列

justify-content

justify-content用于确定如何对主轴上的flex item进行排列，常用取值有：

• justify-content: center;

  • 主轴元素居中排列
    
    

• justify-content: flex-start;

  • 主轴元素以父元素起始位进行排列

• justify-content: flex-end;

  • 主轴元素以父元素末尾位进行排列

• justify-content: space-around;

  • 主轴元素等距分布

• justify-content: space-between;

  • 主轴首位两个元素顶边，其余元素平均分配剩余空间

align-items

align-items用于确定如何对交叉轴上的flex item进行排列，常用的取值有

• align-items: center;

  • 交叉轴元素居中排列

• align-items: flex-start;

  • 交叉轴元素以父容器起始位进行排列

  
  

• align-items: flex-end;

  • 交叉轴元素以父容器末尾进行排列

• align-items: stretch;

  • 当x轴为主轴时，且不给元素设置高度。此时如果设置align-items: stretch;，那么元素的高度为父容器高度