Flex布局使用

---

前言

个人为前端小白，对于前端的学习为使用层面；对于flex这里只记录了用到的属性，没有更加深入。可以访问参考链接等等。

---

一、什么是Flex

Flex 全称 Flexible box 布局模型，通常称为 flexbox 或 flex，也称为弹性盒子或弹性布局。一种比较高效率的 css3 布局方案。
flex 有两根轴线，分别是主轴和交叉轴，主轴的方向由 flex-diretion 属性控制，交叉轴始终垂直于主轴。
容器为项目的分布提供的空间，轴线则控制项目的排列跟对齐的方向， flex 是一种一维的布局，一个容器只能是一行（左右）或者一列（上下），通过主轴控制项目排列的方向（上下/左右），交叉轴配合实现不同的对齐方式。有时候一行放不下，可以实现多行的布局，但是对于 flex 来说，新的一行就是一个新的独立的 flex 容器。

二、具体使用

初始样式：

<div id="app">
    <div class="f1">f1</div>
    <div class="f2">f2</div>
    <div class="f3">f3</div>
</div>

<style> .f1, .f2, .f3 {
    
        width: 150px;
        background-color: pink;
    }
    .f2 {
    
        height: 100px;
        flex-grow: 30%;
        background-color: aqua;
    }
    .f3 {
    
        height: 150px;
        background-color: rgb(99, 248, 122);
    }
</style>

• 在父容器上添加flex属性

#app {
    
   /* 排列的对齐方式由flex决定，block,float, vertical-algin等失效 */
    display: flex; 
}

• 当不给f2容器提供height的时候, 子容器会自动膨胀到和父容器相同的高度

.f2 {
    
    flex-grow: 30%;
    background-color: aqua;
}

• flex-direction可以改变容器的排列顺序，默认是row,表示从左至右进行排序；flex-wrap表示是否支持换行，默认为nowrap，此时当容器width总和超过父容器，不换行而是对子容器进行压缩

#app {
    
  /* 排列的对齐方式由flex决定，block,float, vertical-algin等失效 */
    display: flex; 
    /* 当容器水平中的item超过范围不会换行，而是压缩变小 */
    /* 改变主轴容器的排列顺序 */
    /* flex-direction: row-reverse; */
    /* 是否支持换行 */
    /* flex-wrap: wrap; */
    /* 上述两种情况的结合 */
    flex-flow: row wrap;  
}

• justify-content 用于指定item在主轴上的对齐方式，如：

#app {
    
    /* 上述两种情况的结合 */
    flex-flow: row nowrap;  
    /* 项目在主轴上的对齐方式 */
    justify-content: space-between;
    /* background-color: rgb(236, 236, 137); */
}

• flex-grow， 对剩余空间进行划分；通过flex-grow设定元素对于剩余空间划分的比重
  

.f1, .f2, .f3 {
    
   /* 设置容器item主轴的排列方式,占据剩余空间大小 */
    /* flex-grow: 33; */
    width: 150px;
    /* item如果不指定height，交叉轴会充满整个容器 */
    /* height: 200px; */
    background-color: pink;
}

此时上述情况为三个子容器都设置 flex-grow:33，因此容器比值为1：1：1

• flex-shrink: 指定元素的收缩速率，当拉扯浏览器会调整item的大小

.f3 {
    
   /* 指定元素的收缩速率 */
    flex-shrink: 999;  
    height: 150px;
    background-color: rgb(99, 248, 122);
}

参考链接

Flex 布局教程，前端必会的基础技能，面试必会基础