flex常用技巧

最新推荐文章于 2022-02-24 04:07:10 发布

瑞晟技术服务中心-耿瑞

最新推荐文章于 2022-02-24 04:07:10 发布

阅读量862

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_45966674/article/details/117401364

本文深入探讨了Flex布局在现代Web开发中的应用，特别是其在小程序和uri-app等跨平台开发中的优势。通过介绍`display:flex`、`align-items`、`justify-content`和`align-self`等核心属性，详细阐述了如何控制元素的对齐方式和布局方向。同时，还讲解了`flex-wrap`和`flex-direction`属性，用于处理元素换行和主轴方向变化的情况，帮助开发者更好地理解和运用Flex布局来创建响应式和灵活的页面设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

IT技术的使用往往因时代而变，也许昨天你还在吐槽flex可悲的兼容性，而今天你却发现小程序和uri-app跨平台开发对flex是那样友好
那么
对容器生命flex

display: flex;

flex默认是块级元素，如果希望声明为行内样式

display: inline-flex;

align-items 可以设置flex下子元素的垂直对齐方式
justify-content 可以设置flex元素下子元素的水平对齐方式
align-self 可以设置flex容器下单个子元素自己的垂直对齐方式
它们的具体属性有 flex-start 开始对齐 flex-end 结束对齐 center 居中对齐
另外他们都可以设置两端对齐

justify-content: space-between;/*子元素水平方向两端对齐*/
align-content: space-between;/*子元素垂直方向两端对齐*/

flex:1 自动站满父容器空余位置
flex-wrap 设置子元素换行具体属性有默认nowrap:不换行 wrap:允许子元素在必要时换行 wrap-reverse允许子元素在必要时换行，但会反向排序
flex-direction 改变子元素主轴方向具体属性有
默认row 子元素由左到右排序
row-reverse 子元素从右到左排序
column 子元素从上到下排序
column-reverse 从下往上排序