CSS：CSS弹性盒子布局 Flexible Box

最新推荐文章于 2024-03-08 18:05:09 发布
最新推荐文章于 2024-03-08 18:05:09 发布
阅读量216 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Z875983491/article/details/103200047
版权

一、简介

flexbox：全称Flexible Box, 弹性盒子布局。可以简单实现各种伸缩性的设计，它是由伸缩容器和伸缩项目组成。任何一个元素都可以指定为flexbox布局。这种新的布局方案在2009年是由W3C组织提出来的，在此之前，Web开发一般使用基于盒子模型的传统页面布局，依赖定位属性、流动属性和显示属性来解决，参看链接：https://www.cnblogs.com/XYQ-208910/p/5810673.html。弹性盒子布局的出现，极大的方便了开发者，在如今的ReactNative开发中，也已经被引入使用。

伸缩流布局结构图如下：

弹性盒子布局具备的特征：

1、伸缩容器的子元素称为伸缩项目，伸缩项目使用伸缩布局来排版。伸缩布局和传统布局不一样，它按照伸缩流方向布局。

2、伸缩容器由两条轴构成，分别为主轴(main axis)和交叉轴(cross axis)。主轴既可以用水平轴，也可以是竖直轴，根据开发者需要来决定。

3、主轴的起点叫main start，终点叫main end，主轴的空间用main size表示。

4、交叉轴的起点叫cross start，终点叫cross end，交叉轴的空间用cross size表示。

5、默认情况下，伸缩项目总是沿着主轴方向排版，从开始位置到终点位置。至于换行显示，则通过设置伸缩属性来实现。

6、伸缩容器的属性有：display、flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content

7、伸缩项目的属性有: order、flex-grow、flex-shrink、flex-basis、flex、align-self

二、伸缩容器的属性，全局设置排版

HTML：[注意：下面的演示截图项目个数会根据需要选择性注释“flex-item”，有时用不到5个]

<!DOCTYPE html>
<html>
<head>
    <title>Flexbox</title>
    <!--  采用外联方式导入css文件 -->
    <link rel="stylesheet" type="text/css" href="./css_test.css">
</head>
<body>
    <span class="flex-container"> 
        <span class="flex-item" id="item1" style="color:white;font-size:20px">1</span>
        <span class="flex-item" id="item2" style="color:white;font-size:20px">2</span>
        <span class="flex-item" id="item3" style="color:white;font-size:20px">3</span>
        <span class="flex-item" id="item4" style="color:white;font-size:20px">4</span>
        <span class="flex-item" id="item5" style="color:white;font-size:20px">5</span>
    </span>
</body>
</html> 

1、display：决定元素是否为伸缩容器

  • flex：产生块级伸缩容器 
    .flex-container {
     display: flex;
 }
  • inline-flex：产生行内块级伸缩容器
  •  .flex-container {
     display: inline-flex;
 }

2、flex-direction：指定伸缩容器主轴的方向

  • row：水平方向，从左到右 
     .flex-container {
     display: flex;
     flex-direction: row;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px; 
     height: 50px;
     background-color: green;
     margin: 1px;
 }
  • row-reverse：水平方向，从右到左 
     .flex-container {
     display: flex;
     flex-direction: row-reverse;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px; 
     height: 50px;
     background-color: green;
     margin: 1px;
 }
  • column：竖直方向，从上到下 
     .flex-container {
     display: flex;
     flex-direction: column;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px; 
     background-color: green;
     margin: 1px;
 }
  • column-reverse：竖直方向，从下到上 
     .flex-container {
     display: flex;
     flex-direction: column-reverse;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px; 
     background-color: green;
     margin: 1px;
 }

