Day08_弹性盒子-布局

背景 : 目前鸿蒙生态系统开发的过程中 , 除了正常的布局方法之外, 我们在绝大部分项目开发的时候, 会使用弹性盒子做开发, 使用弹性盒子开发, 不仅能提高我们的开发效率, 还能简化我们开发的样式; 同样还能节约时间; 本节课我们就要开始慢慢接触弹性盒子的魅力所在;

今日学习目标

  1. 什么是弹性盒子, 弹性盒子作用

  2. 触发弹性盒子的方法及特点

  3. 弹性盒子基础概念

  4. 弹性盒子里面的属性

  5. 移动端布局

  6. 综合案例

1. 概念

​ 含义 : 什么是弹性盒子 , 弹性盒子属于移动端的布局的方式之一; 除了能使用响应式完成移动端布局, 弹性盒子更适合完成移动端布局

​ 作用 : 通过使用弹性盒子布局 , 我们可以改变元素的排列方式 ; 让原本纵向排列的元素横向显示; 弹性盒子属于轴线布局的一种 ( 也被称之为一维布局 ) , 布局的时候要么按照主轴形式布局, 要么按照侧轴形式进行布局

2. 方法及特点

​ 如何触发弹性盒子

​ 使用 : display : flex ; 完成触发弹性盒子

​ 触发弹性盒子带来的特点 :

​ a) 切记添加属性应该添加到父元素上面

​ b) 触发弹性盒子之后 , 所有子元素横向显示

​ c) 触发弹性盒子之后 , 如果子元素原来是行内元素, 此时行内元素会变成块级元素

​ d) 触发弹性盒子之后 , 如果只有一个子元素, 给子元素添加margin:auto; 会让子元素实现水平垂直正居中

​ e) 触发弹性盒子之后 , 只会影响子元素的排列方式, 不会影响孙子辈的排列方向

3. 基础概念

  1. 容器 : 最大的盒子 , 也就是我们最外层的父元素

  2. 项目 : 小的盒子, 父元素里面的子元素,

  3. 水平轴 : 就是我们所谓的X轴 ;

  4. 垂直轴 : 就是我们所谓的Y轴 ;

  5. 主轴 : 触发弹性盒子之后 , 子元素的排列方向 , 排列方向所在的轴线被称之为主轴;

  6. 侧轴 : 与主轴对立的方向 , 也被称之为交叉轴 , 交叉轴与主轴垂直;

4. 弹性盒子里面的属性

1) 容器上面的属性

a) 触发弹性盒子

​ 含义 : 触发弹性盒子必备属性, 没有这个属性后面的所有的属性均不可使用

​ 基本语法 : display : flex;

​ 案例 :

<style>
    /*容器*/
    .bigbox{
        width:600px;
        height:600px;
        border:10px solid gray;
        margin:100px auto;
        /*1)触发弹性盒子*/
        display:flex;
    }
    /*项目*/
    .bigbox>div{
        width:50px;
        height:50px;
        border:2px dashed red;
        text-align:center;
        line-height:50px;
    }
</style>
<div class="bigbox">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
b) 修改主轴方向

​ 含义 : 触发弹性盒子之后, 默认主轴在横向 ; 修改主轴的排列方向

​ 基本语法 : flex-direction : row / row-reverse / column / column-reverse

​ 释义 :

​ row; == 代表的是主轴在横向 , 默认值

​ row-reverse; == 代表主轴在横向 , 但是为反方向排列

​ column; == 代表的是主轴在纵向 ;

​ column-reverse; == 代表的是主轴在纵向 , 但是为反方向排列

​ 案例 :

<style>
    /*容器*/
    .bigbox{
        width:600px;
        height:600px;
        border:10px solid gray;
        margin:100px auto;
        /*1) 触发弹性盒子*/
        display:flex;
        /*2) 调整主轴方向*/
        flex-direction:column;
    }
    /*项目*/
    .bigbox>div{
        width:50px;
        height:50px;
        border:2px dashed red;
        text-align:center;
        line-height:50px;
    }
</style>
<div class="bigbox">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>
c) 调整主轴上面对其方式

​ 情景 : 默认情况下 , 所有项目 , 位于主轴上面的挨在一起显示, 如何调整间距, 就需要使用调整主轴上面的对其方式

