怎么理解html的flex布局

本篇内容主要讲解“怎么理解html的flex布局”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么理解html的flex布局”吧!

需要注意的是：任何容器都可以指定为flex布局，但是在flex布局中float、clear、vertical-align都会失效。

1.主轴方向

flex容器分为x轴与y轴，x轴正方向默认从左至右，y轴正方向默认从上到下。

定义一个容器为弹性布局display:flex;主轴默认方向为左到右;如果我们想去改变flex的默认方向，就需要用到flex-direction属性flex-direction有四个属性值，分别是row、row-reverse、column、column-reverse，分别为从左到右、从右到左、从上到下、从下到上!

2.主轴方向的对齐方式

(1)justify-content:flex-start则主轴为左对齐

(2)justify-content:flex-end 则主轴为右对齐

(3)justify-content:center 则主轴为居中

(4)justify-content:space-between则每个子项目之间等距离，前提是有剩余空间

(5)justify-content:space-around则每个子项目会平分剩余空间，子项目与父元素边界处也会存在距离

3.纵向单行对齐方式

(1)align-item:flex-start纵向从上到下

(2)align-item:flex-end纵向从下到上

(3)align-item:center纵向居中对齐

(4)align-item:baseline以基线对齐

(5)align-item:strech这是默认方式

4.子项目换行

(1)flex-wrap:wrap超出父元素会换行

(2)flex-wrap:wrap-reverse反向换行

(3)flex-wrap:no wrap这是默认方式,不换行

5.纵向多行对齐方式

(1)align-content:flex-start上对齐

(2)align-content:flex-end下对齐

(3)align-content:center上下居中

(4)align-content:space-between

(5)align-content:space-around

以上均是添加到父元素身上的属性

6.子项目的一些属性

(1)order:0,定义子项目的排序位置，数值越小越靠前，默认为0

(2)flex-grow:0;定义子项目的放大比例，默认为0不放大

(3)flex-shrink:1;定义子项目的缩小比例，默认为1，空间不足将等比缩小，0则不缩小，负值无效

(4)flex-basis:1;定义子项目占据空间，默认为auto，可以设置百分比，也可以是固定值

以上三种属性可以简写，比如flex：1,1,1顺序如上

到此，相信大家对“怎么理解html的flex布局”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！