Flexbox布局需要注意问题

2020-08-18 08:47:00 2761 2 编辑:深圳网站设计 来源:互联网

其他的布局如table,float等都不是设计来做网页布局的,而Flexbox是第一套专门为了网页布局而设计的方法。

flex布局的预设值为block,所以一开始设置了flex布局(display:flex)的元素都会独占一行。

Flex布局主要可以分为两部分:flex-container(整个弹性盒容器)和flex-items(弹性盒中的元素);

flex全属性实时预览:http://flexbox.help/

Flex-container(弹性盒)相关属性

这些属性写在设定为flex-container的标签中;通过给标签添加:display:flex;可以使该标签成为一个flex-container。


1.flex-direction

设置flex-container内的items的排序方向,默认值为row(行/水平排序),其他属性值有:

column:列/竖直排序;

row-reverse:反向水平排序;

column-reverse:反向竖直排序;

不同的排序方向,主轴与交叉轴不一样:

image-20200609170510747

image-20200609170510747


2.justify-content

决定主轴的排序方向;有以下属性值:

center:主轴上居中;

flex-start:主轴起始方向开始排列(默认表示左);

flex-end:主轴结束方向开始排列(默认表示右);

space-around:空白环绕;

space-between:与around相似,只不过没有了最左和最右的空白;

space-evenly:空白平分;


3.align-item

决定交叉轴的排序方向;有以下属性值:

center:交叉轴上居中;

flex-start:交叉轴起始方向开始排列(当flex-direction为默认值row时,表示上);

flex-end:交叉轴结束方向开始排列;(默认表示下)

space-around:空白环绕;

space-between:与around相似,只不过没有了最左和最右的空白;

space-evenly:空白平分;

justify-content:center与align-item:center配合使用可以使flex-container(弹性盒)内的items水平和垂直方向上居中。


4.flex-wrap

当弹性盒内的item过多时,该属性可以控制,是压缩每个item宽度不换行,还是保持每个item宽度换行;

nowrap:压缩item`宽度,不换行;

地址:https://www.cnblogs.com/AhuntSun-blog/p/13519246.html

wrap:不改变item宽度,换行;(换行后,会将弹性盒一分为二,所以两行item并不是挨在一起的)


5.flex-flow

该属性为flex-direction和flex-wrap组合的缩写;如:

flex-flow:row wrap;等效于flex-direction:row;flex-wrap:wrap

网站设计.jpg

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询
微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

深正互联微信
扫描即可沟通