了解flex布局

最新推荐文章于 2024-04-22 11:43:36 发布
最新推荐文章于 2024-04-22 11:43:36 发布
阅读量555 收藏 2
点赞数 1
文章标签： html javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70847086/article/details/125932681
版权

 flex布局

display: flex;

一定要给亲父级加。

  1. 在flex眼中，标签不再分类。

    • 简单说就是没有块级元素，行内元素和行内块元素

    • 任何一个元素都可以直接给宽度和高度一行显示

  2. Flex不存在脱标的情况：也就是基本淘汰了浮动，更不用清除浮动

  3. 当然存在兼容性问题，如果不考虑兼容性可以大量使用，如果是移动端则不用考虑直接flex

 主轴对齐方式

 justify-content: flex-start;

 justify-content: flex-end;

 justify-content: center;

justify-content: space-around;

 justify-content: space-between;效果

 justify-content: space-evenly;

 完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1200px;
            height: 400px;
            background-color: pink;
            margin: 100px auto;
            /* 弹性容器 */
            display: flex;
            /* 主轴对齐方式 */

            /*起点开始依次排序 从左到右 默认值*/
            justify-content: flex-start;

            /*终点开始依次排序 从右到左 */
            justify-content: flex-end;

            /* 主轴居中  重点*/
            justify-content: center;

            /* 盒子平均分,比例1:2 */
            justify-content: space-around;

            /* 盒子平均分,2边要靠边,中间平均分距离 重点*/
            justify-content: space-between;

            /* 盒子平均分,比例为1:1 */
            justify-content: space-evenly;
        }

        /* 父盒子里面的儿子弹性盒子 */
        .box>div {
            width: 250px;
            height: 200px;
            background-color: aquamarine;
        }

        .box>div:nth-child(2n+1) {
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>

</html>

  侧轴对齐方式

 align-items: stretch;

  align-items: flex-start;

  align-items: flex-end;

 align-items: center;

 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1200px;
            height: 400px;
            background-color: pink;
            margin: 100px auto;
            /* 父变成弹性容器 */
            display: flex;
            /* 侧轴对齐方式 子元素默认和父元素高度一样 拉伸*/
            align-items: stretch;
            /* 从上边开始排列  默认起点开始排列在上面 */
            align-items: flex-start;
            /* 从下边开始排列  终点开始排列 */
            align-items: flex-end;

            /* 侧轴居中 ,垂直居中  重点*/
            align-items: center;
        }

        /* 子元素弹性盒子 */
        .box>div {
            width: 250px;
            height: 200px;
            background-color: aquamarine;
        }

        .box>div:nth-child(2n+1) {
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>

</html>

可以运用主轴和侧轴的对齐方式使盒子垂直居中显示

 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background-color: pink;
            /* 弹性容器 */
            display: flex;
            /* 主轴对齐 */
            justify-content: center;
            /* 侧轴对齐 */
            align-items: center;
        }

        /* 子盒子是弹性盒子 */
        .box .son {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="son"></div>
    </div>
</body>

</html>

侧轴子元素单独对齐方式

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 600px;
            height: 600px;
            background-color: pink;
            margin: 100px auto;
            /* 弹性容器 */
            display: flex;
        }

        /* 子元素弹性盒子 */
        .box>div {
            width: 250px;
            height: 200px;
            background-color: aquamarine;
            border-radius: 50%;
            text-align: center;
            line-height: 200px;
        }

        .box>div:nth-child(2n+1) {
            background-color: yellowgreen;
        }

        /* align-self 单独控制子元素 ,取值和align-items一致*/
        .box>div:first-child {
            align-self: flex-start;
        }

        .box>div:nth-child(2) {
            align-self: center;
        }

        .box>div:last-child {
            align-self: flex-end;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

伸缩比

把父盒子分为若干份数，每个子盒子各占几份。

    flex:1; 一定给子盒子加

    分配父级剩余的空间

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1200px;
            height: 400px;
            background-color: pink;
            margin: 100px auto;
            /* 弹性容器 */
            display: flex;
        }

        /* 弹性盒子 */
        .box>div {
            /* 伸缩比,占的是父盒子的宽度,把他分成了等份 */
            flex: 1;
            margin-right: 15px;
            background-color: aqua;
        }

        .box>div:nth-child(2n) {
            flex: 2;
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>

</html>

 圣杯布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .search {
            width: 100%;
            height: 50px;
            background-color: pink;
            /* 弹性容器 */
            display: flex;
        }

        .search .left {
            width: 50px;
            height: 50px;
            background-color: aqua;
        }

        .search .center {
            flex: 1;
            background-color: red;
        }

        .search .right {
            width: 50px;
            height: 50px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <!-- 圣杯布局,2边固定宽高,中间自适应 -->

    <div class="search">
        <div class="left">左边</div>
        <div class="center">中间的内容</div>
        <div class="right">右边</div>
    </div>
</body>

</html>

调整主轴方向

主轴默认是水平方向, 侧轴默认是垂直方向

修改主轴方向属性: flex-direction

 flex-direction: column;

 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: pink;
            /* 弹性容器 */
            display: flex;
            /* 主轴默认是X轴 */
            /* flex-direction: row; */
            /* 主轴反方向排列 */
            /* flex-direction: row-reverse; */
            /* 调整主轴,换成Y轴 */
            flex-direction: column;
            /* 调整主轴,换成Y轴反方向排列 */
            /* flex-direction: column-reverse; */
            /* 侧轴居中 */
            align-items: center;
            /* 主轴居中 */
            justify-content: center;
        }

        .box>div {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="son">老大</div>
        <div class="son2">老二</div>
    </div>
</body>

</html>

flex多行排列

 flex-wrap: wrap;  换行

特别是多行的情况下，我们需要给弹性盒子换行，给 父盒子 弹性容器加。

 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 弹性容器 */
            display: flex;
            /* flex弹性盒子换行显示 */
            flex-wrap: wrap;
            /* 侧轴居中 */
            align-items: center;
            align-items: flex-end;
        }

        /* flex布局默认是不换行 */
        .box>div {
            width: 200px;
            height: 100px;
            background-color: red;
        }

        .box>div:nth-child(2n) {
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</body>

</html>

多行盒子侧轴排列

 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 弹性容器 */
            display: flex;
            /* 主轴居中 */
            justify-content: center;
            flex-wrap: wrap;

            /* 单行盒子侧轴的排列方式 */
            /* align-items: center; */
            /* 多行侧轴的排列方式 ,一般配合换行使用*/
            /* align-content: center; */
            /* align-content: flex-start; */
            /* align-content: flex-end; */
            /* align-content: space-around; */
            /* align-content: space-between; */
            align-content: space-evenly;
        }

        /* flex布局默认是不换行 */
        .box>div {
            width: 200px;
            height: 100px;
            background-color: red;
        }

        .box>div:nth-child(2n) {
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>

</html>

 

ifreen
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
深入理解Flex布局以及计算
02-25
对于Flex布局，阅读了大漠老师和其他老师写的文章后，我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节。在大漠老师的帮助下，我去查阅Flexbox的W3C规范文档。注：本篇博文不适合未接触过Flex布局的人,如果想了解flex布局基础。请参考理解Flexbox：你需要知道的一切flex盒模型是被期望设计成：在任何流动的方向上(包括上下左右)都能进行良好的布局可以以逆序或者以任意顺序排列布局可以线性的沿着主轴一字排开或者沿着侧轴换行排列可以弹性的在任意的容器中伸缩大小（今天重点研究的主题）可以使子元素们在容器主轴方向上或者在容器侧轴方向上进行对齐可以动态的沿着主轴方向伸
Flex布局在小程序的使用
03-29
所以为了在小程序开发中更方便地布局，有必要来详细了解下Flex布局在小程序的使用。本文将针对Flex布局的各个属性进行介绍，并直接使用wxss来编写例子，运行环境是小程序的开发者工具。 Flex布局的基本概念 Flex布局...
HTML中布局flex的标签,CSS3---Flex布局--项目属性
weixin_39772388的博客
06-26 277
前言今天学习了项目的属性；【内容】项目属性：①沿主轴方向上的排列顺序order: 0(默认值) | ②项目的收缩因子flex-shrink: 1(默认值) |③项目的扩张因子flex-grow: 0(默认值) |④项目width属性替代品flex-basis: auto(默认值) | px⑤flex-grow、flex-shrink、flex-basis的简写方式：flex 属性⑥项目在行中交叉轴...
Flex中的标签
九天之凤
12-25 871
标签描述 [ArrayElementType]在数组中定义所有允许的数据类型。 [Bindable]声明一个属性可以在代码中使用数据绑定表达式。 [DefaultProperty]定义组件在MXML中使用时的默认属性的名称。[Deprecated]标识一个类或类的元素是不推荐使用的，这样编译器能认出他并在被调用时给出一个警告信息。[Effect]定义MXML的特效属性名称。 [Embed]
Flex中的Bindable的用法
VirgooooS
08-20 181
虽然多数Flex开发者都使用过[Bindable]标签，但是很多人都不知道这个标签的作用甚至不知道该标签为何物。[Bindable]就是所谓的元数据标签。元数据标签是一种特殊的标签，它在代码中的作用就是向编译器提供如何编译程序的信息。实际上，这些标签并没有被编译到生成的SWF文件中，而只是告诉编译器如何生成SWF文件。文档中列出的元数据标签共有12个，本文将讲解这些元数据标签的定义并给出使用它们的...
flex 标签
qq_35334804的博客
07-09 932
flex:flex-grow、flex-shrink、flex-basis的缩写;flex-basis该属性来设置该元素的宽度。当然，width也可以用来设置元素宽度。如果元素上同时设置了width和flex-basis,那么flex-basis会覆盖width的值。flex-grow当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间;父元素宽400p...
flex布局——align-items属性垂直之共有flex-start、center、flex-end& justify-content属性水平之space-around、space-between
weixin_44867717的博客
12-04 8042
flex
Flex布局常见父项属性（三）- align-items, align-content和flex-flow
热门推荐
JHY97的博客
01-06 2万+
1.align-items用于设置侧轴上的子元素排列方式（单行） 该属性用于控制子元素在侧轴（默认为y轴）上的排列方式，在子元素为单项时使用 1.1属性值 属性值 说明 flex-start 从上到下；默认值 flex-end 从下到上 center 垂直居中 stretch 拉伸 1.2案例 1.设置align-items属性值：center 为了能够更好区别，先设置主轴（x轴）居中，再设置侧轴（y轴）居中 /* 父级
flex布局之align-items
sinat_41747081的博客
11-17 2547
flex布局的align-items值有：flex-start，flex-end，center，stretch 其中flex-start表示：侧轴起始点对齐； flex-end表示：侧轴终止点对齐 center表示：侧轴居中对齐 stretch:子元素可以拉伸到父元素的高度 html: <div class="container"> <section class="flex-s...
css flex布局 —— 容器属性 align-items
且听风吟的博客
09-28 5642
css flex布局 —— 容器属性 align-items
HTML中布局flex的标签,css中Flex布局要素的介绍（附代码）
weixin_29062963的博客
06-18 495
本篇文章给大家带来的内容是关于css中Flex布局要素的介绍(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。flex布局为 "弹性布局"，任何一个元素都可以通过设置css属性 display:flex; webkit内核浏览器为 display: -webkit-flex;指定元素为Flex布局。采用Flex布局的元素，称之为"容器"(flex container), 它...
深入浅出了解Flex弹性布局（一）
01-08
文章目录一、布局回顾二、弹性布局 一、布局回顾 布局从无到有经历了几个阶段：
Bootstrap 4 Flex（弹性）布局
12-13
弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计，如果你还不了解 flex，可以阅读我们的 创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类: 实例 Flex item 1 Flex item 2 Flex item 3 ...
align-items属性
weixin_67862007的博客
02-27 2115
默认值，如果弹性子元素没有高度或高度为auto，将占满整个容器的高度。子元素在第一行文字的基线对齐。子元素在侧轴顶端对齐。align-items属性：弹性子元素在（侧轴）交叉轴上的对齐方式。子元素在侧轴末端对齐。子元素在侧轴中间对齐。
flex布局全解
weixin_44667463的博客
02-20 4130
一、入门 附博客园（理解形象）：一篇文章弄懂flex布局 - 听风是风 - 博客园 (cnblogs.com) 1. flex 是什么？ flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思 我们知道当并列书写多个div标签，它们会纵向向下排位，如果我们想将多个div并列成一排，就得借助position，float，或display属性，这便是传统的盒模型做法。 而flex布局则是一种新的布局方案，通过为修改父div的display属性，让父元素成为一个flex容器，从而可以自由
【移动端网页布局】flex 弹性布局 ⑤ ( 设置侧轴单行子元素排列方式 | align-items 样式说明 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
05-07 2550
一、设置子元素是否换行 : align-items 样式说明 1、 align-items 样式引入 2、 align-items 样式属性值 二、代码示例 1、 代码示例 - 默认样式 2、 代码示例 - 设置主轴水平居中 3、 代码示例 - 设置侧轴垂直居中 4、 代码示例 - 设置侧轴从下到上排列 5、 代码示例 - 设置侧轴拉伸排列
Flex布局
m0_52043522的博客
05-09 8918
前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、Flex布局的介绍 Flex布局（Flexible布局，弹性布局）目前特别在移动端用的最多，目前PC端也使用越来越多了。 将一个元素设置为display:flex;flex元素会变成一个flex容器。 两个重要的概念： 开启了Flex布局的元素叫做flex container，即Fle
flex布局语法以及实操，一文带你吃透flex布局的基础
心态的博客
09-13 1563
Flex弹性布局已是目前最为流行的布局方式之一，它给Web开发者在完成页面或组件的UI布局带来了极大的灵活性和便利性。以上就是今天要讲的内容，本文仅仅简单介绍了Flex布局的使用，而Flex的功能还不止于此，如果大家还想了解更多的前端知识和flex布局的相关内容，可以到MDN上面去了解更多的知识，学无止尽。
使用html画一个键盘
最新发布
liulang68的博客
04-22 4195
【代码】使用html画一个键盘。
阮一峰 flex布局
09-20
阮一峰是一位知名的前端开发者，他在他的博客中提到了Flex布局。Flex布局是CSS的一种布局方式，...阮一峰在他的博客中详细介绍了Flex布局的语法和常见布局的写法，你可以参考他的文章来深入了解Flex布局的相关内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值