Web前端开发 移动端布局（flex布局快速入门）

已于 2022-11-11 08:53:26 修改
阅读量1k 收藏 2
点赞数
文章标签： 前端 css html
于 2022-11-10 22:43:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46127956/article/details/127794581
版权

目录

零、rem布局案例代码

1.效果图

在这里插入图片描述

2.源代码

https://download.csdn.net/download/weixin_46127956/86928074

一、flex布局原理

  • 给父盒子(flex_container)加flex属性，控制子盒子(flex_item)的排列方式
  • flex盒子内的clear、float、vertical-align无效

二、父元素属性

1.display:flex

将容器指定为flex布局

2.flex-driection（设置主轴排列方向）

属性说明
row(默认值)主轴方向为→，即主轴为水平方向，起点在左端
row-reverse主轴方向为←，即主轴为水平方向，起点在右端
column主轴方向为↓，即主轴为垂直方向，起点在上沿
column-reverse主轴方向为↑，即主轴为垂直方向，起点在下沿

效果：在这里插入图片描述

HTML代码：

row效果：
<div class="father row">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
row-reverse效果：
<div class="father row-reverse">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
column效果：
<div class="father column">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
column-reverse效果：
<div class="father column-reverse">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

CSS代码：

.father {
    width: 500px;
    background-color: pink;
    display: flex;
}

.row {
    flex-direction: row;
}

.row-reverse {
    flex-direction: row-reverse;
}

.column {
    flex-direction: column;
}

.column-reverse {
    flex-direction: column-reverse;
}

.father span {
    width: 50px;
    border: 1px solid #000;
}

3.justify-content（设置主轴对齐方式）

属性说明
flex-start(默认值)头部对齐
flex-end尾部对齐
center居中对齐
space-around居中分布
space-between左右贴片，再居中分布

效果：
在这里插入图片描述

HTML代码：

flex-start效果：
<div class="father flex-start">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
flex-end效果：
<div class="father flex-end">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
center效果：
<div class="father center">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
space-around效果：
<div class="father space-around">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
space-between效果：
<div class="father space-between">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

CSS代码：

.father {
    width: 500px;
    background-color: pink;
    display: flex;
    flex-direction: row;
}

.father span {
    width: 50px;
    border: 1px solid #000;
}

.flex-start {
    justify-content: flex-start;
}

.flex-end {
    justify-content: flex-end;
}

.center {
    justify-content: center;
}

.space-around {
    justify-content: space-around;
}

.space-between {
    justify-content: space-between;
}

4.flex-wrap（设置换行）

属性说明
nowrap(默认值)不换行（若父装不下，会缩小”子盒子“的大小）
wrap换行

效果：
在这里插入图片描述
HTML代码：

nowrap效果：
    <div class="father nowrap">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
    wrap效果：
    <div class="father wrap">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

CSS代码：

