web学习 -- css Flexbox 弹性盒子布局

最新推荐文章于 2024-08-21 12:08:59 发布
最新推荐文章于 2024-08-21 12:08:59 发布
阅读量627 收藏 2
点赞数 1
分类专栏： 前端 文章标签： css flex
原文链接：https://www.html.cn/archives/8629
版权

FlexBox 弹性盒子布局

介绍

Flexbox 布局（也叫Flex布局，弹性盒子布局）模块旨在提供一个更有效地布局、对齐方式，并且能够使容器中的子元素大小未知或动态变化情况下仍然能够分配好子元素之间的空间。

Flex 布局的主要思想是使父容器能够调节子元素的宽度/高度（和排列顺序），从而能够最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。
flex布容器能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出。
flexbox布局与方向无关，不同于常规布局（基于垂直的块（block）和基于水平的内联（inline））。 虽然传统布局适用于页面，但它们对于大型或复杂的应用程序布局来说缺乏灵活性（特别是在改变方向，调整大小，拉伸，收缩等方面）。

注: Flexbox布局最适合应用程序的组件和小规模布局，而 Gird 布局则适用于较大规模的布局。

基础知识和术语

在这里插入图片描述
在flex布局中，flex 项（子元素）要么按照 main axis(主轴)（从 main-start 到 main-end ）排布，要么按照cross axis(交叉轴) (从 cross-start 到cross-end)排布。

main axis

flex 容器的主轴，flex 项沿着主轴排布，注意主轴不一定是水平的，主轴是水平还是垂直取决于 flex-direction 属性。

main-start|main-end

分别表示主轴的开始位置和结束位置，flex 项在容器中会从 main-start 到 main-end 排布。

main size

flex 项占据主轴的宽度或高度。flex 项的 main size 属性是要么是“宽度”，要么是“高度”，这取决于主轴方向。

cross axis

垂直于主轴的轴线称为交叉轴，其方向取决于主轴方向。

cross-start|cross-end

分别表示交叉轴的开始位置和结束位置。flex 项在交叉轴上的排布从 cross-start 开始位置到 cross-end 结束位置。

cross size

flex 项占据交叉轴的宽度或高度。flex 项的 cross size 属性是要么是“宽度”，要么是“高度”，这取决于交叉轴方向。

flex容器

容器（container，也可以叫做父元素，称为flex container）

flex项

容器的子元素（item，也可以叫做子元素，称为flex items）

容器（父元素）属性

在这里插入图片描述

diplay:flex

用来定义一个 flex 容器。如果设置为 flex 则容器呈现为块状元素，设置为inline-flex 则容器呈现为行内元素。它为所有直接子元素提供了 flex 上下文

.container {
  display: flex; /* or inline-flex */
}

flex-direction

flex-direction 属性确立了主轴，从而定义了 flex 项在 flex 容器中的排布方向。
Flexbox 是单向布局，有些时候我们也称作一维布局。 可以将 flex 项视为主要沿着水平行或垂直列排布。

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

属性表：

  • row (默认值) :行排布。在 ltr (left to right， 从左到右)排版方式下，flex 项从左到右排列，在 rtl
    (right to left， 从右到左)排版方式下，flex 项从右到左排列。
  • row-reverse: 反向行排布，即 row 的反方向，在 ltr 中从右向左，在 rtl 中从左到右。
  • column: 列排布，与 row 相似，但是 flex 项从上到下排布。
  • column-reverse: 反向列排布，即 column 反方向，与 row-reverse 相似，只是 flex 项从上到下排布。
    在这里插入图片描述

flex-wrap

默认情况下，flex 项会尽可能地尝试排在同一行上（行或列），通过设置 flex-wrap 来决定 flex 项是否允需要换行。

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

属性表：

  • nowrap (默认值) : 所有的 flex 项都会在同一行上排布，也就是我们常说的单行，或不换行。
  • wrap: flex 项将从上到下根据实际情况排布再多行上，也就是我们常说的多行，或会换行。
  • wrap-reverse: flex 项将 从下到上 根据实际情况排布再多行上折行。

flex-flow （适用于父级 flex 容器）

这是 flex-direction 和 flex-wrap 属性的缩写形式。
同时定义 flex 容器的主轴和交叉轴。默认是 row nowrap

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

justify-content

justify-content 属性定义了flex 项沿主轴方向的对齐方式
当一行中的所有 flex 项都是固定大小，或者是灵活大小但已经达到最大 main size 时，它可以帮助分配主轴上的剩余空间。当 flex 项溢出主轴的时候，它还可以用来控制flex 项的对齐方式。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

