前端基础知识第二章---移动端WEB开发之flex布局

本文阅读 6 分钟
首页 代码,网站前端 正文

一、flex布局体验

(1)传统布局与flex布局

😆温馨提醒😆: 1️⃣ 如果是PC端页面布局,我们还是传统布局; 2️⃣ 如果是移动端或者不考虑兼容性问题的PC端页面布局,我们还是使用flex弹性布局;

(2)flex布局初体验

显示效果如下:

1️⃣ 搭建HTML结构

<!-- 里面的3个span是行内元素 -->
<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

2️⃣ CSS样式 ① span 直接给宽度和高度,背景颜色,还有蓝色边框; ② 给 div 只需要添加 “display:flex” 即可;

二、flex布局原理

1️⃣ flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局。 2️⃣ 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。 img

总结flex布局原理:就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式。

😆温馨提醒😆:当我们为父盒子设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效。

三、flex布局父项常见属性

(1)常见父项属性

以下由6个属性是对父元素设置的:

  • flex-direction:设置主轴的方向;
  • justify-content:设置主轴上的子元素排列方式;
  • flex-wrap:设置子元素是否换行;
  • align-content:设置侧轴上的子元素的排列方式(多行);
  • align-items:设置侧轴上的子元素排列方式(单行);
  • flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap;

(2)flex-direction 设置主轴的方向(重点)

1️⃣ 主轴与侧轴

在 flex 布局中,是分为主轴和侧轴两个方向,同样的叫法有:行和列、x轴和y轴; <font color="#dd0000">默认主轴方向就是 x 轴方向,水平向右; 默认侧轴方向就是 y 轴方向,水平向下;</font> img

2️⃣ 属性值

flex-direction 属性决定主轴的方向(即项目的排列方向)

😆温馨提醒😆:主轴和侧轴是会变化的,就看 flex-direction 设置谁为主轴,剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。

(3)justify-content 设置主轴上的子元素排列方式(重点)

justify-content 属性定义了项目在主轴上的对齐方式;

😆温馨提醒😆:使用这个属性之前一定要确定好主轴是哪个。

(4)flex-wrap 设置子元素是否换行(重点)

默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap 设置子元素是否换行,flex布局中默认是不换行的。

(5)align-items 设置侧轴上的子元素排列方式(单行 重点)

该属性是控制子项在侧轴(默认是y轴)上的排列方式 在子项为单项(单行)的时候使用。

(6)align-content 设置侧轴上的子元素的排列方式(多行 重点)

设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况(多行),在单行下是没有效果的。

(7)align-content 和 align-items 区别

1️⃣ align-items 适用于单行情况下,只有上对齐、下对齐、居中和 拉伸; 2️⃣ align-content 适应于换行(多行)的情况下(单行情况下无效),可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值; 3️⃣ 总结就是单行找 align-items 多行找 align-content img

(8)flex-flow

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

代码演示如下:

flex-flow:row wrap;

四、flex布局子项常见属性

1️⃣ flex 子项目占的份数; 2️⃣ align-self 控制子项自己在侧轴的排列方式; 3️⃣ order属性定义子项的排列顺序(前后顺序);

(1)flex 属性(重点)

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

代码演示如下:

.item {
    flex: <number>; <!-- default 0 -->
}

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

align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性。 默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch。

代码演示如下:

span:nth-child(2) {
    <!-- 设置自己在侧轴上的排列方式 -->
    align-self: flex-end;
}

(3)order 属性定义项目的排列顺序

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

😆温馨提醒😆:和 z-index 不一样。

代码演示如下:

.item {
order: <number>;
}

五、案例分析及小知识点补充

❗️❗️❗️ 案例分析:携程网移动端首页,访问地址:携程网移动端首页

背景线性渐变: img

语法演示如下:

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

😆温馨提醒😆:背景渐变必须添加浏览器私有前缀。起始方向可以是:方位名词 或者 度数,如果省略默认就是 top。

六、总结

😝 由于内容较多,所以我决定分开写啦,我会坚持一直更新呢!喜欢的朋友们记得点点赞哦! 😝

本文为互联网自动采集或经作者授权后发布,本文观点不代表立场,若侵权下架请联系我们删帖处理!文章出自:https://blog.csdn.net/battledao/article/details/122862776
-- 展开阅读全文 --
KillDefender 的 Beacon 对象文件 PoC 实现
« 上一篇 02-09
Web安全—逻辑越权漏洞(BAC)
下一篇 » 03-13

发表评论

成为第一个评论的人

热门文章

标签TAG

最近回复