Flex弹性布局整理

最新推荐文章于 2024-08-26 14:34:32 发布
最新推荐文章于 2024-08-26 14:34:32 发布
阅读量1k 收藏 2
点赞数
分类专栏： HTML+CSS css HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44757417/article/details/106450652
版权
css 同时被 3 个专栏收录
16 篇文章 0 订阅
订阅专栏
HTML
16 篇文章 0 订阅
订阅专栏
HTML+CSS
12 篇文章 0 订阅
订阅专栏

随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
在这里插入图片描述

写在在flex容器上写在在flex子项上
flex-directionorder
flex-wrapflex-grow
justify-contentflex-basis
align-itemsflex
align-contentalign-self

flex-direction

用来控制子项整体布局方向，是从左往右还是从上往下。

取值含义
row默认值，显示为行。方向为当前文档水平流方向，默认情况是从左往右
row-reverse显示为行。但方向和row属性值是反的
column显示为列
column-reverse显示为列。但方向和column属性值是反的
  • flex-direction:row;
    在这里插入图片描述
  • flex-direction:row-reverse;
    在这里插入图片描述
  • flex-direction:row-reverse;
    在这里插入图片描述
  • flex-direction:column-reverse;
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            /* 显示为行，方向和row属性值相反 */
            /* flex-direction: row-reverse; */

            /* 显示为列 */
            /* flex-direction: column; */
            /* 反向 */
            flex-direction: column-reverse;

            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 100px auto;

        }

        .box div {
            width: 50px;
            height: 50px;
            color: white;
            background-color: red;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>

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

</html>

flex-warp

flex-warp用来控制子项整体单行显示还是换行显示

取值含义
nowrap默认值，表示单行显示，不换行
wrap宽度不足换行显示
wrap-reverse宽度不足换行显示，但是还是从上往下开始，也就是原本换行在下面的子项现在跑到上面
  • flex-wrap:nowrap;
    在这里插入图片描述
  • flex-wrap:wrap;
    在这里插入图片描述
  • flex-wrap:wrap-reverse;
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单行还是换行显示</title>
    <style>
        .box {
            display: flex;
            /* 宽度不足时换行*/
            /* flex-wrap: wrap; */
            /* 默认情况 不会立即溢出，直到内容放不下才溢出 */
            /* flex-wrap: nowrap; */

            /* 反向 */
            flex-wrap: wrap-reverse;
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 100px auto;

        }

        .box div {
            width: 50px;
            height: 50px;
            color: white;
            background-color: red;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <!-- 根据内容的大小选择自适应，内容过多会溢出 -->
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>

    </div>
</body>

</html>
  • flex-flow

flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。第一个值表示方向，第二个值表示换行，中间用空格隔开。

justify-content

取值含义
flex-start默认值，表现为起始位置对齐
flex-end表现为结束位置对齐
center表现为居中对齐
space-between表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配
space-aroundaround是环饶的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度的一半
space-evenlyevenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。

  • justify-content:flex-start;
    PS： 相当于左对齐
    在这里插入图片描述

  • justify-content:flex-end;
    PS:相当于右对齐，不改变盒子顺序
    在这里插入图片描述

  • justify-content:center;
    在这里插入图片描述

  • justify-content:space-between;
    在这里插入图片描述

  • justify-content:space-around;

在这里插入图片描述

  • justify-content:space-evenly;
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对齐和分布方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            /* 起始位置对齐 */
            /* justify-content: start; */
            /* 结束位置对齐 */
            /* justify-content: flex-end; */
            /* 居中对齐 */
            /* justify-content: center; */
            /* 两端对齐 */
            /* justify-content: space-between; */
            /* 环绕 */
            /* justify-content: space-around; */
            /* 匀称 */
            justify-content: space-evenly;

            width: 300px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid black;
        }

        .box div {
            width: 50px;
            height: 50px;
            background-color: red;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>

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

</html>

align-items

align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式

取值含义
stretch默认值，flex子项拉伸（相对于去掉子项的高,会充满整个容器）
flex-start表现为容器顶部对齐
flex-end表现为容器底部对齐
center表现为垂直居中对齐

  • align-items:stretch;
    在这里插入图片描述

  • align-items:flex-start;
    在这里插入图片描述

  • align-items:center;
    在这里插入图片描述

  • align-items:flex-end;
    在这里插入图片描述

align-content

align-content可以看成和justify-content是相似且对立的属性，如果所有的flex子项只有一行，则align-content属性没有任何效果。

取值含义
stretch默认值。每行flex子元素都等比拉伸。例如，共有两行flex子元素，则每行拉伸的高度是50%。
flex-start表现为起始位置对齐
flex-end表现为结束位置对齐
center表现为居中对齐
space-between表现为两端对齐
space-around每一行元素上下都享有独立不重叠的空白空间
space-evenly每一行元素都完全上下等分
  • align-content:stretch;

在这里插入图片描述

  • align-content:flex-start;

在这里插入图片描述

  • align-content:flex-end;
    在这里插入图片描述
  • align-content:center;

在这里插入图片描述

  • align-content:space-between;
    在这里插入图片描述

  • align-content:space-around;
    在这里插入图片描述

  • align-content:space-evenly;
    在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多行对齐方式</title>
    <style>
        .box {
            display: flex;
            /* 均匀排列 */
            /* justify-content: space-evenly; */
            /* 换行 */
            flex-wrap: wrap;

            /* 容器顶部对齐 */
            /* align-items: flex-start; */
            /* 拉伸 */
            /* align-content: stretch; */
            /* 起始位置对齐 */
            /* align-content: flex-start; */
            /* 结束位置对齐 */
            /* align-content: flex-end; */
            /* 居中对齐 */
            /* align-content: center; */
            /* 两端对齐 */
            /* align-content: space-between; */
            /* 环绕 */
            /* align-content: space-around; */
            /* 匀称 */
            align-content: space-evenly;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid black;
        }

        .box div {
            width: 50px;
            border: 1px solid blue;
            background-color: red;
            text-align: center;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>测试文本</div>
        <div>测试文本测试文本</div>
        <div>测试文本</div>
        <div>测试文本测试文本测试</div>
        <div>测试文本</div>
        <div>测试文本测试文本</div>
        <div>测试文本</div>
        <div>测试文本测试文本测试</div>
    </div>
</body>

</html>

ps:

justify-content相对于xz轴方向的排版，align-content相对于y轴的排版。

作用在flex子项的CSS属性

取值含义
order可以通过设置order改变某一个flex子项的排序位置。所有的flex子项的默认order属性值是0。
flex-grow属性中的grow是拓展的意思，拓展的就是flex子项所占的宽度,拓展所侵占的空间就是出去元素外的剩余的空白间隙。默认值为0。
flex-shrink属性中的shrink是收缩的意思，flex-shrink主要处理当flex容器空间不足时，单个元素收缩比例。默认值是1。
flex-basisflex-basis定义了在分配剩余空间之前元素的默认大小
flexflex属性是flex-grow,flex-shrink和flex-basis的缩写（优先级高）
align-selfalign-self指控制单独某一个flex子项的垂直对齐方式
  • order:1;
    在这里插入图片描述
  • flex-grow:1;
    在这里插入图片描述
  • flex-shrink:0;
    在这里插入图片描述
  • flex-basis:100px;(在有剩余空间的情况下设置)
    在这里插入图片描述
  • flex

flex属性是flex-grow，flex-shrink和flex-basis的缩写。

  • align-self:center;(flex-start:容器头部对齐 flex-end：容器底部对齐)
    在这里插入图片描述

骰子点数案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>骰子的点数</title>
    <style>
        .box1,
        .box2,
        .box3,
        .box4,
        .box5,
        .box6 {
            float: left;
            width: 100px;
            height: 100px;
            border: 1px solid black;
            border-radius: 5px;
            margin-left: 30px;

        }

        .box1 div,
        .box2 div,
        .box3 div {
            width: 30%;
            height: 30%;
            background-color: black;
            border-radius: 50%;
        }

        .box1 {
            /* 弹性布局 */
            display: flex;
            /* 主轴方向上子项的对齐和分布方式 */
            justify-content: center;
        }

        .box2 {
            /* 弹性布局 */
            display: flex;
            /* 两端对齐 */
            justify-content: space-between;
        }

        .box2 div:nth-child(2) {
            /* 容器底部对齐 */
            align-self: flex-end;
        }

        .box3 {
            /* 弹性布局 */
            display: flex;
            /* 两端对齐 */
            justify-content: space-between;
        }

        .box3 div:nth-child(2) {
            /* 垂直居中对齐 */
            align-self: center;
        }

        .box3 div:nth-child(3) {
            /* 容器底部对齐 */
            align-self: flex-end;
        }

        .box4 {
            display: flex;
            /* 折行 */
            flex-wrap: wrap;
        }

        .box4 div {
            display: flex;
            /* 两端对齐 */
            justify-content: space-between;
            width: 100%;

        }

        .box4 div:last-child {
            /* flex子项容器底部对齐 */
            align-items: flex-end;
        }

        .box4 div i {
            display: block;
            width: 30%;
            height: 60%;
            background-color: black;
            border-radius: 50%;
        }

        .box5 {
            display: flex;
            /* 折行 */
            flex-wrap: wrap;
        }

        .box5 div {
            display: flex;
            /* 垂直居中对齐 */
            justify-content: center;
            width: 100%;
            align-items: center;

        }

        .box5 div:first-child {
            /* flex子项容器顶部对齐 */
            align-items: flex-start;
            /* 使子项两端对齐 */
            justify-content: space-between;
        }

        .box5 div:last-child {
            /* flex子项容器底部对齐 */
            align-items: flex-end;
            /* 使子项两端对齐 */
            justify-content: space-between;
        }

        .box5 div i {
            display: block;
            width: 30%;
            height: 90%;
            background-color: black;
            border-radius: 50%;
        }

        .box6 {
            display: flex;
            /* 折行 */
            flex-wrap: wrap;
        }

        .box6 div {
            width: 100%;
            display: flex;
            /* 垂直居中对齐 */
            justify-content: space-between;
        }

        .box6 div:first-child {
            /* flex子项容器顶部对齐 */
            align-items: flex-start;

        }


        .box6 div:last-child {
            /* flex子项容器底部对齐 */
            align-items: flex-end;

        }

        .box6 div i {
            display: block;
            width: 30%;
            height: 90%;
            background-color: black;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div></div>
    </div>
    <div class="box2">
        <div></div>
        <div></div>
    </div>
    <div class="box3">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box4">
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
    </div>
    <div class="box5">
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
    </div>
    <div class="box6">
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
    </div>


</body>

</html>

在这里插入图片描述

两列固定一列自适应案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自适应</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            display: flex;
        }

        .left {
            width: 200px;
            height: 200px;
            background-color: red;

        }

        .center {
            /* 适应剩余的空间 */
            flex: 1;
            height: 300px;
            background-color: yellow;

        }

        .right {
            width: 150px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

</html>

在这里插入图片描述

弹性盒（Flexbox）布局完全指南：实现灵活自适应的网页排列
a451319296的博客
06-18 2707
本教程提供了关于弹性盒（Flexbox）布局模型的全面指南，帮助您掌握如何利用弹性盒构建灵活自适应的网页排列。通过学习本教程，您将了解弹性盒的基本概念、容器和弹性盒子属性的使用方法，并能够创建各种常见的布局效果。
flex布局PPT
03-14
新一代css布局——flex布局，不用再为定位，浮动而烦恼，flex一招即可搞定。
css高度自适应-flex弹性布局
qq_57218855的博客
05-10 1446
css高度自适应
W3C flex学习笔记
最新发布
surgicalMask的博客
08-26 1809
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局，比如，垂直居中就不容易实现。flex旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知或动态变化.Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{行内元素也可以使用Flex布局。.box{
【vue】弹性布局实现自适应高度cell
当白的技术小窝 ( git : https://github.com/canwhite )
06-24 905
如果弹性布局可以换行； flex-wrap: wrap; 行间距离就不是align-items控制 而是align-content: flex-start来控制了 .scroll{ height: 1140px; width: 100%; box-sizing: border-box; padding-left: 12px; padding-right: 12px; display: flex; justify-content: space-between; flex-wrap: wra
css常用布局-flex自适应布局
蓑笠翁
06-20 8704
一、 Flex布局简介 flex布局基于盒状模型，原意为弹性布局，用来为盒状模型提供最大的灵活性。为CSS中display的一个属性；常用于我们常见的分布布局，比如说多个块并列，自适应屏幕宽度等；在移动端应用广泛。目前所有的浏览器都支持flex布局。 二、应用 ...
2022-12-29 [整理]flex弹性布局
GAARA
12-29 603
0.前言 1.设置flex布局后的父子元素 2.容器(父元素)的属性 3.项目(子元素)的属性 4.示例一:flex布局实现flex容器中子元素的水平垂直居中 5.示例二:flex:1实现子元素平分flex容器宽度 6.示例三:换行,多行布局 7.示例四:flex-grow,flex-shrink和flex-basis属性的使用 7.1.flex-grow的使用 7.2.flex-shrink的使用 7.3.flex-basis与width和min-width,max-width的区别 7.4 flex-b
flex弹性布局特性思维导图.png
08-18
对于一些常用的display：flex弹性布局属性思维导图整理及解释
【前端知识之CSS】flex弹性布局和grid网格布局
weixin_44337386的博客
05-12 2270
本系列主要整理前端面试中需要掌握的知识点。本节介绍flex弹性布局和grid网格布局。
Flex弹性盒布局以及JS基础
WJJ_991027gg的博客
08-16 455
以上是我整理的flex弹性盒布局以及js基础知识点
CSS height 及 flex布局一则
qq_37107268的博客
08-04 3667
首次渲染之后，父元素未设置高度，子元素即使设置获取不到父元素高度，高度由子元素的内容决定。而弹性布局会动态计算元素的高度，在确定最大的元素高度之后，相当于父元素高度确定，再由于的存在由浏览器计算出其他子元素的高度，最终使得各个子元素高度统一。如有不对之处，欢迎各位讨论和指正。......
HarmonyOS鸿蒙开发指南:自适应布局 弹性布局
sybh的博客
01-08 1396
弹性布局（Flex布局）是自适应布局中使用最为灵活的布局。弹性布局提供一种更加有效的方式来对容器中的子组件进行排列、对齐和分配空白空间。弹性布局容器: Flex组件作为Flex布局的容器，用于设置布局相关属性。子组件: Flex组件内的子组件自动成为布局的子组件。主轴: Flex组件布局方向的轴线，子组件默认沿着主轴排列。主轴开始的位置称为主轴起始端，结束位置称为主轴终点端。交叉轴: 垂直于主轴方向的轴线。交叉轴起始的位置称为交叉轴首部，结束位置称为交叉轴尾部。
flex弹性布局学习总结
ramosTears123的博客
05-26 205
一.简要介绍 css3最喜欢的新属性之一便是flex布局属性,用六个字概括便是简单,方便,快速. flex(flexible box:弹性布局盒子模型) ,是2009年w3c提出的一种可以简洁,快速弹性布局的属性.主要思想是给与容器控制内部元素宽度和高度的能力.目前支持的浏览器有 其中在webkit内核的浏览器中使用时,必须加上-web...
如何使用弹性布局？如何做到自适应?
lyx9611的博客
05-18 1914
1、简单介绍如何使用弹性布局 1、父元素必须的属性：display:flex;； 这里，我一般都会写一个弹性样式的class，如下： /*默认横向显示的*/ .flex-row{ display:flex } /**写一个纵向显示的*/ .flex-column{ display:flex; flex-direction:column; } 这样，父级元素的弹性盒子我们就写好了。 2、如果我们想换行怎么办？默认是不换行的哦；只需要再父级元素上加上下面的这个样式即可。 flex-wrap:wrap;
flex 固定每行数量_flex布局实现每行固定数量+自适应布局_CSS布局实例_CSS
weixin_39630095的博客
12-21 1309
本文介绍了flex布局实现每行固定数量+自适应布局，分享给大家，具体如下：效果展示解析 模板名称//父盒子，设置为：.templateItem {width: 100%;text-align: center;display: flex;align-content: flex-start;flex-flow: row wrap;}//子盒子，设置为：.template ...
flex布局 如何实现各行元素的高度自适应
weixin_42833121的博客
02-21 8526
css——flex布局 display:flex 如何实现各行元素的高度自适应 //先定义一个最大的容器为弹性盒子，子元素为横向排布 .list { display: flex; flex-direction: row; justify-content: space-between; // 使每个弹性盒子保持自身的高度,并位于容器顶部 align-items: flex-start; } //横向排布的两个子元素都设置为纵向排布的弹性盒子 .
使用flex布局，子元素怎么高度自适应？
风华绝代的博客
11-01 7921
1、想用flex实现这种布局 2、各个子元素高度不固定，从上到下依次排列 请问可以怎么实现？ 附： 我对父元素定义了下面的规则： display:flex; flex-flow:row wrap; 对子元素用p标签放了一些文本，未设置高度，结果显示效果如下红色标记是子元素被拉伸了，高度没有自适应： 父元素上增加align-items: flex-start; 因为交叉轴的对齐方式，默认是 stretch ...
使用flex布局，子元素高度自适应
weixin_52031970的博客
07-06 1278
父元素上增加align-items:flex-start; 交叉轴的对齐方式，默认是stretch
HTML入门（flex拆行）————DAY6
详情请看注释
10-17 1064
flex元素是一种类似于float让div元素在所属框内更好的找到自己应该在的位置。 但是flex默认的里面的盒元素是不会自己进行折行的，所以需要进行一些设置，来得到更好的效果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta n...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值