flex布局(弹性布局)

最新推荐文章于 2024-09-14 13:04:57 发布

陌上烟雨遥111

最新推荐文章于 2024-09-14 13:04:57 发布

阅读量360

点赞数 2

分类专栏：笔记文章标签： css3

本文链接：https://blog.csdn.net/weixin_46531884/article/details/108175067

版权

本文详细介绍了CSS3的Flex布局，包括flex容器的属性如display、flex-direction、flex-wrap、flex-flow、justify-content、align-items和align-content，以及flex项目的属性如order、flex-grow、flex-shrink、flex-basis、flex和align-self。通过这些属性，可以实现灵活的响应式布局，调整元素在主轴和交叉轴上的排列方式。

摘要由CSDN通过智能技术生成

FLEX布局(弹性布局)
flixible Box
flex容器：使用display： flex就是flex容器
在这里插入图片描述

项目：flex容器中的子元素就是项目，不包括孙子元素
默认主轴方向排列，即横向
Flex-容器的属性
1、display属性

作用：指定flex属性
取值：flex | inline-flex
flex：将对象作为弹性伸缩盒展示，相当于块级属性，有默认宽度100%
inline-flex：将对象作为内联块级弹性伸缩盒展示，即行级元素，没有默认宽度
2、flex-direction

作用：指定容器的主轴方向，主轴默认为水平向右方向，项目排列的方向
取值：row | row-reverse | column | column-reverse
row：默认值，主轴横向往右排列
row-reverse：主轴横向往左反向排列
column：垂直方向排列
volumn-reverse：垂直方向反向排列
3、flex-wrap

作用：描述如果一个轴线排列不下，如何换行
取值：nowrap | wrap | wrap-reverse
nowrap：默认不换行，会压缩子元素
wrap：换行，第一行在上方
wrap-reverse࿱