前端学习之flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"
flex布局是浏览器提倡的布局模型，布局简单，灵活，可以避免浮动布局脱标的问题；
Flex布局和传统布局的区别；
传统布局：兼容性好，布局繁琐，局限性在移动端不能很好布局；Flex布局：简单，操作方便，兼容性差（随着技术的发展可能会成为主流的布局）；Pc采用传统布局，移动端或者不考虑兼容的pc可采用flex布局；
给父级开启Flex布局 display: flex;
任何一个盒子都可以开启弹性布局，不管是块元素还是行内元素；只需要设置 display: flex; 属性，当前的盒子就开启了弹性布局，里面子元素就会自动的挤压或者压缩进行布局；
Flex布局的组成部分
容器（父级盒子）
项目（子元素）
主轴，默认的主轴是X轴
侧轴/交叉轴

Flex布局容器（父级盒子）常见的属性设置

flex-direction

设置Flex布局的主轴方向
Flex布局中默认的主轴是row，x轴，默认值是从左到右
flex-direction:column;
将主轴改为y轴，纵轴，从上到下；
flex-direction:row;
将主轴改为x轴，横轴，从左到右；
flex-direction:row- reverse;
主轴为x轴，并且翻转，从右到左翻转排列；
flex-direction:column- reverse;
主轴为y轴，并且翻转，从下到上翻转排列 ；

justify-content

通过justify-content能够设置主轴子元素排列形式,但是注意使用这个属性之前一定要确定好主轴
justify-content:flex-start;
默认值，所有子元素在主轴头部开始显示，如果是X轴，则从左到右，如过是Y轴，则从上到下；
justify-content:flex-end ;
所有子元素在主轴尾部开始显示，如果是X轴，则所有元素靠右显示，如果是Y轴，则所有元素靠下显示；
justify-content:center;
所有子元素在主轴居中对齐
justify-content:space-around ;
所有子元素平分剩余空间
justify-content:space-between;
所有子元素中，先两边两个元素贴边，剩余的元素平分剩余空间（常用）;
justify-content:space-evenly ;
所有子元素之间的距离都一致

flex-wrap
规定子元素是否换行显示,flex布局如果子元素的总宽度加起来超出了父级的宽，默认是不会自动换行的，会压缩一行显示；
flex-wrap:nowrap;
开启flex布局后项目（子元素）默认不换行，默认情况下项目（子元素）都排在一条线上（轴线），如果子元素的总宽度加起来超出了父元素的宽度，子元素就会压缩显示，不会换行；
flex-wrap：wrap；
如果想要子元素实现换行效果，就需要给容器（父级盒子）设置flex-wrap：wrap；
align-items/align-content
设置侧轴子元素对齐的方式
align-items
单行的子元素，父级没有设置flex-wrap：wrap；换行属性的时候，设置侧轴子元素的排列
align-content
多行的子元素，父级设置flex-wrap：wrap；换行属性的时候，设置侧轴子元素的排列
**align-items:flex-start ;**交叉轴的起点对齐
**align-items:flex-end ;**交叉轴的终点对齐
**align-items:stretch ;**默认值(拉升)，如果项目（子元素）未设置高度或设为auto，将占满整个容器（父元素）的高度

flex

Flex布局项目（子级盒子）常见属性设置

将容器（父级盒子）剩余空间按照占比分配给各个子盒子
取值：实际的数字
将容器（父级盒子）剩余空间按照占比分配给各个子盒子
order项目（子级盒子）的排列顺序。
实际的一个数值，数值越小，排列越靠前，默认为0
align-self单个项目有与其他项目不一样的对齐方式设置，可覆盖align-items属性；

这次我们给大家介绍了方便的flex布局，下期我们给大家介绍rem布局。