flex弹性布局详解

最新推荐文章于 2024-07-26 13:50:11 发布

柯柯阿

最新推荐文章于 2024-07-26 13:50:11 发布

阅读量1k

点赞数 1

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/weixin_46809263/article/details/133350185

版权

本文详细介绍了Flex布局，包括Flex容器的主轴和交叉轴概念，以及容器和项目属性的使用。重点讲解了flex-direction、flex-wrap、justify-content、align-items等关键属性的作用和应用场景，帮助开发者掌握弹性布局的运用。

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

块级元素：<div>，<p>，<ul>，<ol>，<li>，<h1>~<h6>……

相邻独占一行

默认宽度为容器的100%

宽、高、margin/padding 可设置

行内元素：<span>，<a>，<strong>，<b>……

相邻行内元素同行显示

默认宽度为自身内容宽度

宽、高不可设置

margin/padding 仅可设置水平方向，垂直方向无效

行内块元素：<img/>，<input/>，<td/>

相邻元素同行显示中间会有空白间隙

宽、高、margin/padding 可设置

默认宽度为自身内容宽度

属性转换：

块转行内：display:inline;

行内转块：display:block;

块、行内转行内块：display:inline-block;

Flex是Flexible Box的缩写，意为弹性布局

采用Flex布局的元素，称为 ’Flex容器’，简称 ’容器’。

容器的所有子元素称为 ’容器成员’，简称 ’项目’。

.box{

        display: flex;

        display: inlone-flex;  // (行内元素)

        display:-webkit-flex; // (webkit内核浏览器需加上-webkit前缀，safari)

}

容器默认存在两根轴：

水平的称为主轴（main-axis）

垂直的称为交叉轴（cross-sxis）

row: 默认值，主轴为水平方向，起点在左端

row-reverse: 主轴为水平方向，起点在右端

columu: 主轴为垂直方向，起点在上方

columu-reverse: 主轴为垂直方向，起点在下方

关注