Flex布局---看一篇就够了

最新推荐文章于 2024-06-16 22:13:37 发布
最新推荐文章于 2024-06-16 22:13:37 发布
阅读量302 收藏 1
点赞数 3
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54721820/article/details/134444526
版权
 1. flex布局是什么？

        flex是flexible Box的缩写，用来为盒装模型提供的最大的灵活性，任何一个容器都可以指定为flex布局。Flex布局称为flex容器，所有的子元素为容器成员Flex项目（flex item）；

        当为父盒子设为flex布局以后，子元素的float、vertical-align，clear数据将失效。

         flex布局伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局

方法: 通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

2. 传统的布局 VS Flex布局

传统布局：兼容性好，布局繁琐，有布局性，不能在移动端很好的布局

Flex布局：操作方便，布局简单；移动端应用广泛

总结：PC端页面中布局，推荐使用传统布局，移动端布局或者不考虑兼容性问题的话PC端页面布局，还是使用Flex弹性布局更加实用。

需要在最大的盒子中(box)加入display: flex;【使用flex布局，否则功能无法实现】

实例代码【可自行看效果】

<!DOCTYPE html>
<html>
<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 {
            height: 300px;
            margin: auto;
            border: 1px solid #000;
        }
        .box div {
            width: 100px;
            height: 100px;
           background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>
  3. flex-direction设置主轴方向

flex-direction 是属性决定主轴的方向，就是项目的排列方向

flex-direction一共有四个方法

        ①row ：是主轴为水平方向，起点在左端。（默认值）
        .box {
            display: flex;
            flex-direction: row;
        }

                        展示效果如下：

                        

        ②row-reverse：是主轴为水平方向，起点在右端。
        .box {
            display: flex;
            flex-direction: row-reverse;
        }

                       展示效果如下：

                        

        ③column：是主轴为垂直方向，起点在上端。
          .box {
            display: flex;
            flex-direction: column;
        }

                        展示效果如下：

                        

        ④column-reverse：是主轴为垂直方向，起点在下端。
           .box {
            display: flex;
            flex-direction: column-reverse;
        }

                        展示效果如下：

                        

4.  justify-content

        justify-content 设置主轴上的子元素排列方式，属性定义了项目在主轴上的对齐方式

        注意：使用这个属性之前一定要确定好主轴是哪个

/* 对齐方式 */
justify-content: center;     /* 居中排列 */
justify-content: start;      /* 从行首开始排列 */
justify-content: end;        /* 从行尾开始排列 */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end;   /* 从行尾位置开始排列 */
justify-content: left;       /* 一个挨一个在对齐容器得左边缘 */
justify-content: right;      /* 元素以容器右边缘为基准，一个挨着一个对齐, */

/* 分配弹性元素方式 */

/* 均匀排列每个元素首个元素放置于起点，末尾元素放置于终点 */
justify-content: space-between;  
/* 均匀排列每个元素 每个元素周围分配相同的空间 */                      
justify-content: space-around;  

/* 均匀排列每个元素每个元素之间的间隔相等 */
justify-content: space-evenly;  
/* 均匀排列每个元素'auto'-sized 的元素会被拉伸以适应容器的大小 */                                   
justify-content: stretch;       
  

更多内容：CSS justify-content 属性 | 菜鸟教程

 居中分布
                           display: flex;
							justify-content: space-around;
							flex-direction: row;
							flex-wrap: wrap;【flex-flow: column wrap;】

        效果展示：

两端对齐
        .box {
            display: flex;
            justify-content: space-between;
        }

其他方式
左对齐右对齐居中对齐
        .box {
            display: flex;
            justify-content: flex-start;
        }		        .box {
            display: flex;
            justify-content: flex-end;
        }		 
        .box {
            display: flex;
            justify-content: center;
        }

5. flex-wrap属性

           flex-wrap属性定义，如果一条轴线排不下，如何换行。

①nowarp：是不换行（默认值）。
        .box {
            display: flex;
            flex-wrap: nowrap;
        }

②warp：是换行，第一行在上方。
  .box {
            display: flex;
            flex-wrap: wrap;
        }

③wrap-reverse：是换行，但是第一行是在下面。

        .box {
            display: flex;
            flex-wrap: wrap-reverse;
        }
6. align-items

        是控制子项在侧轴（默认y轴）上的排列方式，在子项为单项的时候使用。

   align-items属性定义项目在交叉轴上如何对齐，设置侧轴上的对齐方式。

 ① flex-start：是交叉轴的起点对齐

        .box {
            display: flex;
            align-items: flex-start;
        }

                        ​​​​​​​        ​​​​​​​
② flex-end  交叉轴的终点对齐

        .box {
            display: flex;
            align-items: flex-end;
        }

        ​​​​​​​        ​​​​​​​        ​​​​​​​        

③center：是垂直居中。

        .box {
            display: flex;
            align-items: center;
        }

        ​​​​​​​        ​​​​​​​        ​​​​​​​        
④stretch这个代码的意思是如果项目未设置高度或设为auto，将占满整个容器的高度，也就是拉伸的意思，默认值（现有状态，测试的时候去掉子级的高度或者设置为auto）

        .box {
            display: flex;
            align-items: stretch;
        }

        ​​​​​​​        ​​​​​​​        ​​​​​​​        
7. align-content

        设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况（多行）

注意：align-content VS align-items（竖向排列）
        align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸
        align-content适应于换行（多行）情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉升以及平均分配剩余空间等属性值。

8. flex-flow

        flex-flow 属性是flex-direction和flex-wrap 属性的复合属性。

补充内容：

秃头馒头
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
深入理解Flex布局以及计算
02-25
对于Flex布局，阅读了大漠老师和其他老师写的文章后，我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节。在大漠老师的帮助下，我去查阅Flexbox的W3C规范文档。注：本篇博文不适合未接触过Flex布局的人,如果想了解flex布局基础。请参考理解Flexbox：你需要知道的一切flex盒模型是被期望设计成：在任何流动的方向上(包括上下左右)都能进行良好的布局可以以逆序或者以任意顺序排列布局可以线性的沿着主轴一字排开或者沿着侧轴换行排列可以弹性的在任意的容器中伸缩大小（今天重点研究的主题）可以使子元素们在容器主轴方向上或者在容器侧轴方向上进行对齐可以动态的沿着主轴方向伸
彻底理解flex弹性布局，看这一篇就够了！
温情
06-09 1717
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称容器。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称项目, 上代码理解理解 <div class="box"> <div class="item one">项目1</div> <div class="item two">项目2</div> <div class="item three">项目.
学Flex布局-这一篇就够了
软件测试的坑，让我来踩吧
08-14 2371
在PC端页面中布局，推荐使用传统布局，在移动端布局或者不考虑兼容性问题的话PC端页面布局，还是使用Flex弹性布局更加实用
Flex 布局教程：语法篇.doc
05-31
Flex 布局教程：语法篇 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称...
让CSS flex布局最后一行列表左对齐的N种方法(小结)
12-28
引用张鑫旭的一篇文章分享给大家，如果你想进行修改进入链接点到对应的图片生成的链接进入，方可修改。 问题描述 //html <div class=list></div> <div class=list></div> <div class=list></div> ...
vue flex 布局实现div均分自动换行的示例代码
12-28
 一、关于flex布局我建议去看一下http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html这篇博客，我们主要用到flex布局的一个换行属性，它是flex-wrap: wrap，自动换行。 二、vue代码 （1）html部分： ...
CSS中，设置 0.5px 会生效吗
Keep trying, keep going
06-12 385
在高分辨率屏幕（例如 Retina 屏幕）上，0.5px 的设置通常会生效，因为这些屏幕具有更高的像素密度，可以显示更细的细节。在这些设备上，1 个 CSS 像素可能对应多个设备像素，因此可以实现 0.5px 的效果。，因为这些屏幕的像素密度较低，可能无法精确地显示半个像素的大小。在这种情况下，浏览器会对 0.5px 的值进行。在 CSS 中，设置 0.5px 是有效的，浏览器会尝试渲染出这种细微的大小差异。然而，在低分辨率屏幕上，0.5px 的设置可能无法完美呈现。
CSS从入门到精通——动画:CSS3动画延迟和完成后状态的保持
m0_73614626的博客
06-16 349
上面已经实现了绿色小球向右移动的动画， 怎么在绿色小球动画完成时保持这个状态呢？红色小球和绿色小球的动画基本是一样的，调整一下位置就可以了。为了完成本关任务，你需要掌握：1.动画状态，2.动画完成时的状态，3.动画延迟。这里以绿色小球的移动来说明小球的状态。小球向右移动是利用定位来改变它的。它规定了动画在播放之前或之后，其动画效果是否可见。本关任务：用 CSS3 实现小车等待红绿灯的效果。运用第一关学到的知识，先创建一个动画名称为。来实现，它定义了动画在何时开始，默认为。然后把这个动画绑定到。
CSS期末复习速览（二）
2301_80369371的博客
06-16 320
4.行内块元素：常见的行内块元素：<img/> <input/> <td>，同时具有块元素和行内元素的特点，特点：和相邻行内元素（行内块）在一行上，但是它们之间会有空白缝隙，一行可以显示多个（行内元素特点）；高度，行高，内外边距都可以控制（块元素特点）2.块元素：常见的块元素：<h1>~<h6> <p> <div> <ul> <ol> <li>，特点：自己独占一行；3.行内元素：常见的行内元素：<a> <strong> <span>，特点：相邻行内元素在一行上，一行可以显示多个；
CSS 实现电影信息卡片
qq_33003143的博客
06-16 523
综合运用CSS知识实现电影信息卡片
【CSS】background怎么设置多个背景图
最新发布
读心悦
06-16 151
在CSS中设置多个背景图片可以通过属性来实现，不同的背景图像之间使用逗号隔开。
css系列：音频播放效果-波纹律动
zkx529的博客
06-12 382
音频律动效果，实现了语音播放时的带有动画的特殊样式的进度条
vue在hash路由模式下实现点击定位滑动
IT_moshang的博客
06-12 330
hash路由模式下实现点击滑动
CSS从入门到精通——动画:简单的小动画
m0_73614626的博客
06-16 348
为了完成本关任务，你需要掌握：1.创建动画，2.绑定元素。来创建一个动画，然后把这个动画绑定到一个元素上就有效果了。本关任务：用 CSS3 实现简单的小动画。根据提示，在右侧编辑器补充代码，实现当。为了方便评测， CSS 都是需要以分号。创建一个动画，这个动画表示字体会从。
前端 CSS 经典：好用的 CSS 选择器
weixin_64684095的博客
06-16 151
当前选中元素及当前选中元素的后代元素有没有聚焦。
uniapp+unocss报错Error [ERR_REQUIRE_ESM]: require() of ES Module
海风依旧
06-16 70
uniapp+unocss报错Error [ERR_REQUIRE_ESM]: require() of ES Module
uniapp使用css实现瀑布流
qq_45623072的博客
06-12 793
title:"大佬点的黑桃全家桶，今晚不醉不归，大干下一场，大家一起来!//当属性值为3，表示超出3行隐。title:"哈哈哈，好可爱的小女孩,打不过...",title:"两个月的布偶猫怎有这么小吗?title:"落日好美，你喜欢吗？title:"这样的礼物你喜欢吗?title:"这样的礼物你喜欢吗?author:"不懂的茄子",author:"椰子哦",author:"快乐样",author:"奈奈酱",author:"椰子哦",
Nginx部署Vue项目css文件能加载但是不生效
彭世瑜的博客
06-13 281
Nginx部署打包后的Vue项目css文件能加载但是不生效，所以在nginx配置文件上引入一个类型文件就可以。重启nginx后，css文件生效，显示正常了。查看响应标头，发现不对劲，
CSS【详解】样式选择器的优先级（含提升优先级的方法）
朝阳39的博客
06-16 468
数值越大，优先级越高，尽量保持较低的优先级，以便使用更高优先级的选择器重置样式0级——通配选择器、选择符和逻辑组合伪类。逻辑组合伪类有:not()、:is()和:where等，这些伪类本身并不影响CSS优先级，影响优先级的是括号里面的选择器。1级——标签选择器2级——类选择器、属性选择器和伪类3级——ID选择器4级——style内联5级——!important!important是顶级优先级，可以重置JavaScript设置的样式，唯一推荐使用的场景就是使JavaScript设置无效。
Flex 布局教程：实例篇
05-17
好的，下面我们来看一些Flex布局的实例。 ## 实例一：水平居中 让一个元素在父容器中水平居中，可以使用以下方法： ```html <div class="box">Hello World ``` ```css .container { display: flex; justify...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值