CSS 弹性盒子布局使用方法介绍

最新推荐文章于 2024-06-14 09:42:20 发布
最新推荐文章于 2024-06-14 09:42:20 发布
阅读量2.4k 收藏 37
点赞数 6
分类专栏： css 文章标签： CSS 弹性盒子模型
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44869002/article/details/102702965
版权

标题

CSS 弹性盒子布局

CSS 弹性盒子布局 是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。

CSS 属性

CSS 弹性盒子布局的css分两种：

  • 一种是应用中父容器的的CSS,用于设定父容器本身或者全部子元素的表现形式
  • 另一种则是应用在子元素上，用于设置单个子元素的表现行为

下面将逐一展示css代码和效果

应用在父容器元素上的CSS属性

1.display: flex | inline-flex;
用于设定一个flex（**弹性盒子布局**）容器

flex 设定一个块级的flex（弹性盒子布局）容器

<ul style="display: inline-flex;">
    <li>1</li>
    <li>2</li>
</ul>
<ul style="display: inline-flex;">
    <li>1</li>
    <li>2</li>
</ul>

在这里插入图片描述inline-flex 设定一个行内的flex（弹性盒子布局）容器

<ul style="display: inline-flex;">
    <li>1</li>
    <li>2</li>
</ul>
<ul style="display: inline-flex;">
    <li>1</li>
    <li>2</li>
</ul>

在这里插入图片描述

2. flex-direction
设置伸缩盒对象的子元素在父容器中位置
  1. flex-direction: row; 设置伸缩盒对象的子元素在父容器中的水平分布并靠在父容器的左侧
<ul class="box" style="flex-direction: row;">
     <li>1</li>
     <li>2</li>
     <li>3</li>
</ul>

在这里插入图片描述

  1. flex-direction: row-reverse; 设置伸缩盒对象的子元素在父容器中的位置水平逆序分布并靠在父容器的右侧
<ul class="box" style="flex-direction: row-reverse;">
     <li>1</li>
     <li>2</li>
     <li>3</li>
</ul>

在这里插入图片描述

  1. flex-direction: column; 设置伸缩盒对象的子元素在父容器中的位置垂直分布并靠在父容器上面
<ul class="box" style="flex-direction:column;">
     <li>1</li>
     <li>2</li>
     <li>3</li>
</ul>

在这里插入图片描述

  1. flex-direction: column-reverse; 设置伸缩盒对象的子元素在父容器中的位置垂直逆序分布并靠在父容器底部
<ul class="box" style="flex-direction:column;">
     <li>1</li>
     <li>2</li>
     <li>3</li>
</ul>

在这里插入图片描述

3. flex-wrap
设置伸缩盒对象的子元素超出父容器时是否换行
  1. flex-wrap: nowrap; 设置伸缩盒对象的子元素超出父容器时是不换行，如果没有设置min-width,这样会压缩子元素的width
<ul class="box" style="flex-wrap: wrap;">
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>1</li>
     <li>2</li>
     <li>3</li>
</ul>

在这里插入图片描述
2. flex-wrap: wrap; 设置伸缩盒对象的子元素超出父容器时是换行

<ul class="box" style="flex-wrap: wrap;">
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>1</li>
     <li>2</li>
     <li>3</li>
</ul>

在这里插入图片描述

  1. flex-wrap: wrap-reverse; 设置伸缩盒对象的子元素超出父容器时是自下而上换行
<ul class="box" style="flex-wrap: wrap-reverse;">
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>1</li>
     <li>2</li>
     <li>3</li>
</ul>

在这里插入图片描述

4. flex-flow
复合属性，设置伸缩盒对象子元素的排列方式

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

<ul class="box" style="flex-flow: column wrap-reverse; max-height: 200px;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
</ul>

在这里插入图片描述

5. justify-content
设置或检索弹性盒子元素在水平方向上的对齐方式。
  1. justify-content:flex-start; 设置伸缩盒对象的子元素在父容器中水平方向上左对齐
<ul class="box" style="justify-content:flex-start;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

在这里插入图片描述

  1. justify-content:flex-end; 设置伸缩盒对象的子元素在父容器中水平方向上右对齐
<ul class="box" style="justify-content:flex-end;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

在这里插入图片描述

  1. justify-content:center; 设置伸缩盒对象的子元素在父容器中水平方向上居中对齐
<ul class="box" style="justify-content:center;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

在这里插入图片描述

  1. justify-content:space-around; 设置伸缩盒对象的子元素在父容器中水平方向上平均分布
<ul class="box" style="justify-content:space-around">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

