CSS弹性布局（一）

最新推荐文章于 2024-05-27 15:28:58 发布
最新推荐文章于 2024-05-27 15:28:58 发布
阅读量4.7k 收藏 54
点赞数 12
分类专栏： CSS 文章标签： 弹性布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43885459/article/details/85048887
版权

弹性布局可以用于做响应式页面的制作
使用弹性布局需要使用要display里的flex属性
例：让一个div是弹性布局，代码如下

.div{
	display:flex;
	}

flex里有很多属性，其中设置在容器上的属性有6个

1.flex direction:决定主轴的方向（即项目的排列方向）。

  • row:主轴为水平方向，起点在左边
    例
<head>
    <meta charset="utf-8">
    <title>弹性布局</title>
    <style>
        .div{
            width: 1300px;
            background-color: green;
            height: 200px;
            display: flex;
            flex-direction:row;
        }
        .div1,.div2,.div3{
            width: 300px;
            height: 200px;
        }
        .div1{
            background-color: red;
        }
        .div2{
            background-color: darkcyan;
        }
        .div3{
            background-color: orange;
        }

    </style>
</head>

<body>
<div class="div">
    <div class="div1">one</div>
    <div class="div2">two</div>
    <div class="div3">three</div>
</div>
</body>

效果如下
在这里插入图片描述

  • row-reverse:主轴为水平方向，起点在右边。
.div{
            width: 1300px;
            background-color: green;
            height: 200px;
            display: flex;
            flex-direction:row;
        }

结果如下
在这里插入图片描述

  • column:主轴为垂直方向，起点在上沿。
    例：
.div{
            width: 1300px;
            background-color: green;
            height: 200px;
            display: flex;
            flex-direction:column;
        }

结果如下
在这里插入图片描述

div的高度被自动压缩

  • column-reverse:主轴为垂直方向，起点在下沿。
    例
.div{
            width: 1300px;
            background-color: green;
            height: 200px;
            display: flex;
            flex-direction:column-reverse;
        }

结果如下图
在这里插入图片描述

2.flex-wrap：一行排不下，如何换行

  • wrap:换行，第一行在上方
    例
 .div{
            width: 100%;
            background-color: green;
            height: 200px;
            display: flex;
            flex-wrap: wrap;
        }

结果如下
在这里插入图片描述

  • nowrap:不换行
    例
.div{
            width: 100%;
            background-color: green;
            height: 200px;
            display: flex;
            flex-wrap: wrap;
        }

结果如下
在这里插入图片描述

div不换行，宽度自动收缩

  • wrap-reverse:换行，第一行在下方。
    例
.div{
            width: 100%;
            background-color: green;
            height: 200px;
            display: flex;
            flex-wrap: wrap-reverse;
            margin-top: 200px;
        }

结果如下
在这里插入图片描述

3.flex-flow：flex-direction属性和flex-wrap属性的简写形式

例

.div{
            width: 100%;
            background-color: green;
            height: 200px;
            display: flex;
            flex-flow: row wrap;
            margin-top: 200px;
        }

4.justify-content:项目在主轴上的对齐方式

  • flex-start:左端对齐
    例
.div{
            width: 100%;
            background-color: green;
            height: 200px;
            display: flex;
            justify-content:flex-start;
            margin-top: 200px;
        }

结果如下
在这里插入图片描述

  • flex-end:右端对齐
    例
.div{
            width: 100%;
            background-color: green;
            height: 200px;
            display: flex;
            justify-content:flex-end;
            margin-top: 200px;
        }

结果如下

在这里插入图片描述

  • center:居中对齐
    例
.div{
            width: 100%;
            background-color: green;
            height: 200px;
            display: flex;
            justify-content:center;
            margin-top: 200px;
        }

结果如下
在这里插入图片描述

-space-around:每个项目两侧的间隔相等
例

.div{
            width: 100%;
            background-color: green;
            height: 200px;
            display: flex;
            justify-content:space-around;
            margin-top: 200px;
        }

结果如下
在这里插入图片描述

-space-between:两端对齐，项目之间的间隔都相等
例