​ 基本语法 : justify-content : flex-start / flex-end / center / space-around / space-between / space-evenly

​ 释义 :

​ flex-start ; == 主轴的开始位置 , 默认值 , 项目之间并没有分开

​ flex-end ; == 主轴的结束位置, 项目之间并没有分开

​ center ; == 主轴的居中位置, 项目之间并没有分开

​ space-around ; == 主轴项目两端环绕; 项目与项目之间的距离是首尾项目距离父元素之间距离的2倍

​ space-between ; == 主轴项目两端对其; 首尾项目贴边显示

​ space-evenly ; == 主轴项目间距平分, 项目与项目之间的距离, 与首尾项目距离父元素之间距离是一致的;

​ 案例 :

<style>
    /*容器*/
    .bigbox{
        width:600px;
        height:600px;
        border:10px solid gray;
        margin:100px auto;
        /*1) 触发弹性盒子*/
        display:flex;
        /*3) 主轴对其方式*/
        justify-content:space-between;
        
    }
    /*项目*/
    .bigbox>div{
        width:50px;
        height:50px;
        border:2px dashed red;
        text-align:center;
        line-height:50px;
    }
</style>
<div class="bigbox">
	<div>1</div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>
d) 调整侧轴上面对其方式

​ 情景 : 主轴上面的对其方式已经调整完毕, 接下来要调整侧轴上面的对其方式 ;

​ 基本语法 : align-items : flex-start / flex-end / center / stretch

​ 释义 :

​ flex-start ; == 侧轴的开始位置显示

​ flex-end ; == 侧轴的结束位置显示

​ center; == 侧轴的居中位置

​ stretch ; == 侧轴拉伸显示; 主轴在横向, 如果项目不设置高度默认高度已经撑满容器; 主轴在纵向,如果不设置宽度可以撑满容器宽度

​ 案例 :

<style>
    /*容器*/
    .bigbox{
        width:600px;
        height:600px;
        border:10px solid gray;
        margin:100px auto;
        /*1) 触发弹性盒子*/
        display:flex;
        /*4) 调整侧轴上面对其方式*/
        align-items:flex-end;
        
    }
    /*项目*/
    .bigbox>div{
        width:50px;
        height:50px;
        border:2px dashed red;
        text-align:center;
        line-height:50px;
    }
</style>
<div class="bigbox">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
e) 折行属性

​ 情景 : 如果项目放置的数量比较多 , 默认的情况是所有的项目均会在一行中显示 , 如果想要折行显示的话 , 我们需要触发折行属性完成

​ 基本语法 : flex-wrap : wrap / no-wrap;

​ 释义 :

​ wrap; == 折行

​ no-wrap; == 不折行

​ 案例 :

<style>
    /*容器*/
    .bigbox{
        width:600px;
        height:600px;
        border:10px solid gray;
        margin:100px auto;
        /*1) 触发弹性盒子*/
        display:flex;
        /*5) 折行属性*/
        flex-wrap:wrap;
    }
    /*项目*/
    .bigbox>div{
        width:50px;
        height:50px;
        border:2px dashed red;
        text-align:center;
        line-height:50px;
    }
</style>
<div class="bigbox">
	<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>11</div>
	<div>12</div>
	<div>13</div>
	<div>14</div>
	<div>15</div>
</div>
f) 调整行间距

​ 情景 : 元素拥有自身的高度 , 折行之后 , 会有一个比较大的行间距 , 如何调整行间距呢 ?

​ 基本语法 : align-content :

​ 释义 :

​ flex-start ; == 侧轴的开始位置 , 默认值 , 行与行之间并没有分开

​ flex-end ; == 侧轴的结束位置, 行与行之间并没有分开

​ center ; == 侧轴的居中位置, 行与行之间并没有分开

​ space-around ; == 侧轴项目两端环绕; 行与行之间的距离是首尾行距离父元素之间距离的2倍

​ space-between ; == 侧轴项目两端对其; 首尾行贴边显示

​ space-evenly ; == 侧轴项目间距平分, 行与行之间的距离, 与首尾行距离父元素之间距离是一致的;

​ 案例

