怎么理解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布局”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


本文名称:怎么理解html的flex布局-创新互联
文章URL:http://pwwzsj.com/article/dsoiod.html