【第三部分 | 移动端开发】3：Flex布局

已于 2022-11-20 15:31:48 修改
阅读量481 收藏
点赞数 1
分类专栏： 【前端】HTML CSS JS 基础 文章标签： css css3 html
于 2022-11-20 15:31:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57265007/article/details/127949588
版权

目录

| Flex布局简介

| Flex父元素属性

设置主轴的方向 flex-direction

设置主轴上的子元素排列方式 justify-content

设置子元素是否换行 flex-wrap

设置侧轴上的子元素排列方式（单行） align-items

设置侧轴上的子元素的排列方式（多行） align-content

单行侧轴排列 VS 多行侧轴排列

复合属性 flex-flow

总结

| Flex子元素属性

简介

子项目占的份数 flex

控制子项自己在侧轴的排列方式 align-self

属性定义子项的排列顺序（前后顺序） order

| 背景渐变 linear-gradient

| Flex布局简介

  • flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以 指定为 flex 布局

  • 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效

  • 子容器可以横向排列也可以纵向排列

  • 总结而言就是 就是通过给父盒子添加flex属性，来控制子盒 子的位置和排列方式

| Flex父元素属性

设置主轴的方向 flex-direction

介绍：主轴和侧轴

  • 在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有 ： 行和列、x 轴和y轴

  • 默认主轴方向就是 x轴方向，水平向右；默认侧轴方向就是 y 轴方向，水平向下


flec-direction属性

  • 注意： 主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

  • 元素是默认沿着主轴来排列的。

示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认的主轴是 x 轴 row */
            flex-direction: row;
            /* justify-content: 是设置主轴上子元素的排列方式 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* 让我们子元素居中对齐 */
            /* justify-content: center; */
            /* 平分剩余空间 */
            /* justify-content: space-around; */
            /* 先两边贴边， 在分配剩余的空间 */
            justify-content: space-between;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>

</html>

 

设置主轴上的子元素排列方式 justify-content

介绍

  • justify-content 属性定义了项目在主轴上的对齐方式：左对齐、右对齐、居中对齐等等

  • 使用这个属性之前一定要确定好主轴是哪个 说明：space-around 为每个子盒子平均分配左右的margin；space-between为首尾盒子贴边 只有右/左 margin，剩余盒子有左右margin。

代码示例（主轴为x）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认的主轴是 x 轴 row */
            flex-direction: row;
            /* justify-content: 是设置主轴上子元素的排列方式 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* 让我们子元素居中对齐 */
            /* justify-content: center; */
            /* 平分剩余空间 */
            /* justify-content: space-around; */
            /* 先两边贴边， 在分配剩余的空间 */
            justify-content: space-between;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>

</html>

左右紧贴，再分配剩余空间：space-between

代码示例（主轴为y）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 我们现在的主轴是y轴 */
            flex-direction: column;
            /* justify-content: center; */
            justify-content: space-between;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

 

设置子元素是否换行 flex-wrap

介绍

  • 在flex中，若一行内摆不下对应数量的盒子，则flex会强行把原本需要换行的盒子塞进去，从而导致width会强行变小

  • 默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。

 示例代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 600px;
            height: 400px;
            background-color: pink;
            /* flex布局中，默认的子元素是不换行的， 如果装不开，会缩小子元素的宽度，放到父元素里面  */
            /* flex-wrap: nowrap; */
            flex-wrap: wrap;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>

</html>

 

设置侧轴上的子元素排列方式（单行） align-items

介绍

  • 如何实现这样的居中对齐效果？ 答案是：主轴使用 justify-content: center 侧轴再进行水平居中。

  • 在本节，我们将介绍侧轴上的子元素排列方式（单行）

  • align-items 属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用

  • 使用该属性的关键在于：先确定哪个是主轴，再确定子盒子在主轴的排序方式，最后再确定侧轴的排列方式

示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 默认的主轴是 x 轴 row */
            flex-direction: column;
            justify-content: center;
            /* 我们需要一个侧轴居中 */
            /* 拉伸，但是子盒子不要给高度 */
            /* align-items: stretch; */
            align-items: center;
            /* align-content: center; */
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

 

设置侧轴上的子元素的排列方式（多行） align-content

介绍

  • align-content 设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的。

示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 换行 */
            flex-wrap: wrap;
            /* 因为有了换行，此时我们侧轴上控制子元素的对齐方式我们用 align-content */
            /* align-content: flex-start; */
            /* align-content: center; */
            /* align-content: space-between; */
            align-content: space-around;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>

</html>

 