3、flex-wrap：指定伸缩容器主轴方向空间不足时，决定是否换行以及换行方式

  • nowarp：不换行 
    .flex-container {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px; //下图单行状态宽度被重新计算
     height: 50px;
     background-color: green;
     margin: 1px;
 }
  • warp：换行，若主轴为水平方向，换行方向是从上到下 
     .flex-container {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px;
     background-color: green;
     margin: 1px;
 }
  • wrap-reverse：换行，若主轴为水平方向，换行方向是从下到上 
     .flex-container {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap-reverse;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px;
     background-color: green;
     margin: 1px;
 }

4、flex-flow：flex-direction和flex-wrap的缩写，同时指定伸缩容器主轴方向和换行设置

  • row nowrap：默认主轴是水平方向，从左到右，且不换行 
     .flex-container {
     display: flex;
     flex-flow: row nowrap;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px; //下图单行状态宽度被重新计算
     height: 50px;
     background-color: green;
     margin: 1px;
 }

5、justify-content：决定伸缩项目沿着主轴线的对齐方式

  • flex-start：与主轴线起始位置靠齐 
     .flex-container {
     display: flex;
     flex-flow: row wrap;
     justify-content: flex-start;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px;
     background-color: green;
     margin: 1px;
 }
  • flex-end：与主轴线结束位置靠齐 
     .flex-container {
     display: flex;
     flex-flow: row wrap;
     justify-content: flex-end;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px;
     background-color: green;
     margin: 1px;
 }
  • center：与主轴线中间位置靠齐 
     .flex-container {
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px;
     background-color: green;
     margin: 1px;
 }
  • space-between：平均分配到主轴线里，第一个项目靠齐起始位置，最后一个项目靠齐终点位置 
     .flex-container {
     display: flex;
     flex-flow: row wrap;
     justify-content: space-between;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px;
     background-color: green;
     margin: 1px;
 }
  • sapce-around：平均分配到主轴线里，两端保留一半的空间 
    .flex-container {
     display: flex;
     flex-flow: row wrap;
     justify-content: space-around;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px;
     background-color: green;
     margin: 1px;
 }

6、align-items：决定伸缩项目不能换行时沿着交叉轴线的对齐方式

  • flex-start：与交叉轴线起始位置靠齐 
     .flex-container {
     display: flex;
     flex-flow: row nowrap;
     align-items: flex-start;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px; //下图单行状态宽度被重新计算
     height: 50px;
     background-color: green;
     margin: 1px;
 }
  • flex-end：与交叉轴线结束位置靠齐 
     .flex-container {
     display: flex;
     flex-flow: row nowrap;
     align-items: flex-end;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px; //下图单行状态宽度被重新计算
     height: 50px;
     background-color: green;
     margin: 1px;
 }
  • center：与交叉轴线中间位置靠齐 
     .flex-container {
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px;
     background-color: green;
     margin: 1px;
 }
  • baseline：根据基线对齐 
     .flex-container {
     display: flex;
     flex-flow: row nowrap;
     align-items: baseline;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px;
     background-color: green;
     margin: 1px;
 }

 #item1 {
     padding-top: 25px;
 }

 #item2 {
     padding-top: 20px;
 }
  
 #item3 {
     padding-top: 15px;
 }

 #item4 {
     padding-top: 10px;
 }
  
 #item5 {
     padding-top: 5px;
 }
  • stretch：沿着交叉轴线拉伸填充整个伸缩容器 
     .flex-container {
     display: flex;
     flex-flow: row nowrap;
     align-items: stretch;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;//此时可以设置宽度，但不能设置高度，否则无法拉伸
     background-color: green;
     margin: 1px;
 }