.div{
            width: 100%;
            background-color: green;
            height: 200px;
            display: flex;
            justify-content:space-between;
            margin-top: 200px;
        }

结果如下
在这里插入图片描述

5.align-items:项目在交叉轴上如何对齐

  • flex-start
    例
.div{
            width: 100%;
            background-color: green;
            height: 200px;
            display: flex;
            justify-content:space-between;
            align-item:flex-start;
            
        }

结果如下
在这里插入图片描述

  • flex-end
    例
.div{
            width: 100%;
            background-color: green;
            height: 200px;
            display: flex;
            justify-content:space-between;
            align-item:flex-end;
            
        }

结果如下

在这里插入图片描述

  • center
    例
.div{
            width: 100%;
            background-color: green;
            height: 200px;
            display: flex;
            justify-content:space-between;
            align-item:center;
            
        }

结果如下

在这里插入图片描述

  • stretch::如果项目未设置高度或设为auto，将占满整个容器的高度。
    例
.div{
            width: 100%;
            background-color: green;
            height: 500px;
            display: flex;
            justify-content: space-between;
            align-items: stretch;

        }

结果如下
在这里插入图片描述

  • baseline:项目的第一行文字的基线对齐。
    例
.div{
            width: 100%;
            background-color: green;
            height: 500px;
            display: flex;
            justify-content: space-between;
            align-items: stretch;

        }

在这里插入图片描述

6.align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

