文章目录
前言一、什么是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-shrink: 指定元素的收缩速率，当拉扯浏览器会调整item的大小此时上述情况为三个子容器都设置 flex-grow:33，因此容器比值为1：1：1
.f3 {/* 指定元素的收缩速率 */flex-shrink: 999; height: 150px;background-color: rgb(99, 248, 122);}
参考链接
Flex 布局教程，前端必会的基础技能，面试必会基础