单行侧轴排列 VS 多行侧轴排列

  • align-items 适用于单行情况下， 只有上对齐、下对齐、居中和 拉伸

  • align-content 适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、 下对齐、居中、拉伸以及平均分 配剩余空间等属性值

  • 总结就是单行找 align-items 多行找 align-conte

  • 案例 从左到右，依次是： 主轴为x的单行、主轴为y的单行、多行

复合属性 flex-flow

介绍

相当于同时设置了 flex-direction 和 flex-wrap

flex-flow:row wrap;

 

 示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 600px;
            height: 300px;
            background-color: pink;
            /* flex-direction: column;
            flex-wrap: wrap; */
            /* 把设置主轴方向和是否换行（换列）简写 */
            flex-flow: column wrap;
        }
        
        div span {
            width: 150px;
            height: 100px;
            margin: 5px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>

</html>

总结

Flex布局很简单。基本步骤如下：

  1. 设置主轴方向 flex-firection 、主轴方向上的元素排列位置justify-content

  2. 设置子元素是否换行 flex-wrap

  3. 设置侧轴上的子元素排列方式（若主轴上只有一行，则使用align-items ； 若主轴上有多个元素且设置了wrap换行，则使用align-content）


| Flex子元素属性

简介

  • 父元素属性设置子元素的排列方式

  • 子元素属性设置子元素的一些排列顺序、所占的份数等自身的属性

子项目占的份数 flex

介绍

  • flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。

  • 说人话就是：我一行100px，如果有左右侧两个盒子各10px，则剩余中间的可分配空间为80px。flex就是分配这个空间

  • flex中数字代表的含义是：被申明flex的元素所占的份数为多少

    如1、2号盒子flex=1，3号盒子flex=2，则1、2号盒子各自得到可分配空间的1/4，3号盒子可以得到可分配空间的 2/4

语法

代码示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        
        p {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
        }

        /* 第四个盒子有定长，则占用了100px ，而父元素width为body的 60%，则此时可剩余分配空间为 body*0.6 - 100px */
        p span:nth-child(4) {
            width: 100px;
            background-color: green;
        }
        
        /* 给第1、3个盒子设定占的份数：1 */
        p span {
            flex: 1;
        }
        /* 给第2个盒子设定占的份数：2 */
        p span:nth-child(2) {
            flex: 2;
            background-color: purple;
        }

        /* 经过上述分配，结果为：  4号盒子固定长度100px，然后1、2、3号盒子分配剩余的 0.6*body-100px 的空间。 */
        /* 1、3号盒子各分配1份，2号盒子分配2份。即：1、3号盒子得到剩余分配空间的 1/4 ，2号盒子得到剩余分配空间的 2/4 */

        
    </style>
</head>

<body>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </p>
</body>

</html>

 

控制子项自己在侧轴的排列方式 align-self

  • align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。

  • 默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch

  • 说人话就是：孩子叛逆，不想跟随父元素设置的align-items，要自己单独设置在侧轴的排列方式

属性定义子项的排列顺序（前后顺序） order

  • 数值越小，排列越靠前，默认为0。

  • 注意：和 z-index 不一样。

| 背景渐变 linear-gradient

background: linear-gradient(起始方向, 颜色1, 颜色2, ...);
background: -webkit-linear-gradient(left, red , blue);
background: -webkit-linear-gradient(left top, red , blue);

  • 背景渐变必须添加浏览器私有前缀，因为不同的浏览器不互相兼容 需要独立声明

  • 起始方向可以是： 方位名词 或者 度数 ， 如果省略默认就是 top

  • 一般来说，PE端使用这个linear-gradient多一点，因为只用添加一个-webkit- 私有前缀即可在所有PE端浏览器展示。

  • 相比之下，PC端基本不适用这个语法，因为需要声明非常多非常多的 浏览器私有前缀，特别的麻烦！

示例代码：

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <style>
         div {
             width: 600px;
             height: 200px;
             /* 背景渐变必须添加浏览器私有前缀 */
             /* background: -webkit-linear-gradient(left, red, blue); */
             /* background: -webkit-linear-gradient(red, blue); */
             background: -webkit-linear-gradient(top left, red, blue);
         }
     </style>
 </head>
 
 <body>
     <div></div>
 </body>
 
 </html>

 

Graskli
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端技能树，面试复习第 5 天 - CSS 篇（4）：常用单位 | 移动端适配 | Flex | BFC
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
06-12 187
CSS 像素：为 web 开发者提供，在 CSS 中使用的一个抽象单位；物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的。em： 文本相对长度单位。相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认 16px)。(相对父元素的字体大小倍数)。rem： rem 是 CSS3 新增的一个相对单位，相对于根元素（html 元素）的 font-size 的倍数。作用：利用 rem 可以实现简单的响应式布局，可以利用 html 元素中字体的大小与屏
flex 数组排序
10-10
flex array 排序，可对二位数组多个字段排序提供一个参考。
flex 排列
sc0002的博客
01-05 267
// html <div class="playlist-container"> <div class="playlist-main"> <img src="" class="playlist-img"/> <div>内容</div> </div> </div> // css .playlist-container{ display: flex; flex-wrap: wrap; jus
Flex布局（弹性布局）
最新发布
ORANGE_3iING的博客
08-10 2490
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式对父容器设置的属性作用属性值设置主轴的方向row 默认值从左到右row-reverse 从右到左column 从上到下column-reverse 从下到上设置主轴上的子元素排列方式> 注意:使用这个属性之前一定要确定好主轴是哪个flex-start：默认值，从头部开始，如果主轴是x轴，则从左到右flex-end：从尾部开始排列center：在主轴居中对齐(如果主轴是x轴则水平居中)space-around：平分剩余空间。
Flex布局
weixin_73202160的博客
09-12 310
最基础的h5布局，希望可以帮助大家(大家随时可以给我提建议哦）
flex布局
2303_77723338的博客
10-20 460
（1）nowrap (默认不换行) 例如 我们有一个500px宽的父盒子，父盒子里面有六个100px宽的子盒子，默认不换行六个100px宽的盒子就会缩小自己的宽度，放在父盒子的一行上。（1） flex-start （默认初始值）以主轴为准,元素以主轴的起始点对齐 justify-content:flex-start;（2）flex-end 以主轴为准,元素以主轴的终点对齐 justify-content:flex-end。
flex布局排版
weixin_45736311的博客
03-16 620
flex布局
【移动端网页布局】Flex 弹性布局案例 ③
03-06
在移动端网页设计中，Flex布局，全称是Flexible Box，是一种强大的盒模型布局方式，尤其适合处理复杂的、响应式的界面。本案例将深入探讨Flex布局的使用，通过实际的代码示例来阐述其核心概念和应用场景。 一、Flex...
移动端Web页面的CSS3 flex布局快速上手指南
09-24
在移动端Web页面设计中，CSS3的Flexbox（Flexible Box）布局模型是一个强大的工具，它极大地简化了元素的布局方式，特别是在处理响应式设计时。本文将为您提供一个快速上手CSS3 Flexbox布局的指南。 首先，开启...
CSS之(移动端)flex布局
weixin_45707229的博客
07-10 1023
移动端常用的flex布局，使用顺序：设置主轴，是否换行，设置子项在主轴和侧轴排列/对齐方式，包括多行换行和不换行的情况。
移动web 第三天移动端特点、百分比布局、flex布局
12-25
"移动Web第三天移动端特点、百分比布局、Flex布局" 在移动Web开发中，了解移动端特点是非常重要的。移动端网页和PC端网页有很多不同点，如屏幕尺寸、分辨率、视口等。下面我们将详细讲解移动端特点、百分比布局和...
Flex布局详解
linggty的博客
01-02 352
Flex 布局教程：语法篇布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009 年，W3C 提出了一种新的方案 —-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的
css-flex布局
weixin_65116989的博客
04-08 1535
order数值越小，排列越靠前，默认为0注意：和z-index不一样order:-1;
简单总结一下Flex布局
weixin_40710412的博客
05-23 1226
flex 布局在日常开发的过程中是非常常用的了，相较于传统的流式布局，flex可以更加灵活的设置布局内元素的排布和大小。
【详解】flex布局详解
Lipn_的博客
12-09 1479
一篇文章学习flex布局的常见属性
flex实现动态图片排列-小白篇
LavaStrom
10-13 547
flex实现动态图片排列 新手入门可以参考如下代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片flex排布</title> </head> <body> <div class="main"> <img src="https://timgsa.baidu.c
Flex布局 （上万字）超详细讲解 这篇就够了
热门推荐
制定持续可量化的目标，不断坚持。
02-12 3万+
Flex布局，全称为“Flexible Box Layout”，意为“弹性盒布局”。它是一种现代的CSS布局模式，旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知或动态变化。灵活性：Flex布局允许项目在容器中灵活地扩展和收缩，以填充可用空间或调整大小以适应内容。对齐方式：Flex布局提供了各种对齐选项，可以轻松地实现水平和垂直对齐。方向控制：可以方便地改变主轴的方向，使项目在水平或垂直方向上排列。空间分配。
移动端开发详解：弹性盒模型 Flexbox 入门与实践
"移动开发之弹性盒，是前端开发中的重要布局技术，尤其在HTML5和CSS3时代，弹性盒布局（Flexbox）被广泛应用在移动端。本文将介绍弹性盒的基础概念和属性知识，帮助开发者深入理解并熟练掌握这一布局方式。" 在前端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Graskli

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值