小栗子的普
关注
  • 12
    点赞
  • 踩
  • 54
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 弹性布局的详细说明
一步一个脚印，踏实努力，向着目标前进
07-18 1648
CSS弹性布局（Flexible Box Layout，简称Flexbox）是一种用于创建自适应和可伸缩布局的CSS模块。它提供了一种简单而强大的方式来对容器中的子元素进行布局，使它们能够自动调整大小、排列和对齐。Flexbox通过在容器和子元素上应用一些特定的CSS属性来实现布局。下面是一些常用的Flexbox属性：display：指定容器为Flex容器，可以设置为或。前者会将Flex容器作为块级元素显示，后者会将Flex容器作为行内元素显示。
CSS FLEX 弹性布局详解
qq_53569667的博客
11-29 851
关于 CSS flex 布局的知识点，可作手册参考。
Css 弹性布局（Flex）详细介绍（Flex 属性详解、场景分析）_css flex
最新发布
2401_85124851的博客
05-27 933
Webkit 内核的浏览器，必须加上-webkit前缀。采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
flex布局
weixin_44852765的博客
04-08 365
-flex-direction：设置主轴的方向 row (默认值)从左到右 row-reverse 从右到左 column 从上到下 column-reverse 从下到上 - justify-content：设置主轴上的子元素排列方式 flex-start 从头部开始 flex-end 从尾部开始 center 居中显示 space-around 平分剩余空间 space-...
CSS Flex 弹性布局
blog
07-13 1530
文章目录前言Flex一、专业名词二、属性值定义 flex 布局CSS 属性flex-directionflex-wrapflex-flowflex-growflex-shrinkflex-basisflexorder对齐属性align-contentalign-itemsalign-selfjustify-contentplace-contentrow-gapcolumn-gapgap总结 前言 在页面开发的过程中，CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器
CSS之Flex布局：认识flexbox
weixin_44693550的博客
10-18 188
1.弹性盒子是一种用于按行或按列布局元素的一维布局方法· 2.元素可以膨胀以填充额外的空间，收缩以适应更小的空间3.通常我们使用Flexbox来进行布局的方案称之为flex布局flex布局的重要概念两个重要概念1.开启了flex布局的元素交2.flex container里面的中介子元素叫做flex item当flex container中的子元素变成了flex item时，具备以下特点：1.flex item 的布局将。
21.6 CSS 弹性布局
10-07
综上所述，CSS弹性布局（Flexbox）提供了一套完善的解决方案，帮助开发者构建更具灵活性和响应性的网页布局。通过理解并熟练运用Flexbox的相关属性，你可以创建出更加高效、美观且适应性强的网页设计。在实际开发中...
10分钟理解CSS3 FlexBox弹性布局
09-22
主要介绍了10分钟理解CSS3 FlexBox弹性布局的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css flex 弹性布局详解
09-24
CSS Flex（弹性布局）是一种强大的布局模式，特别适用于创建响应式设计，因为它允许开发者更灵活地控制元素在容器中的对齐方式和排列顺序。在本文中，我们将深入探讨Flex布局的关键概念，包括基本用法、父容器属性...
CSS中的EM属性之弹性布局
09-25
教程将引导大家如何使用“em”来创建一个基本的弹性布局，从而学习其如何计算？又是如何使用“em”对层进行弹性扩展？又是如何扩展文本和图像等内容？下在我们就一起带着这些问题开始今天的“em”之行。
【CSS布局】—— flex（弹性）布局
热门推荐
qq_49002903的博客
08-28 3万+
CSS3新增了弹性盒子模型( Flexible Box或ElexBox)，是-种新的用于在HTML页面实现布局的方式。使得当 HTML页面适应不同尺寸的屏幕和不同的设备时，元素是可预测地运行。弹性盒子模型实现HTML页面布局是与方向无关的。不类似于块级布局侧重垂直方向，内联布局侧重水平方向。弹性盒子模型主要适用于HTML页面的组件以及小规模的布局，而并不适用于大规模的布局，否则会影响HTML页面性能...
CSS-弹性盒模型
软工二班秦同学的博客
03-30 351
flex
CSS之弹性盒子模型（Flex布局）
fcc627的博客
04-26 2130
文章目录一、Flex布局是什么？二、基本概念三、容器的属性3.1 flex-direction属性3.2 justify-content属性3.3 flex-wrap属性3.4 align-items属性3.5 align-content属性3.6 flex-flow属性四、项目的属性4.1 flex属性4.2 align-self属性4.3 order属性五、相关案例5.1 案例1：flex设置主轴上的子元素排列方式5.2 案例2：flex-wrap子元素是否换行5.3 案例3：flex子项和flex份数
CSS3-弹性布局
Amo Xiang的博客
04-25 1590
CSS3-弹性布局弹性布局(伸缩布局)给容器设置的样式flex-directionjustify-contentflex-wrapalign-itemsalign-contentflex-flow示例代码1:flex参数详解示例代码2:flex换行问题给子元素设置的样式orderflex-growflex-shrinkflex-basisflexalign-self示例代码:flex布局给子元素设...
CSS3弹性布局
优搜新百土
02-19 101
弹性布局（display: flex） Flexbox是 CSS3 引入的新的布局模式，决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式： 在不同方向排列元素 重新排列元素的显示顺序 更改元素的对齐方式 动态地将元素装入容器 1、基本概念 采用 Flex 布局的元素，称为 Flex 容器（flex contai
css弹性盒模型详解-介绍
qq_34451947的博客
11-13 453
一、什么是弹性盒模型 官方的统一回答:弹性盒模型是指在父级改变大小的时候内部的自己元素也会相应的改变大小，即子集会按照父级的大小按比例自适应大小。 弹性盒模型的提出可以解决一些响应式布局的需求 二、基本使用 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目” 注意事项 设为F...
HTML之弹性布局
顾风的博客
01-14 3446
相信大家在做html页面布局的时候都有过一个很脑袋疼的问题，那就是尺寸不平均，尺寸不平均会导致页面的不整齐，今天给大家分析下弹性布局。 弹性布局html布局中是很广泛的一个属性，他可以让你整个页面的布局合理化的分布在平均的位置上，重要的是你可以定义每部分的百分比数。 ...
css弹性布局，自动换行，文本垂直水平居中
caimaomaocai的博客
03-31 1万+
/*父级*/ .location-box{ flex:1; background:#fff; display:flex; flex-wrap:wrap; /*换行*/ } /*子级*/ .location-box .one-item{ display:flex; ...
css弹性布局平均对齐
08-19
要实现CSS弹性布局的平均对齐，你可以使用flexbox布局。 首先，创建一个包含要对齐的元素的容器。然后，在容器上应用以下CSS样式： ```css .container { display: flex; justify-content: space-around; align-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值