flex布局又称为弹性布局，任何一个容器都可以指定为flex布局

声明弹性盒子的几种方式

就像前面说的，所有容器都可以指定为flex布局

.box{    display:flex;}

行内元素也可以使用：

display:inline-flex;

改变弹性元素的方向

弹性盒子默认是从左到右的方向，此时的轴是水平方向的， flex-direction 默认属性为 row

.box{    display:flex;}

可以通过修改 flex-direction

属性来改变排列方向，也就是把轴变为垂直方向

.box{    display:flex;    flex-deriction:column;}

还可以反转，把属性修改为 column-reverse , row-reverse

同理

控制弹性盒子溢出问题

如果盒子里面的元素特别多，水平宽度或者高度不够时，默认的情况是会缩小盒内元素宽度

我们在这里可以通过换行来解决

在盒子加上 flex-wrap ，可以实现溢出部分往下换行

同样在wrap属性后面加reverse，可以达到从下网上换行的效果

水平垂直的轴也是同理。

我们也可以通过 flex-flow 同时设置轴的方向和是否换行

主轴与交叉轴

话不多说，直接看图：

当宽度不够元素溢出导致换行时，会有一个交叉轴：

当属性为 flex-idrection:column 时，主轴为垂直方向，交叉轴与主轴垂直

主轴的排列方式

控制主轴的属性为 justify-content

下面以水平方向为例

一、整体靠一边

默认的方式是在主轴上从左到右，对齐到开始，也就是 justify-content:flex-start

如果是对齐到结束，则是 justify-content:flex-end

如果主轴反转，从右到左，则开始在右边，结束在左边

二、整体居中：justify-content:center

三、左右靠边，中间居中：justify-content:space-between

四、元素左右两边有相同间距：justify-content:space-around

五、平均分配：justify-content:space-evenly

 交叉轴的排列方式

控制交叉抽的属性为 align-centent

一、整体靠一边

与主轴类似， flex-start 为交叉轴开始， flex-end 为交叉轴尾部

二、整体居中：align-content:center

三、交叉轴首尾靠边，其他元素间隔平均分布：justify-content:space-between

四、交叉轴元素上下间距相同：justify-content:space-around

五、交叉轴元素间距平均：：justify-content:space-evenly

控制弹性盒子内的单独元素

一、align-self

通过 align-self 属性，可以控制单独元素，类似于对主轴整体的控制

二、元素可用空间分配：flex-grow

flex-grow 属性指子元素分配到父级盒子的占比

如都是1的时候：

也可以是其他占比，如果为0则为原大小

元素动态缩小

元素动态缩小使用 flex-shrink 属性控制。当你内部元素总宽度大于外部元素宽度，又不适用 wrap 让其换行，则可以使用flex-shrink控制内部元素缩放。

0表示不缩放，数值越大，缩小成都越大

主轴的基准尺寸flex-basis

设置盒子内部元素的基准尺寸 flex-basis ，优先级大于css设置他的宽高

弹性元素属性组合写法

flex-grow:1;
flex-shrink:2;
flex-basis:100px;

等同于

flex:1 2 100px;

总结

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS实现图片缓慢放大缩小效果的方法是什么

  方法：1、使用“@keyframes 动画名称{}”规则和“transform:scale(缩放比例);”语句创建放大缩小动画；2、使用“图片元素{animation:动画名称 时间 infinite;}”语句缩放动画应用于图片元素中。

• CCS中的margin塌陷什么意思，怎么解决塌陷

  这篇文章主要介绍了CCS中的margin：top塌陷问题,本文通过实例截图给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

• CSS中div水平居中是什么样的，实现代码是什么

  如何理解div水平居中呢？这样想象就好了，在一个长方形的div上，水平划一条直线，然后取水平线的中间点，这就是div水平居中了，div水平居中也叫div左右居中，如图所示。 div水平居中的例子如下所示。 divstyle=width:150px;height:80px;border:1pxsolidreddi

• Canvas与Svg分别是什么，存在哪些区别

  canvas与svg都是可以在浏览器上创建图形，因此，在html5中感觉canvas和svg很相似，但是实际上canvas与svg有着根本的区别。下面php中文网通过比较canvas和svg之间的不同来给大家总结了关于canvas与svg的区别。一起来看一看吧。

• CSS中文字大小单位有几种，含义是什么

  老是被人问到px、pt和em的区别，自己有时候也会纠结到底该用什么单位，今天特意查了一些文章，下面这篇虽然很久远了，但解释的比较全面，转载收藏之。点击查看原文这里引用的是Jorux的95%的中国网站需要重写CSS的文章，题目有点吓人，但是确实是现在国内网页制作方面的一些缺陷。我一直也搞不清楚px与em之间的关系和特点， ...