关于弹性布局的理解

最新推荐文章于 2022-01-25 16:41:21 发布

border-content

最新推荐文章于 2022-01-25 16:41:21 发布

阅读量889

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签：弹性布局

本文链接：https://blog.youkuaiyun.com/qqqqwqqqqq/article/details/84943731

html 专栏收录该内容

3 篇文章

订阅专栏

本文深入讲解CSS Flexbox布局，从定义弹性盒到掌握各种属性，如display:flex, flex:1, flex-direction, justify-content等，帮助读者理解如何使用Flexbox进行高效网页布局。

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

1、定义弹性盒：
display:flex;
2、flex:1;
缩放
3、flex-direction:row/column;
定义盒子内容主轴的方向 row为横向 column为纵向；
3、justify-content:flex-start/center/flex-end/space-around/space-between;
定于盒子内容在主轴方向上的排列方式
在这里插入图片描述
4、align-items:flex-start/center/flex-end;
定义盒子内容在侧轴上的排列方式
5、flex-wrap:nowrap/wrap/wrap-reverse;
定义盒子内容在超出时是否转行
7、order:-1/0/1;
定义盒子内容单个选项的元素位置
8、align-self:flex-start/center/flex-end/baseline stretch;
定义盒子内容单个元素内容的侧轴排列方式
9、flex-flow:flex-direction和flex-wrap的缩写 flex-flow: row wrap;

10、align-content:flex-start/center/flex-end/space-around/space-between;stretch;
定义整体盒子在侧轴的排列方式
11、定义flex盒子后内容不再区分行级标签和块级标签都可以设置宽高。
12、在弹性布局的i标签引入背景图时：
1.当图片宽高都是一样时测量宽高然后进行居中
在这里插入图片描述

2、当图片宽高不一样时：