在这里插入图片描述

  1. justify-content:space-between; 设置伸缩盒对象的子元素在父容器中水平方向上平均分布
<ul class="box" style="justify-content:space-between;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

在这里插入图片描述

6. align-items
设置弹性盒子元素在垂直方向上的对齐方式。（适用于子元素排列为单行）
  1. align-items:flex-start; 设置伸缩盒对象的子元素在父容器中紧靠顶部
<ul class="box" style="min-height: 200px; align-items:flex-start;">
    <li>1</li>
    <li>2</li>    
    <li>3</li>
</ul>

在这里插入图片描述

  1. align-items:flex-end;设置伸缩盒对象的子元素在父容器中紧靠底部
<ul class="box" style="min-height: 200px; align-items:flex-end;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

在这里插入图片描述
3. align-items:center;设置伸缩盒对象的子元素在父容器中垂直居中

<ul class="box" style="min-height: 200px; align-items:center;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

在这里插入图片描述
4. align-items:baseline;设置伸缩盒对象的子元素在父容器中基线对齐.如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。

<ul class="box" style="min-height: 200px; align-items:baseline;">
    <li style="height: 30px;">1</li>
    <li style="height: 40px;">2</li>
    <li>3</li>
</ul>

在这里插入图片描述
5. align-items:stretch;如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

<ul class="box" style="min-height: 200px; align-items:baseline;">
    <li style="height: 30px;">1</li>
    <li style="height: 40px;">2</li>
    <li>3</li>
</ul>

在这里插入图片描述

7. align-content
设置弹性盒堆叠伸缩行的垂直方向上对齐方式。（适用于子元素排列为多行）
  1. align-content: flex-start; 设置弹性盒堆叠伸缩行的顶部对齐
<ul class="box" style="min-height: 200px; flex-wrap: wrap; align-content: flex-start;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
</ul>

在这里插入图片描述
2. align-content: flex-end;设置弹性盒堆叠伸缩行的底部对齐

<ul class="box" style="min-height: 200px; flex-wrap: wrap; align-content: flex-end;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
</ul>

在这里插入图片描述
3. align-content: center; 设置弹性盒堆叠伸缩行的垂直居中

<ul class="box" style="min-height: 200px; flex-wrap: wrap; align-content: center;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
</ul>

在这里插入图片描述
4. align-content: space-between; 设置弹性盒堆叠伸缩行的平均分布，第一行和最后一行会紧靠边框

<ul class="box" style="min-height: 200px; flex-wrap: wrap; align-content: space-between;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
</ul>

在这里插入图片描述
5. align-content: space-around; 设置弹性盒堆叠伸缩行的平均分布，第一行和最后一行不会紧靠边框

<ul class="box" style="min-height: 200px; flex-wrap: wrap; align-content: space-around;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
</ul>

在这里插入图片描述
6. align-content:stretch; 各行将会伸展以占用剩余的空间

<ul class="box1" style="display: flex; min-height: 200px; flex-wrap: wrap; align-content: stretch;">
    <li style="width: 50px;">1</li>
    <li style="width: 50px;">2</li>
    <li style="width: 50px;">3</li>
    <li style="width: 50px;">4</li>
    <li style="width: 50px;">5</li>
    <li style="width: 50px;">6</li>
    <li style="width: 50px;">7</li>
    <li style="width: 50px;">8</li>
    <li style="width: 50px;">9</li>
    <li style="width: 50px;">10</li>
    <li style="width: 50px;">11</li>
    <li style="width: 50px;">12</li>
    <li style="width: 50px;">13</li>
</ul>

在这里插入图片描述

应用在子元素上的CSS属性

order
用整数值来定义排列顺序，数值小的排在前面。可以为负值

<ul class="box" style="justify-content: space-around;">
    <li style="order: 3;">1</li>
    <li style="order: 2;">2</li>
    <li style="order: 1;">3</li>
</ul>

在这里插入图片描述

flex-grow
设置弹性盒的扩展比率。根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。

<ul class="box" style="justify-content: space-around;">
    <li>1</li>
    <li style="flex-grow:1;">2</li>
    <li style="flex-grow:3;">3</li>
</ul>
/**
*  不设置“1” 的扩展比例；所以“1”的宽度为默认宽度；
*  “2”和“3”的扩展比例为1：3；也就是说把父容器content
*  宽度减去“1”的宽度，然后再把剩余的宽度分成1+3=4份，
*  “2”占一份，“3” 占据三份
*/

在这里插入图片描述

flex-shrink
设置弹性盒的收缩比率。根据弹性盒子元素所设置的扩展因子作为比率来分配收缩空间。