.father {
    width: 500px;
    background-color: pink;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.father span {
    width: 200px;
    border: 1px solid #000;
}

.nowrap {
    flex-wrap: nowrap;
}

.wrap {
    flex-wrap: wrap;
}

5.align-items（设置侧轴对齐方向）

属性说明
stretch(默认值)平均拉伸父元素高度
flex-start头部对齐
flex-end尾部对齐
center居中对齐

效果：
在这里插入图片描述

HTML代码：

stretch效果：
    <div class="father stretch">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
    flex-start效果：
    <div class="father flex-start">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
    flex-end效果：
    <div class="father flex-end">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
    center效果：
    <div class="father center">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

CSS代码：

.father {
    width: 500px;
    height: 80px;
    background-color: pink;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.father span {
    width: 200px;
    border: 1px solid #000;
}

.stretch {
    align-items: stretch;
}

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

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

.center {
    align-items: center;
}

6.align-items（设置侧轴对齐方向–多行的情况下）

属性说明
stretch（默认值）平均拉伸父元素高度
flex-start头部对齐
flex-end尾部对齐
center居中对齐
space-around居中分布
space-between左右贴片，再居中分布

效果：
在这里插入图片描述

HTML代码：

stretch效果：
    <div class="father stretch">
        <span>1</span><span>2</span><span>3</span>
        <span>4</span><span>5</span><span>6</span>
    </div>
    flex-start效果：
    <div class="father flex-start">
        <span>1</span><span>2</span><span>3</span>
        <span>4</span><span>5</span><span>6</span>
    </div>
    flex-end效果：
    <div class="father flex-end">
        <span>1</span><span>2</span><span>3</span>
        <span>4</span><span>5</span><span>6</span>
    </div>
    center效果：
    <div class="father center">
        <span>1</span><span>2</span><span>3</span>
        <span>4</span><span>5</span><span>6</span>
    </div>
    space-around效果：
    <div class="father space-around">
        <span>1</span><span>2</span><span>3</span>
        <span>4</span><span>5</span><span>6</span>
    </div>
    space-between效果：
    <div class="father space-between">
        <span>1</span><span>2</span><span>3</span>
        <span>4</span><span>5</span><span>6</span>
    </div>

CSS代码：

.father {
    width: 500px;
    height: 80px;
    background-color: pink;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}

.father span {
    width: 30%;
    border: 1px solid #000;
}

.stretch {
    align-content: stretch;
}

.flex-start {
    align-content: flex-start;
}

.flex-end {
    align-content: flex-end;
}

.center {
    align-content: center;
}

.space-around {
    align-content: space-around;
}

.space-between {
    align-content: space-between;
}

7.flex-flow（deriction和wrap的复合写法）

例如：flex-flow:row wrap

三、子元素属性

1.flex(设置分配份数)

属性说明
1（整数）表示占一个份额
30%（百分比）表示占30%

效果：
在这里插入图片描述

HTML代码：

整数效果：
    <div class="father int">
        <span class="int_1">flex:1</span><span class="int_1">flex:1</span><span class="int_2">flex:2</span>
        <span class="int_4">flex:4</span><span class="int_1">flex:1</span><span class="int_1">flex:1</span>
    </div>
    百分比效果：
    <div class="father">
        <span>1</span><span>2</span><span>3</span>
        <span>4</span><span>5</span><span>6</span>
    </div>

CSS代码：

.father {
    width: 500px;
    height: 80px;
    background-color: pink;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}

.father span {
    width: 30%;
    border: 1px solid #000;
}

.int_1 {
    flex: 1;
}

.int_2 {
    flex: 2;
}

.int_4 {
    flex: 4;
}

div.percentage span {
    flex: 30%;
}

2.align-self（控制子项的侧轴对齐方式）

例如：align-self:flex-end
效果：
在这里插入图片描述
HTML代码：

子项flex-end：
    <div class="father int">
        <span>flex-start</span>
        <span class="flex_end">flex-end</span>
        <span>flex-start</span>
        <span>flex-start</span>
    </div>

CSS代码：

.father {
    width: 500px;
    height: 80px;
    background-color: pink;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
}

.father span {
    width: 30%;
    border: 1px solid #000;
}

.flex_end {
    align-self: flex-end;
}

3.order（控制子项顺序，值越小越前，默认为0）

例如：order:-1
效果：
在这里插入图片描述

HTML代码：

子项order=-1 :
<div class="father int">
    <span>1</span>
    <span class="order_-1">2(order: -1)</span>
    <span>3</span>
    <span>4</span>
</div>

CSS代码：

.father {
    width: 500px;
    height: 80px;
    background-color: pink;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
}

.father span {
    width: 30%;
    border: 1px solid #000;
}

.order_-1 {
    order: -1;
}
MrHomeWP
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一文说白 CSS 弹性布局 Flexible Box
MoTec的博客
01-05 509
CSS 弹性布局
CSS-Learning | 弹性布局flexible Box
qq_35536883的博客
08-05 220
罗列一下弹性布局的属性，资料来源廖雪峰教程博客 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex 项目（flex item），简称"项目"。 容器属性 Flex-direction 决定主轴的方向（即项目的排列方向） row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，...
Flex 布局教程：语法篇
菜文鸡
11-21 538
转自：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W
前端flex布局
weixin_68397667的博客
05-31 1003
一篇文章带你看懂flex弹性布局
display：flex布局语法
11-20
flex 弹性盒子布局语法，关于廖雪峰老师网站学习笔记的分享，
flex布局
qq_24647411的博客
05-28 166
1，display:flex;justity-content:center;align-items:center;
移动web开发实例flex布局案例源码
02-16
在现代Web开发中，Flex布局（Flexible Box Layout）已经成为创建响应式、动态和灵活的用户界面的首选方法，尤其在移动设备上。本实例聚焦于使用Flex布局进行移动Web开发，通过具体的源码分析，我们可以深入理解并...
携程网站 移动端 Flex布局
06-08
携程网站 移动端 Flex布局，新人可以利用此资源来学习flex布局的应用 Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 ...
移动端web开发flex布局案例
04-07
在移动端Web开发中，Flex布局（Flexible Box布局）是一种强大的CSS布局模式，旨在提供更灵活的盒模型，以便在各种屏幕尺寸和设备上创建响应式布局。本案例将深入探讨Flex布局的应用，以及如何利用它来优化移动端网页...
移动端Web页面的CSS3 flex布局快速上手指南
09-24
在移动端Web页面设计中，CSS3的Flexbox（Flexible Box）布局模型是一个强大的工具，它极大地简化了元素的布局方式，特别是在处理响应式设计时。本文将为您提供一个快速上手CSS3 Flexbox布局的指南。 首先，开启...
【移动端网页布局】Flex 弹性布局案例 ③
03-06
在移动端网页设计中，Flex布局，全称是Flexible Box，是一种强大的盒模型布局方式，尤其适合处理复杂的、响应式的界面。本案例将深入探讨Flex布局的使用，通过实际的代码示例来阐述其核心概念和应用场景。 一、Flex...
弹性布局，display:flex
weixin_42761614的博客
02-19 149
弹性布局详解 https://www.cnblogs.com/hellocd/p/10443237.html
移动端Web页面适配方案（整理版）
weixin_57550930的博客
10-22 4437
主要分为：【百分比|rem|vw/vh|响应式设计】 介绍： 移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。 早期网页设计采用静态布局，通过<meta>标签中的applicable-device应用设备标识识别移动设备，即<meta name = 'applicable-device' content = 'mobile'>，在<meta&g
【css教程】web前端入门学习 css（9）广义的html5 品优购项目（html+css基础完结，js开始，移动端布局开始）
Dontla的博客
04-02 359
文章目录广义的html5品优购项目导读网站制作流程原型图项目规划项目整体介绍项目规划项目搭建网站favicon图标网站TDK三大标签SEO优化品优购首页制作常用模块类名命名快捷导航shortcut制作header制作logo制作搜索模块制作导航制作footer 底部制作main主体模块制作推荐模块制作楼层区floor制作tab栏切换布局需求列表页制作列表页header和nav修改列表页主题sk-container注册页面的制作注册页类名命名注册页布局web服务器本地服务器远程服务器将自己网站上传到远程服务器
移动端布局——Flex布局
m0_45659764的博客
04-02 2061
一、Flex布局 思考 多个盒子横向排列使用什么属性？ 浮动 设置盒子间的间距使用什么属性？ margin 需要注意什么问题？ 浮动的盒子脱标 Flex布局/弹性布局：(PC端对低版本浏览器不兼容/移动端可以随便用) 是一种浏览器提倡的布局模型 非常适合结构化的布局（左右、上下...） 布局网页更简单、灵活 避免浮动脱标的问题 一个网站：http://caniuse.com 查看一个技术兼容和不兼容的浏览器版本 1.1 Flex布局模型构成 作用 基于Fl...
Flex 布局教程：语法篇（阮一峰）
远方
07-11 393
Flex 布局教程：语法篇 作者： 阮一峰日期： 2015年7月10日网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了...
Flex 布局教程：实例篇
weixin_30409849的博客
09-03 3259
你会看到，不管是什么布局，Flex往往都可以几行命令搞定。 我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。 一、骰子的布局 骰子的一面，最多可以放置9个点。 下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。 如果不加说明，本节...
flex弹性布局学习
lizhongyu0922的博客
03-15 398
一.起源：2009年W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。支持IE10+。二.概念：Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以被指定为flex布局。.box{ display: flex; }.box{ display: inline-flex; }Webkit内核的浏览器，必...
移动端布局 flex
最新发布
06-04
移动端布局一般使用弹性盒子模型（Flexbox）来实现，Flexbox 是 CSS3 中新增的一种布局模式。它通过设置容器（即父元素）和项目（即子元素）的属性来实现灵活的布局方式，可以非常方便地实现响应式布局。移动端布局...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值