属性表

  • flex-start (默认值) : flex 项从主轴的开始位置（main-start）开始排布。
    -在这里插入图片描述

  • flex-end : flex 项从主轴的结束位置（main-end）开始排布
    -在这里插入图片描述

  • center: flex 项沿主轴居中排布
    -在这里插入图片描述

  • space-between: flex 项沿主轴均匀排布，即我们常说的沿主轴 两端对齐 ，第一个flex
    项在主轴开始位置，最后一个flex 项在主轴结束位置。
    在这里插入图片描述

  • space-around: flex 项沿主轴均匀排布。要注意的是 flex 项看起来间隙是不均匀的，因为所有 flex
    项两边的空间是相等的。第一项在容器边缘有一个单位的空间，但是在两个 flex 项之间有两个单位的间隙，因为每个 flex 项的两侧都有一个单位的间隙。
    在这里插入图片描述

  • space-evenly: 任何两个 flex 项之间的间距（以及到 flex 容器边缘的空间）相等。
    -在这里插入图片描述

align-items

align-items 定义了 flex 项如何沿当前行在交叉轴上排布的默认行为。可以将其视为交叉轴（垂直于主轴）上的对齐方式。

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

属性表：

  • flex-start: flex 项按照交叉轴的开始位置（cross-start）对齐
    -在这里插入图片描述

  • flex-end: flex 项按照交叉轴的结束位置（cross-end）对齐
    -在这里插入图片描述

  • center: flex 项以交叉轴为中心，居中对齐
    -在这里插入图片描述

  • baseline: flex 项按照他们的文字基线对齐
    -在这里插入图片描述

  • stretch (默认值) : 拉伸 flex 项以填充整个容器（这里特别要注意：如果 flex 项有尺寸属性（min-width /
    max-width / width / min-height / max-height / height），那么首先应用这些尺寸属性）
    在这里插入图片描述

align-content

当交叉轴上有剩余空间时，align-content 可以设置 flex 容器中的 行 在交叉轴上如何分配剩余空间，类似于 justify-content 在主轴上对齐单个 flex 项的方式。
注：当只有一行flex项时，此属性不起作用

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

属性表

  • flex-start：多行在容器的开始位置排布
    -在这里插入图片描述
  • flex-end：多行在容器的结束位置排布
    -在这里插入图片描述
  • center：多行在容器的总结位置排布
    -在这里插入图片描述
  • space-between：多行均匀分布；第一行分布在容器的开始位置，最后一行分布在容器的结束位置
    -在这里插入图片描述
  • space-around: 多行均匀分布，并且每行的间距（包括离容器边缘的间距）相同；
    -在这里插入图片描述
  • strech (默认值)：多行拉伸以填充满整个剩余空间
    -在这里插入图片描述

项属性（flex items）

在这里插入图片描述

order

默认情况下，flex 项按源（HTML结构）顺序排布。但是，order 属性可以控制它们在 flex 容器中的显示顺序

.item {
  order: <integer>;  /* 默认值是 0 */
}

flex-grow

flex-grow 定义了 flex 项在有可用剩余空间时拉伸比例。
它接受的值作为比例，无单位。它规定了 flex 项应该占 flex 容器中可用空间的比例。
如果所有 flex 项的 flex-grow 都设置为 1 ，则父容器中的剩余空间将平均分配给所有子项。 如果其中一个子项的值为 2 ，则该子项占用的剩余空间是其他子项的两倍（或者至少会尽力获得）。

.item {
  flex-grow: <number>; /* default 0 */
}

注：负值对flex-grew无效
示例

flex-shrink

flex-shrink 定义了 flex 项的收缩的能力。
（注：与 flex-grow 拉伸正好相反，flex-shrink 决定 flex 项允许收缩多少比例。）

.item {
  flex-shrink: <number>; /* default 1 */
}

注：负值对于 flex-shrink 无效

flex-basis

flex-basis 定义了在分配剩余空间之前 flex 项默认的大小。
可以设置为某个长度值**（e.g. 20%, 5rem,等）**或者关键字。
关键字 auto 意味着 flex 项会按照其本来的大小显示（暂时由 main-size 关键字完成，直到弃用）。
关键字 content 意味着根据内容来确定大小——这个关键字到目前没有被很好地支持，所以测试起来比较困难，与content的类似的关键字还有max-content, min-content, fit-content。

.item {
  flex-basis: <length> | auto; /* default auto */
}

注：如果设置为 0 , 则 flex 项内容周围的空隙不会根据 flex-grow 按比例分配，如果设置为 auto，则 flex 项周围额外的空袭会根据 flex-grow 按照比例分配
在这里插入图片描述