7、align-content：决定伸缩项目可以换行时沿着交叉轴线的对齐方式，flex-warp:warp一定要开启

  • flex-start：与交叉轴线起始位置靠齐 
     .flex-container {
     display: flex;
     flex-flow: row wrap;
     align-content:flex-start;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px;
     background-color: green;
     margin: 1px;
 }
  • flex-end：与交叉轴线结束位置靠齐 
     .flex-container {
     display: flex;
     flex-flow: row wrap;
     align-content:flex-end;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px;
     background-color: green;
     margin: 1px;
 }
  • center：与主轴线中间位置靠齐 
     .flex-container {
     display: flex;
     flex-flow: row wrap;
     align-content:center;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px;
     background-color: green;
     margin: 1px;
 }
  • space-between：平均分配到主轴线里，第一行项目靠齐起始位置，最后一行项目靠齐终点位置 
     .flex-container {
     display: flex;
     flex-flow: row wrap;
     align-content:space-between;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px;
     background-color: green;
     margin: 1px;
 }
  • sapce-around：所有行平均分配到主轴线里，两端保留一半的空间 
     .flex-container {
     display: flex;
     flex-flow: row wrap;
     align-content:space-around;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px;
     background-color: green;
     margin: 1px;
 }
  • stretch：沿着交叉轴 
     .flex-container {
     display: flex;
     flex-flow: row wrap;
     align-content:stretch;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px; //不要设置高度，不然无法拉伸
     background-color: green;
     margin: 1px;
 }

三、伸缩项目的属性，单个设置排版

1、order：定义伸缩项目的排列顺序。数值越小，排列越靠前，默认值为0。

  • 表达式 order: integer; 
     .flex-container {
     display: flex;
     flex-flow: row wrap;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px;
     background-color: green;
     margin: 1px;
 }

 #item4 {
     order: -1;
 }

 #item5 {
     order: -2;
 }

2、flex-grow：定义伸缩项目的放大比例，默认值为0，表示即使存在剩余空间，也不放大。

  • 表达式 flex-grow: number; 
     .flex-container {
     display: flex;
     flex-flow: row wrap;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px;
     background-color: green;
     margin: 1px;
 }

 #item2 {
     flex-grow: 1; //空间不足，item2不会放大
 }

 #item4 {
     flex-grow: 1; //item4放大填满剩余空间
 }

3、flex-shrink：定义伸缩项目的收缩比例，默认值为1。

  • 表达式 flex-shrink: numer; 
    .flex-container {
     display: flex;
     flex-flow: row nowrap;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px;
     background-color: green;
     margin: 1px;
 }

 #item4 {
     flex-shrink:3; //单行，空间有限，item4缩小为原来的1/3
 }

 #item5 {
     flex-shrink:4;  //单行，空间有限，item5缩小为原来的1/5
}

4、flex-basis：定义伸缩项目的基准值，剩余空间按照比例进行伸缩，默认auto。

  •  auto 
     .flex-container {
     display: flex;
     flex-flow: row wrap;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px;
     background-color: green;
     margin: 1px;
 }

 #item5 {
     flex-basis:auto;
 }
  • flex-basis: length  
     .flex-container {
     display: flex;
     flex-flow: row wrap;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px;
     background-color: green;
     margin: 1px;
 }

 #item5 {
     flex-basis:200px;
 }

5、flex：是flex-grow、flex-shrink、flex-basis的缩写，默认值 0 1 auto。

  • none: 不设置 
     .flex-container {
     display: flex;
     flex-flow: row wrap;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px;
     background-color: green;
     margin: 1px;
 }

 #item2 {
     flex: none; /* 等同于 flex: 0 0 auto */
 }
  • flex-grow flex-shrink flex-basis: 设置放大或缩小或基准线 
     .flex-container {
     display: flex;
     flex-flow: row wrap;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px;
     background-color: green;
     margin: 1px;
 }

 #item2 {
     flex: 1; /* 等同于 flex: 1 1 auto 或者 等同于 flex: auto*/
 }

