CSS—弹性布局(Flexible Layout)

最新推荐文章于 2025-04-10 23:09:07 发布

冯佳兴

最新推荐文章于 2025-04-10 23:09:07 发布

阅读量1.3k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/fjxcsdn/article/details/86687155

版权

12 篇文章

订阅专栏

1、什么是弹性布局

弹性布局(Flexible Layout),是一种布局方式，是一种解决某元素中"子元素"的布局方式

将元素变为flex容器后，那么所有的子元素都将成为flex项目，都允许按照弹性布局的方式来排列

将元素变为 flex 的容器
属性	display
取值	1、flex:将块级元素变为弹性布局的容器 2、inline-flex:将行内元素变为弹性布局的容器
注意	1、元素设置为 display:flex 之后，子元素的float,clear,vertical-align 将失效 2、子元素的尺寸是允许被修改的 3、弹性布局容器的text-align属性会失效

效果如下：当没有变成弹性布局的时候，所有的子级元素按照顺序排列，弹性布局以后，按照横向排列（横向是默认的）

1、容器的属性

主轴：项目排列的一根轴，如果横轴作为主轴的话，那么项目们则横向排列，如果纵轴作为主轴的话，那么项目们则纵向排列 交叉轴：与主轴交叉的轴,如果横轴为主轴，那么纵轴则为交叉轴，如果纵轴为主轴，那么横轴则为交叉轴

flex-direction	指定容器的主轴及其排列方向	取值： 1、row 默认值，即主轴为 "横轴"，起点在左端 2、row-reverse 主轴为横轴，起点在右端 3、column 主轴为纵轴，起点在顶端 4、column-reverse 主轴为纵轴，起点在底端
flex-wrap	主轴排列不下所有的项目时,如何换行	取值： 1、nowrap ：默认值，即不换行，项目缩小 2、wrap ：换行 3、wrap-reverse：反转
justify-content	定义项目在主轴上的对齐方式	取值： 1、flex-start : 在主轴的起点对齐 2、flex-end : 在主轴的终点对齐 3、center : 在主轴上居中对齐 4、space-between：两端对齐,第一个项目挨着起点，最后一个项目挨着终点，中间间隔平分 5、space-around
align-items	项目在交叉轴上如何对齐	取值： 1、flex-start ：在交叉轴的起点对齐 2、flex-end ：在交叉轴的终点对齐 3、center ：在交叉轴上居中对齐 4、baseline ：在交叉轴上基线对齐 5、stretch ：若项目未设置高度，将沾满容器的整个高度

效果展示：

2、项目的属性：该组属性只能设置在某一项目上，只控制某一项目，不影响容器以及其他项目

属性	flex-grow
作用	定义项目的放大比例。若容器有足够的多余空间的话，项目将如何放大
取值	整数数字，默认为0，即不放大取值越大，占据的剩余空间也就越多

效果展示：