<style>
    /*容器*/
    .bigbox{
        width:600px;
        height:600px;
        border:10px solid gray;
        margin:100px auto;
        /*1) 触发弹性盒子*/
        display:flex;
        /*5) 折行属性*/
        flex-wrap:wrap;
        /*6) 调整行间距*/
        align-content:flex-start
    }
    /*项目*/
    .bigbox>div{
        width:50px;
        height:50px;
        border:2px dashed red;
        text-align:center;
        line-height:50px;
    }
</style>
<div class="bigbox">
	<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>11</div>
	<div>12</div>
	<div>13</div>
	<div>14</div>
	<div>15</div>
</div>

2) 项目上面的属性

a) 调整显示顺序

​ 情况 : 触发弹性盒子之后 , 默认主轴在横向 , 元素从左向右显示 , 如何调整显示顺序

​ 基本语法 : order : number;

​ 注意事项 : 取值越大越靠后面;

​ 案例 :

<style>
    /*容器*/
    .bigbox{
        width:600px;
        height:600px;
        border:10px solid gray;
        margin:100px auto;
        /*1) 触发弹性盒子*/
        display:flex;
    }
    /*项目*/
    .bigbox>div{
        width:50px;
        height:50px;
        border:2px dashed red;
        text-align:center;
        line-height:50px;
    }
    /*属性应用于项目中, 应用于子元素中*/
    .bigbox>:nth-child(1){
        order:100;
    }
    .bigbox>:nth-child(2){
        order:50
    }
</style>
<div class="bigbox">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>
b) 占剩余宽度剩余高度

​ 情景 : 再app移动端项目开发的时候, 共计有三个区域, 两个区域拥有自己的高度, 想要实现,剩下的一块区域占剩余高度的所有;

​ 基本语法 : flex : 1;

​ 注意 : 主轴在横向, 实现的是占剩余看宽度所有; 主轴在纵向, 实现的是占剩余高度所有 ; 应用场景 :

​ 案例 :

<style>
    *{margin:0;padding:0}
    html,body{height:100%}
    body{display:flex;flex-direction:column}
    header{height:100px;background-color:red}
    /*这里的 flex:1 */
    /*该属性应用于项目中, 也就是应用于子元素中*/
    section{flex:1;background-color:orange}
    footer{height:100px;background-color:blue}
</style>
<body>
	<header>头部区域</header>
	<section>主体区域</section>
	<footer>尾部</footer>
</body>
c) 不挤压不折行

​ 情景 : 如果容器项目过多, 触发弹性盒子之后, 所有的项目并不会折行, 而且剩余空间不够的时候, 默认项目是被挤压的 ; 如何不让项目挤压, 并且不折行;

​ 基本语法 : flex-shrink : 0 / 1

​ 释义 :

​ 0 : 代表的是不挤压, 不折行

​ 1 : 代表的是挤压, 默认值

​ 应用场景 : 横向的导航栏

​ 案例 :

<style>
    /*容器*/
    .bigbox{
        width:600px;
        height:600px;
        border:10px solid gray;
        margin:100px auto;
        /*1) 触发弹性盒子*/
        display:flex;
        overflow:auto;
    }
    /*项目*/
    .bigbox>div{
        width:50px;
        height:50px;
        border:2px dashed red;
        text-align:center;
        line-height:50px;
        /* 主要应用于:横向导航栏; */
        flex-shrink:0
    }
    
</style>
<div class="bigbox">
	<div>推荐</div>
	<div>首页</div>
	<div>关注</div>
	<div>年货节</div>
	<div>本地</div>
    <div>喜欢</div>
	<div>历史记录</div>
	<div>音乐</div>
	<div>电影</div>
	<div>电视剧</div> 
</div>
d) 调整项目单独对其方式

​ 情景 : 前面我们使用了align-items是将所有的项目都一起在侧轴上面进行调整的; 如何实现单独调整一个项目的对其方式

​ 基本语法 : align-self : flex-start / flex-end / center / stretch

​ 案例 :