6、align-self：用来设置伸缩项目在交叉轴的对齐方式。

  • auto：自动对齐 
     .flex-container {
     display: flex;
     flex-flow: row wrap;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px;
     background-color: green;
     margin: 1px;
 }

 #item3 {
     align-self: auto;
 }
  • flex-start: 向交叉轴的开始位置对齐 
     .flex-container {
     display: flex;
     flex-flow: row wrap;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px;
     background-color: green;
     margin: 1px;
 }

 #item3 {
     align-self: flex-start;
 }
  • flex-end: 向交叉轴的结束位置对齐 
     .flex-container {
     display: flex;
     flex-flow: row wrap;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px;
     background-color: green;
     margin: 1px;
 }

 #item3 {
     align-self: flex-end;
 }
  • center: 向交叉轴的中间位置对齐 
     .flex-container {
     display: flex;
     flex-flow: row wrap;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px;
     background-color: green;
     margin: 1px;
 }

 #item3 {
     align-self: center;
 }
  • baseline:向交叉轴的基准线对齐 
     .flex-container {
     display: flex;
     flex-flow: row wrap;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     height: 50px;
     background-color: green;
     margin: 1px;
 }

 #item1 {
     align-self: baseline;
     margin-top: 50px;
 }

 #item2 {
     align-self: baseline;
 }
  • stretch: 在交叉轴拉伸填满伸缩容器 
     .flex-container {
     display: flex;
     flex-flow: row wrap;
     width: 160px;
     height: 160px;
     background-color: red;
 }

 .flex-item {
     width: 50px;
     background-color: green;
     margin: 1px;
 }

 #item1 {
     align-self: stretch;
 }

 #item2 {
     align-self: stretch;
 }

 #item3 {
     align-self: stretch;
 }
