小白看了都说好的flex布局讲解

虽然吧，博客没多少人看，但是坚持更新也是对自己学习的监督，加油打工人。

今天我们来说说flex布局，flex布局呢现在比较流行，而且实用性强，在教学之前我也是做了一点功课，查看了别的up主的一些教程，感觉讲都很可以，现在我也来讲讲，

组成：容器和项目

啥是容器啥是项目，下面图片主轴和交叉轴围成一个大盒子就是容器。项目就是大盒子里面的小盒子。

项目在容器中显示，主要是由两个轴确定的，在容器中默认有水平的主轴和垂直的交叉轴，项目在容器中默认沿主轴（水平）排列

​ ​​

 

​​

介绍完概念，现在我们学习六个常用属性：

flex-direction     属性设置容器的主轴方向

css语法：flex-direction: row|row-reverse|column|column-reverse|

1. Row默认值，左边开始往右边排列（row-reverse就是右到左）

如果窗口伸缩，不会像float布局一样换行显示，这就是所谓的弹性。

​​​​​​​

 

1. Column从上面开始往下排列（column-reverse相反）

flex-wrap容器换行显示，就是容器在一行无法完全显示的处理属性

css语法：flex-wrap: nowrap|wrap|wrap-reverse|

1. Nowwrap：不换行
2. Wrap换行显示，就是如果项目在容器中的一行排满，会自动从下一行的左边显示

flex-flow

css语法：flex-flow：row nowrap

这个是flex-deriction和flex-wrap属性的简写注意前后区分

justify-content

css语法：justify-content: flex-start | flex-end | center |space-between | space-around

flex-start左对齐

flex-end右对齐对齐（下图）

Center居中对齐

space-between：两端对齐

space-around：每个项目两侧的间距相等

align-items

css语法：align-items:flex-start | flex-end | center | baseline | stretch

flex-start：交叉轴起点对齐

flex-end:交叉轴终点对齐

Center：交叉轴中间对齐

Stretch：项目将盒子的高度撑满，注意不要设置高度，否则无效

Baseline：项目的第一行文字的基线对齐

align-content

写太多了，偷一下懒

https://www.runoob.com/try/playit.php?f=playcss_align-content&preval=stretch

大家可以到菜鸟教程看看这个演示，注意: Internet Explorer, Firefox, 和 Safari 浏览器不支持 align-content 属性。所以不太用到。

现在我们来说一下项目里面的属性：

order 是设置项目的排列顺序，数值越小越靠前，和之前我教过的z-index一样

改变前

改变后

flex属性

flex属性是 flex-grow属性、flex-shrink属性、flex-basis属性的简写。默认值为：0 1 auto；

flex:0(0 1 auto) | 1(0 1 auto) |auto(0 1 auto)

        项目放大        项目缩小     项目占据主轴空间的值

align-self 属性

align-self属性表示当前项目可以和其他项目拥有不一样的对齐方式

css语法：align-self: flex-start | flex-end | center | baseline | stretch

使用方法和align-items一样