<ul class="box" style="justify-content: space-around;">
    <li style="width: 400px;">1</li>
    <li style="width: 400px;">2</li>
    <li style="width: 400px; flex-shrink:3;">3</li>
</ul>
/**
 *  不设置“1” “2“收缩比例；“3”的收缩比例为3；
 * 收缩比例跟扩展比例相反，当子元素可宽度加起
 * 来超过父容器的content的宽度，则子元素需要
 * 按收缩比例来分摊超出的宽度。也就是说减去分
 * 担的宽度。这里每个子元素的默认宽度为400px,
 * 而父容器的宽度为600px,则超出了200px.这时就
 * 需要每个子元素按比例减去各自的宽度。分别为
 * 40px:40px:120px
*/

在这里插入图片描述

flex-basis
设置弹性盒伸缩基准值

<ul class="box" style="justify-content: space-around;">
    <li style="width: 400px;">1</li>
    <li style="width: 400px;flex-basis:600px">2</li>
    <li style="width: 400px; flex-shrink:3;">3</li>
</ul>

在这里插入图片描述

align-self
设置或检索弹性盒子元素自身在垂直方向上的对齐方式

可选值：

align-self: auto | flex-start | flex-end | center | baseline | stretch

  • auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
  • flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
  • flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
  • center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
  • baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
  • stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
<ul class="box" style="justify-content: space-around; height: 100px;">
    <li style="align-self: auto;">auto</li>
    <li style="align-self: flex-start;">flex-start</li>
    <li style="align-self: flex-end;">flex-end</li>
    <li style="align-self: center;">center</li>
    <li style="align-self: baseline;">baseline</li>
    <li style="align-self: stretch;">stretch</li>
</ul>

在这里插入图片描述

以上就是 CSS 弹性盒子布局 的简述。

本文参考自：

http://caibaojian.com/flexbox-guide.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout

本文案例源码下载地址：
https://download.csdn.net/download/weixin_44869002/11912701

