移动WEB开发----flex父级常用属性

男娘i 2023-07-02 14:25 10阅读 0赞

## 主轴与侧轴 ##

> 在flex布局中，是分为主轴和侧轴两个方向即x轴和y轴。  
> 默认主轴是x轴 行 row，侧轴是y轴 列 column ；我们的元素是根据主轴来排列的。

## flex父级常见属性 ##

**1. flex-direction：设置主轴方向**

flex-direction:row;
    //设置x轴为主轴（从左到右）
    
    flex-direction:row-reverse;
    //翻转（从右到左），简单了解
    
    flex-direction:column;
    //设置y轴为主轴
    
    flex-direction:column-reverse;
    //从下到上

**2. justify-content：设置主轴上的子元素排列方式**

justify-content:flex-start;
    //默认值从头部开始 如果主轴是x轴，则从左到右
    justify-content:flex-end;
    //从尾部开始排列
    justify-content:center;
    //在主轴居中对齐
    justify-content:space-around;
    //平分剩余空间
    justify-content:space-between;
    //先两边贴边 再平分剩余空间 （这个重要）

**3. flex-wrap：设置子元素是否换行**

*flex布局中，默认的子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面*

flex-wrap:nowrap;
    //默认值，不换行
    flex-wrap:wrap;
    //换行

**4. align-content：设置侧轴上的子元素排列方式（多行）**

align-content:flex-start;
    //默认值在侧轴的头部开始排列
    align-content:flex-end;
    //在侧轴的尾部开始排列
    align-content:center;
    //在侧轴中间显示
    align-content:space-around;
    //子项在侧轴平分剩余空间
    align-content:space-between;
    //子项在侧轴先分布在两头，再平分剩余空间
    align-content:stretch;
    //设置子项元素高度平分父元素高度

**5. align-items：设置侧轴上的子元素排列方式（单行）**

align-items:flex-start
    //默认值，从上到下
    align-items:flex-end;
    //从下到上
    align-items:center;
    //挤在一起居中（垂直居中）
    align-items:stretch;
    //拉伸

**6. flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap**

flex-flow:row wrap;