flex

flex 是 flex-grow、flex-shrink、flex-basis 三个属性的缩写。
其中第二个和第三个参数(flex-shrink 和 flex-basis)是可选的。默认值为0 1 auto。

.item {
  flex: none | [ < 'flex-grow'> < 'flex-shrink'>? || < 'flex-basis'> ]
}

align-self

align-self 属性允许某个单独的 flex 项覆盖默认的对齐方式（或由 align-items 指定的对齐方式）。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

在这里插入图片描述

示例

水平垂直居中

HTML

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
</ul>

css

.flex-container {
  /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  
  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
  
  padding: 0;
  margin: 0;
  list-style: none;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

1x
0.5x
0.25x

导航栏

假设我们有一个向右对齐的导航栏在我们网页的最上端，但是我们希望它在中屏上显示时为居中，在小屏上显示为单列。
css

.navigation {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  
  list-style: none;
  margin: 0; 
  background: deepskyblue;
}

.navigation a {
  text-decoration: none;
  display: block;
  padding: 1em;
  color: white;
}

.navigation a:hover {
  background: #1565C0;
}

@media all and (max-width: 800px) {
  .navigation {
    justify-content: space-around;
  }
}

@media all and (max-width: 600px) {
  .navigation {
    flex-flow: column wrap;
    padding: 0;
  }
  .navigation a { 
    text-align: center; 
    padding: 10px;
    border-top: 1px solid rgba(255, 255, 255,0.3); 
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
  }
  .navigation li:last-of-type a {
    border-bottom: none;
  }
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

弹性盒（Flexbox）布局完全指南：实现灵活自适应的网页排列
a451319296的博客
06-18 2735
本教程提供了关于弹性盒（Flexbox）布局模型的全面指南，帮助您掌握如何利用弹性盒构建灵活自适应的网页排列。通过学习本教程，您将了解弹性盒的基本概念、容器和弹性盒子属性的使用方法，并能够创建各种常见的布局效果。
弹性盒布局（flexbox）简要
将心_的博客
03-21 809
flex布局（弹性盒）css3弹性盒一、弹性盒设置二、flex容器属性插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 css3弹性盒 弹性盒子是 CSS3 的一种新的布局模式。 ...
CSS弹性盒子Flexbox布局详解
热门推荐
小平果的欢乐谷
04-13 1万+
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。以下内容主要参考了：Flex 布局教程：语法篇一、Flex布局是什
【HTML】弹性盒子 (display: flex) 布局
最新发布
千里之行，始于足下
08-21 1912
容器属性：flex-direction (主轴的方向)，flex-warp (主轴的项目换行)，justify-content (项目在主轴上的对齐方式)，align-items (项目在交叉轴上的对齐方式)，align-content (项目在交叉轴上的对轴线对齐方式)；项目属性：order (排列顺序)，flex-frow (放大比例)，flex-shrink (缩小比例)，flex-basis (项目初始占据的主轴空间)，align-self (自己单个项目的交叉轴对齐方式)
flexbox弹性盒子布局
xiaoya13144111的专栏
03-10 460
Bootstrap 实例 - 标题                   #demo1{             width: 100%;             background: #ccc;             display: -webkit-flex;/*表示使用弹性布局*/         }         #demo1 .item{        
Flexbox弹性盒子布局
jidongdesheyou_xl的博客
03-02 402
解决根据元素个数不同，自动填充容器
React Native 入门（九） - Flexbox 弹性盒子布局
王小北的技术博客
10-27 1673
当前 RN 版本：0.49 操作环境：Windows 10 React Native 使用 Flexbox 的规则来指定某个组件的子元素的布局方式，这种方式可以在不同屏幕尺寸的设备上提供一致的布局结构。React Native 中的 Flexbox 的工作原理和 web 上的 CSS 存在一定的差异：在 RN 中 flexDirection 的默认值是 column 而不是 row，而且
【Web前端】CSS3 (Flex Box)弹性盒子详解
m0_72416767的博客
07-09 2220
弹性盒子是一种新类型的盒子模型，也有书上称作弹性伸缩盒布局，旨在提供一个更加有效的方式来布置，对齐和分布在容器之间的各项内容，即使它们的大小是未知或者动态变化的。 弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间（主要是为了容纳所有类型的显示设备和屏幕尺寸）的能力。注意： 弹性容器外及弹性子元素内是正常渲染的。......
可能是最全的 CSS Flexbox 学习指南、工具与框架.docx
11-23
- **用法 CSS 弹性盒子**：MDN的教程介绍了Flexbox布局模式和浏览器兼容性。 - **一个完整的 Flexbox 指南**：Chris Coyier的教程包含大量实例，适合深入学习。 - **如何开头用法 CSS Flexbox**：Paul Underwood的...
oa-lp:使用html5和CSS Flexbox和网格的登录页面
04-27
CSS Flexbox，全称灵活盒子布局模型，是CSS3的一个模块，用于处理容器内部子元素的对齐、布局和方向。Flexbox特别适合创建响应式设计，因为它允许动态调整元素的大小和位置。在这个登录页面中，Flexbox可能被用来使...
Flex 弹性盒子布局
zjw_python的博客
06-01 6565
CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。 基本概念 采用Flex布局的元素，称为Flex容器（container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（item），简称”...
flexbox弹性盒子布局教程（一）
叶局长的博客
02-04 580
准备工作 在开始学习flexbox之前，你需要以下基础知识： HTML基础 CSS基础，并且知道CSS是如何工作的 为什么要学习使用flexbox(弹性盒子)? 在相当一段长的时间里，唯一具有浏览器兼容性的页面布局方法就是float(浮动) 和 position(绝对定位与相对定位) ，即便他们可以比较好的处理也页面布局，但在一些情况使用他们是十分困难的，如： 将一个元素相对于它...
flexbox弹性盒子布局教程（二）flexbox基本概念
叶局长的博客
02-04 324
flexbox的两条轴线(axis 或 axes) 当元素被设计为一个弹性盒子，也就是元素display属性被设定为flex的时候，flexbox会根据两条轴线来进行布局 下面先对图中所出现的几个概念进行解释：                                                     ①main axis  main axis 是flexbox中的子项(f...
flexboxt弹性布局
这个少女IT男的博客
11-09 2147
CSS3 flex盒子语法介绍   张歆琳 关注 2016.06.15 11:49 字数 3104 阅读 810评论 2喜欢 28 在以前页面布局多依赖于table，但table标签太多，于是有了absolute布局，float布局等，但它们小问题特别多，要用好并不容易。CSS3里引入了Flexible Box弹性盒模型，专门用于布局。 先看一下Flexibl
Web网页制作-知识点（4）——CSS盒子模型、弹性盒模型（flex box)、文档流、浮动、清除浮动、定位、圆角、阴影
li13437542099的博客
06-22 4009
float属性定义元素在哪个方向浮动，任何元素都可以浮动。值描述left元素向左浮动right元素向右浮动position属性指定了元素的定位类型。值描述relative相对定位absolute绝对定位fixed固定定位sticky黏性定位其中，绝对定位、固定定位和黏性定位会脱离文档流。设置定位之后，可以使用四个方向值进行调整位置：left、top、right、bottom。
HTML页面布局之flex弹性盒子
learning_web的博客
04-27 1275
每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【HTML页面布局之flex弹性盒子 】 一、背景介绍 Flexbox 布局(FLexible Box)意在提供一个更为有效的方式来进行布局、对齐和分配一个容器内元素之间的空间，即使他们的大小是未知的或者动态的。flex布局的主要思想是，让...
web前端入门到实战：CSS3中的弹性盒子模型
软件开发-前端开发-IT
09-18 556
介绍 在css2当中，存在标准模式下的盒子模型和IE下的怪异盒子模型。这两种方案表示的是一种盒子模型的渲染模式。而在css3当中，新增加了弹性盒子模型，弹性盒子模型是一种新增加的强大的、灵活的布局方案。弹性盒子模型是css3中新提出的一种布局方案。是一种为了应对针对不同屏幕宽度不同设备的一整套新的布局方案。主要是对一个容器中的子元素进行排列、对齐和分配空白空间的方案的调整。 新旧版本的弹性盒子模型...
web----弹性盒子
weixin_53163211的博客
09-14 203
space-evenly 每个元素之间间隔相等 两端距离也相等。column-reverse 竖直方向 起点在下边。row-reverse 起点在右端（水平方向）flex-end 轴终点对齐(下边)justify-content: flex-start 默认 轴起点对齐。center 居中。align-items: flex-start 默认 轴起点对齐(上边)flex-direction:row(默认) 起点在左端（水平方向）center 垂直居中。
移动端Web开发实践：HTML5弹性布局技巧分享
- **掌握Flexbox布局模型**：通过实践来熟练使用弹性盒子布局，解决复杂的布局问题，如垂直居中、等分布列等。 - **测试和适配不同设备**：通过真机测试或使用模拟器来确保网页在各种设备上的表现一致，适配不同屏幕...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值