<style>
    /*容器*/
    .bigbox{
        width:600px;
        height:600px;
        border:10px solid gray;
        margin:100px auto;
        /*1) 触发弹性盒子*/
        display:flex;
    }
    /*项目*/
    .bigbox>div{
        width:50px;
        height:50px;
        border:2px dashed red;
        text-align:center;
        line-height:50px;
        /*主要应用于*/
    }
    .bigbox>:nth-child(1){
        align-self:flex-start;
    }
    .bigbox>:nth-child(2){
        align-self:center;
    }
    .bigbox>:nth-child(3){
        align-self:flex-end;
    }
    .bigbox>:nth-child(4){
        align-self:stretch;
    }
</style>
<div class="bigbox">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

5. 移动端布局

1) 移动端含义

​ 可以移动得设备被称之为移动端，手机，平板，手表，都可以称之为移动端设备 ; 目前来看，做开发得时候，手机==手机界面app界面

2) 移动端页面，项目查看

​ 需要在手机上面查看，设备模拟器切换不同得手机屏幕型号，观看你写的对应得页面效果

​ 右键----检查----找到设备模拟器切换窗口进行切换

3) 设备模拟器里面内容介绍

​ iphone678======手机型号

​ 375*667========手机屏幕得分辨率

​ 75%============理解成：最佳观看比例

​ 旋转小图标======切换横屏和竖屏

​ 右上角三个圆点===

capture screenshot 截取手机屏幕得相关设计稿（短图）

capture full size screenshot 截取手机屏幕相关设计稿(带有滚动条区域得所有)

4) 手机型号屏幕大小

​ 以iphone手机为例

​ iphone4========320-480

​ iphone5========320-568

​ iphone678======375-667

​ iphone678s=====414-736

5) 设备像素比

​ 设备像素比：是一个固定的比值

​ 设备像素比(dpr)=物理像素/CSS像素

​ **物理像素：**设备像素（物理像素），顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt

​ **CSS像素：**又称为虚拟像素、设备独立像素或逻辑像素。CSS 像素是 Web 编程的概念，指的是 CSS 样式代码中使用的逻辑像素。

换个角度去理解：物理像素设计稿；CSS像素开发时候的宽度高度

6) 视口

**布局视口：**布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。根据设备的不同，布局视口的默认宽度有可能是768px、980px或1024px等，

在这里插入图片描述

视觉视口： 视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度，下面通过图2演示什么是视觉视口。

在这里插入图片描述

理想视口： 理想视口是指对设备来讲最理想的视口尺寸。采用理想视口的方式，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。

在这里插入图片描述

7) 理想视口

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!--
	name="viewport" 	代表的是设备视口为理想视口;
	content="" 			代表的是视口内容的设置;
	width=device-width; 代表的是宽度等于设备的宽度;啥
	initial-scale=1.0;  代表的是初始缩放比例为1.0;
	minimum-scale=1.0;  代表的是最小缩放比例为1.0;
	maximum-scale=1.0;  代表的是最大缩放比例为1.0;
    user-scalable=no;   代表的是不允许用户缩放;
-->

8) 移动端开发的步骤

1、确定你得设计稿出自于哪一个屏幕

就是为了确定dpr确定设备像素比

2、根据设备像素得比值，确定CSS像素

CSS像素=物理像素/dpr

可以这样理解：css像素=测量得距离/2

3、引入理想视口   meta标签引入

4、引入icon图标，引入自己得CSS样式

link引入

link引入

5、编写移动端布局

HTML部分

<body>
	<header>头部</header>
	<section>主体</section>
	<footer>尾部</footer>
</body>

CSS部分

*{margin:0;padding:0}
ul{list-style:none}
img{vertival-align:middle}
a{text-decoration:none}
input{outline:none}
/*万能清楚法*/
/*窗口自适应*/
html,body{
  height:100%
}
body{
  display:flex;
  flex-direction:column
}

6. 综合案例

案例1

案例2

案例3

# html5 # 鸿蒙 # 前端 # javascript # css
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

灯光模拟HarmonyOS应用实战-27-两千道生成题为什么正确答案全是B：用稳定置换消除答案位置偏置

avatar HarmonyOS开发者社区
cover

HarmonyOS 7 新特性（二十四）｜ModularObjectExtensionAbility 与 Taihe IPC

avatar HarmonyOS开发者社区
cover

HarmonyOS 7 新特性（二十五）｜智慧手势：意图识别与误触治理

avatar HarmonyOS开发者社区