起昵称好麻烦
关注
CSS Flexible Box弹性布局模块切换效果.zip
07-11
代码片段：  <input class="option-input" id="option-2" type="radio" name="options" /> ...input class="option-input" id="option-3" type="radio" name="options" />... </label>
弹性盒子(Flex Box)详解
web$-小白
07-24 3万+
弹性盒子 ,flex display
（11）：说说flexbox（弹性盒布局模型），以及适用场景
weixin_46511008的博客
10-03 816
面试官：说说flexbox（弹性盒布局模型），以及适用场景？ 一、是什么 1、flexible box 简称 flex，意为 ”弹性布局” ，可以简便、完整、响应式地实现各种页面布局 2、采用 flex 布局的元素，称为 flex 容器 container 3、它的所有子元素自动成为容器成员，称为 flex 项目 item 4、容器中默认存在两条轴， 主轴 和 交叉轴 ，呈90度关系。项目默认沿主轴排列，通过 flex-direction 来决定主轴的方向 5、每根轴都有起点和终点，这对于元素的对齐非常
弹性盒子（flexbox）布局属性详解
热门推荐
橘猫吃不胖的博客
10-28 3万+
弹性盒子布局属性详解1 弹性盒子概述2 基本概念3 常用属性3.1 布局方向flex-direction3.2 环绕效果flex-wrap3.3 水平对齐方式justify-content3.4 交叉轴对齐方式align-items3.5 轴线对齐方式align-content4 项目属性(item)4.1 排列顺序order4.2 放大比例flex-grow4.3 缩小比例flex-shrink4.4 单个对齐方式align-self4.5 综合属性flex 1 弹性盒子概述 Flexbox 是 flex
flex弹性布局（详解）
wshwsh_的博客
08-09 1万+
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
CSS:弹性盒子Flexible Box布局
LiuCJ_20000的博客
02-28 947
​ flex是flexible Box的缩写,意为 ”弹性布局“，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。当我们的父盒子设置为flex布局之后，子元素的 float 、clear 和 vertical-align 属性将会失效。伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局​ **flex布局原理：**通过给父盒子添加 flex 属性，来控制子盒子的位置和排列方式。
CSS3弹性伸缩布局之box布局
09-27
CSS3弹性伸缩布局，又称Flex布局，是一种现代的、响应式的页面布局解决方案，由W3C于2009年提出。它旨在简化复杂的网页布局问题，特别是解决垂直水平居中等难题。尽管Flex布局最初处于草案阶段，但随着浏览器的更新...
html+css：主要运用了flex布局和绝对定位
07-24
Flex布局（Flexible Box），又称弹性盒布局，是现代网页布局的首选方式，它极大地简化了多行多列元素的排列，特别是在响应式设计中。绝对定位则允许元素相对于其最近的非 static 定位的祖先元素进行定位，为复杂的...
CSS Flexible Box弹性布局模块切换效果
06-11
描述中的“CSS Flexible Box弹性布局模块切换效果”可能是指通过Flexbox实现的某种交互效果，例如卡片切换、轮播图或选项卡。这通常涉及以下技术： 1. **CSS伪类和动画：** - 使用`:hover`、`:active`、`:focus`等...
几个CSS3的flex弹性盒模型布局的简单例子演示
12-30
Flexible Box(弹性盒子)能让页面的分布更合理和方便，这是之前使用常规的布局方式所做不到的。 XML/HTML Code复制内容到剪贴板   <div u00a0class=modular>1  <div u00a0class=modular>2  ...
说说flexbox（弹性盒布局模型）及适用场景？
最新发布
常来常往，共同成长
03-08 1857
Flexible Box简称flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局 采用Flex布局的元素，称为flex容器container 它的所有子元素自动成为容器成员，称为flex项目item
CSS3 ------- Flexible Box（弹性盒子）
IfIloseyou的博客
07-28 428
弹性盒子是 CSS3 的一种新的布局模式 Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局display: flex; 行内元素也可以使用Flex布局 display: inline-flex; 注意 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 采用Flex布局的元素，称为Flex容器，简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目，简称”项目”容器默认存在两
Flex 弹性盒子布局理解
ASIA_技术
09-17 551
认知和准备 解决问题：弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间 任何元素都可以指定为Flex布局，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效 这张图来自http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 设置为flex...
flex布局（Flexible Box）
chrischeng9527的博客
02-28 645
前言上一篇，我刚刚整理了水平垂直居中，在这里顺便整理了flex布局。我们都知道传统的布局是基于盒模型。而盒模型布局主要依赖于position、display和float属性，对于部分特别要求的布局实现比较困难，比如垂直居中，是实现起来就比较困难。这里felx布局实现起来就比较容易很多，比较重要的一点是，flexbox布局是方向无关的，而不是常规布局（块是基于垂直的和内联的，是水平的）。 基础和语法在
弹性布局 Flexible Box
u011927449的博客
04-08 190
页面中任何一个元素都可以指定为 弹性布局(Flex) 属性：display 取值： 1、flex 将块级元素变为弹性布局容器 2、inline-flex 将行内元素变为弹性布局容器 兼容性: display:-webkit-flex; 注意：将元素设置为flex后，子元素的 float，clear以及vertical-align属性将失效 子元素有两条轴 Main...
CSS3新增的弹性盒模型（Flexible Box）属性
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
04-02 2431
CSS3新增的弹性盒模型（Flexible Box）
一文说白 CSS 弹性布局 Flexible Box
MoTec的博客
01-05 550
CSS 弹性布局
CSS-Learning | 弹性布局flexible Box
qq_35536883的博客
08-05 247
罗列一下弹性布局的属性，资料来源廖雪峰教程博客 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex 项目（flex item），简称"项目"。 容器属性 Flex-direction 决定主轴的方向（即项目的排列方向） row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，...
CSS3弹性伸缩布局盒（Flexible Box）模型
macanfa的博客
07-06 9159
主要整理了Flexbox模型布局功能、属性术语、语法规范、各版本语法变更和新版本Flexbox模型！除此之外，还有更头疼的是浏览器兼容性，需要多次练习整理才能好好使用伸缩布局模型来解决布局问题。
CSS3弹性盒子详解：适应多屏布局的利器
CSS弹性盒子（Flexible Box 或 flexbox）是CSS3中的一项关键布局技术，它旨在解决响应式设计中的布局问题，让网页内容能够根据屏幕尺寸和设备类型自适应调整。弹性盒布局提供了一种更为灵活的方式来管理容器内的子...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值