杰~JIE
关注
  • 6
    点赞
  • 踩
  • 37
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
转---30 分钟学会 Flex 布局
weixin_34216107的博客
03-04 199
正文从这开始～ Flex 基本概念： 在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴，这个我们后面再说。 在容器中的每个单元块被称之为 flex item，每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cro...
弹性盒子的布局
jan_ping的博客
02-13 6664
1 弹性盒子(弹性布局) 1.1 弹性布局介绍 Flexbox是flexible box的简称(意思是"灵活的盒子容器")，是CSS3引入的新的布局模式。它决定了 元素如何在页面商排列，使他们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为Flexbox，是因为它能够扩展和收缩flex容器内地元素，以最大限度地填充可用空 间。与以前布局方式(如table布局和浮动元素内嵌元素)相比，Flexbox是一个更强大的方式 （1）在不同方向排列元素 （2）重新排列元素的显示顺序 （3）更改元
CSS弹性盒子（详细版，建议收藏）
L2636504548的博客
06-14 1256
弹性盒子是CSS3的一种新的布局模式CSS3弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式引入弹性盒布局模型的目的是提供一种更有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
如何使用弹性布局？如何做到自适应?
lyx9611的博客
05-18 1886
1、简单介绍如何使用弹性布局 1、父元素必须的属性：display:flex;； 这里，我一般都会写一个弹性样式的class，如下： /*默认横向显示的*/ .flex-row{ display:flex } /**写一个纵向显示的*/ .flex-column{ display:flex; flex-direction:column; } 这样，父级元素的弹性盒子我们就写好了。 2、如果我们想换行怎么办？默认是不换行的哦；只需要再父级元素上加上下面的这个样式即可。 flex-wrap:wrap;
CSS弹性布局（一）
weixin_43885459的博客
12-26 4743
弹性布局可以用于做响应式页面的制作 使用弹性布局需要使用要display里的flex属性 例：让一个div是弹性布局，代码如下 .div{ display:flex; } flex里有很多属性，其中设置在容器上的属性有6个 1.flex direction:决定主轴的方向（即项目的排列方向）。 ...
CSS3弹性盒子
YiRan_BuFanTeXi的博客
08-30 188
CSS3弹性盒子 弹性盒子是 CSS3 的一种新的布局模式，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。 弹性容器内包含了一个或多个弹性子元素。 弹性容器 displ...
AngularJS 实现弹性盒子布局的方法
10-21
本文将详细介绍如何在AngularJS中实现弹性盒子布局。 首先，我们需要了解Flexbox的基本概念。弹性盒子模型允许我们定义容器（父元素）以及其子元素（子项）的行为，以适应不同的屏幕尺寸和设备类型。主要属性包括：...
CSS弹性盒子.docx
02-29
CSS弹性盒子，也称为Flexbox，是CSS3中引入的一种强大的布局模式，旨在解决复杂的网页布局问题，特别是在处理响应式设计和不同屏幕尺寸时。它允许开发者更灵活地控制元素的排列、对齐和空间分配，使网页设计更加简洁...
css弹性盒子（flex）管理系统布局
11-20
因为经常做后台管理系统，时不时都要去下一些框架，然而有时候仅仅只是需要一个页面框架布局，却需要引入一大堆文件，于是，自己用css弹性盒子（flex）简单做了一个管理系统布局，代码简单，下载即用。不是说人家...
这是一个css弹性盒子布局的一些语法
最新发布
06-22
这是一个弹性盒子布局的一些语法
DIV+CSS弹性盒子布局
前端分享
09-18 3821
使用弹性 盒子布局网页，可以省去浮动，因此也避免了由于浮动带来的负面影响。 下面直接上代码 .big-box{ width: 1000px;height: 500px;background: #ccc; /*关键代码来了 */ display: flex;/*变成弹性盒子*/ flex-flow: wrap;/*内容换行*/ justify-content:
css3之弹性盒子
qq_44193048的博客
05-05 536
什么是弹性盒子？ 在弹性盒子布局中，弹性容器(flex container)中的子元素可以以任意方向排布，也可以伸缩它们自身的尺寸，或者增大自身尺寸以填满未被使用的空间，或者缩小自身尺寸以避免超出父容器的尺寸范围。子元素横向或纵向对齐方式很容易被修改。嵌套的弹性盒子布局(水平内嵌套垂直，或垂直内嵌套水平)，可以用来创建两个维度上的布局。 1.flex-direction 属性 flex-direc...
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
热门推荐
肥晨开发的学习之路
06-16 12万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
教你快速上手Flex弹性盒布局（容器属性）
passerby的博客
07-13 2298
Flex弹性布局CSS3弹性盒（Flexilble Box或flexbox）是一种布局方式，常用与当页面需要适应不同的屏幕大小以及设备类型是能够确保元素拥有恰当的行为作用能够更加高效方便地控制元素的对齐，排列无论元素的尺寸是固定高度的还是动态的，都可以自动计算布局内元素的尺寸控制元素在页面内的布局方向按照不同的DOM所指定排序方式对屏幕上的元素重新排列好处可以让子元素排列在一行使子元素的高度一致。
超详细的flex弹性布局+实例分析
xw1193195009的博客
04-11 9597
1.基本概念 什么是flex？ flex全称是FlexibleBox，即弹性盒子，用来进行弹性布局，弹性布局也是目前前端应用最广的布局之一。 flex布局的优点，为什么要用flex布局？ 1.可以为盒子模型提供最大的灵活性，任何一个容器都可以指定为flex布局。 2.更加符合响应式设计的特点，方便页面在不同设备上的布局显示。 主要概念介绍 main axis：主轴，如果内部元素是横向排列的，那么此时x轴是主轴，如果内部元素是纵向排列的，则主轴为y轴。 cross axis：交叉轴，与主轴垂直的轴
弹性盒布局
w8666999的博客
11-20 1374
弹性盒布局
CSS中的弹性盒子总结
m0_55870194的博客
03-23 636
一、弹性盒布局相关词汇 图中是一个 flex-direction 属性为 row的弹性容器，意味着其内的弹性项目将根据既定书写模式沿主轴水平排列，其方向为元素的文本流方向，在这个例子里，为从左到右。 1.弹性容器(Flex container) 包含着弹性项目的父元素。通过设置 display属性的值为 flex或 inline-fle来定义弹性容器。 2.弹性项目(Flex item) 弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。 3.轴(Axis) 每个弹性框布局
css样式之flex弹性盒布局
m0_72642533的博客
02-27 805
要使用flex布局，任何一个容器都可以指定成为Flex布局，但是在设为Flex布局后,其子元素的float(浮动)、clear(规定元素哪一侧不允许浮动)和vertical-align(元素垂直对齐方式)属性将失效。5个值：flex-start、flex-end、center、space-around、space-between
CSS3
chuyaonong6148的博客
04-27 346
justify-content 属性 内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。 各个值解析: flex-start： 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边...
css 弹性盒子布局flex
11-05
在小程序中，flex布局是完全兼容的，并且微信官方也推荐使用flex布局。如果你想了解更多关于flex布局的知识，可以参考上面提供的链接。下面是一个简单的例子： ```css .container { display: flex; justify-...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值