弹性布局的一些笔记

基本介绍

flex（弹性）布局是浏览器提倡的布局模型，布局简单，灵活，可以避免浮动布局脱标的问题；
比起传统布局， 弹性布局虽然没用传统布局那么好的兼容性，但是使用起来方便简单 ， 但是随着技术的发展，浏览器的兼容性越来越高，弹性布局将成为以后的主流布局。

如何开启弹性布局

任何盒子都可以开启弹性布局，无论其是什么元素；只需要设置 display: flex; 属性，当前的盒子就开启了弹性布局，里面子元素就会自动的挤压或者压缩进行布局；
如图所示 即开启弹性布局
（bigbox的css部分）

弹性布局的轴

弹性布局是依靠轴进行布局 其中默认x轴为主轴 （右正左负）
y为副轴（下正上负） 但是我们可以进行设置
设置方法如下：
1 x为主轴：flex-direction：row；
2 y为主轴 ：flex-direction: column
3 x为主轴并翻转（即是左正右负）：flex-direction:row-reverse
4 y为主轴并翻转 （即是上正下负）：flex-direction:colunm-reverse

设置代码及其效果

主轴设置

使用justify-content 设置的子元素在主轴进行布局，需要注意的是 使用它的时候必须要对主轴进行确认
以下为常用的justify-contnt属性：
1 justfy-content:flex-start
默认值，子元素在主轴的开始方向进行排列 如主轴是x轴（不翻转）就是从左到右进行排列。
2justfy-content:flex-end
子元素从主轴尾部开始排列 比如主轴是x轴 则从右到左开始排列
3 justfy-content:center
子元素在主轴中间开始进行排列
4justfy-content:space-around
子元素平分剩余空间
如图所示我先设置一个大盒子作为父元素 如何设置三个小盒子作为子元素 并设置宽高

运行效果如下

这时我们对父盒子进行设置

运行效果如下

我们可以看见三个小盒子瓜分了大盒子

5justify-centent:space-between
在主轴上 两个子元素贴边 其余子元素瓜分剩余空间
我们对父级盒子进行设置

运行效果如下
6 justify-content:space-evenly
所有子元素之间距离一样 效果如下

换行效果

我们知道设置了弹性布局，子级盒子总宽度如果超过了父级盒子的宽度并不会换行 反而会压缩子元素的宽。这时候我们可以用以下代码进行设置
flex-wrap
该代码有两个取值 一个为默认值：flex-wrap:no wrap 不换行
但是如果我们设置了 flex-wrap:wrap 则会换行
测试如下

副轴设置

除了对主轴进行设置 我们也常常需要对副轴进行相应的布局设置来达成我们想要的结果；
常用的副轴设置如下：

单行副轴设置：

align-items:flex-start ;
交叉轴的起点对齐
简单理解为 ---- 子元素在侧轴方向从头往后排列；
align-items:flex-end ;
交叉轴的终点对齐
简单理解为 ---- 子元素在侧轴方向从尾部往前排列；
align-items:center;
交叉轴的中点对齐
简单理解为 ---- 子元素在侧轴方向居中排列；
align-items:stretch ;
默认值(拉升)，如果项目（子元素）未设置高度或设为auto，将占满整个容器（父元素）的高度
简单理解为 ---- 子元素没有设置固定高度的情况下会将子元素拉伸的和父级盒子一样高；
align-items:baseline ;
项目（子元素）的第一行文字的基线对齐；
align-content:flex-start;
交叉轴的起点对齐
简单理解为 ---- 子元素在侧轴方向从头往后排列；
align-content:flex-end;
交叉轴的终点对齐
简单理解为 ---- 子元素在侧轴方向从尾部往前排列；
align-content:center;
交叉轴的中点对齐
简单理解为 ---- 子元素在侧轴方向居中排列；
align-content:space-around;
子元素在侧轴平分除所有子级盒子占有的空间以外的剩余空间；
align-content:space-between;
子元素两头的元素先对其在两头，剩余的子元素再去平分剩余的空间；
align-content:stretch;
默认值（拉升），如果项目未设置高度或设为auto，将占满整个容器的高度；