CSS笔记(一) - Flex学习笔记

已于 2023-10-26 14:13:50 修改
阅读量287 收藏
点赞数 1
分类专栏： # CSS 文章标签： css css3 html
于 2022-01-12 09:25:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JUN_7777/article/details/122446037
版权

1 布局原理

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

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

Flex容器：采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称“项目”。如下图所示:
Flex容器描述

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

2 felx布局父属性常见属性

2.1 父属性属性汇总

（1）参考网址：https://hopefuture.gitbooks.io/h5-learning/content/css3/flex/container.html

（2）以下由6个属性是对父元素设置的：

  1. flex-direction:设置主轴的方向
  2. justify-content：设置主轴上的子元素排列方式
  3. flex-wrap：设置子元素是否换行
  4. align-content：设置侧轴上的子元素的排列方式（多行）
  5. align-items：设置侧轴上的子元素排列方式（单行）
  6. flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

2.2 flex-direction设置主轴的方向

（1）主轴和侧轴
概念：在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列，x轴和y轴。

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

如下图所示：
主轴和侧轴描述

（2）属性值
概念：flex-direction属性决定主轴的方向，即项目的排列方向
注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴，子元素是跟着主轴来排列的。

属性值说明
row默认值从左到右
row-reverse从右到左
column从上到下
column-reverse从下到上

（3）举例：
现有一个div，里面有三个span：

<style>
    div {
        display: flex; /*设置浮动*/
        width: 550px;
        height: 300px;
        background-color: #c1f4fe;
        flex-direction: row-reverse; /*主轴方向 - 从右向左*/
    }
    
    div span {
        width: 150px;
        height: 100px;
        background-color: #ffcccc;
        margin-left: 10px;
    }
</style>

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

运行结果如下图所示：
从右到左的例子描述

2.3 justify-content设置主轴方向上的对齐方式

（1）概念：justify-content属性对齐flex容器的项目时，项目不使用主轴（水平）的所有可用空间。
提示：使用align-items属性垂直对齐项目。
（2）属性值

属性值说明
flex-start默认值。 项目位于容器的开头
flex-end项目位于容器的末尾
center物品位于容器的中心
space-between项目位于线条之间的空间
space-around项目在行之前，之间和之后都有空格
initial将此属性设置为其默认值
inherit从其父元素继承此属性

（3）举例，参考上面的布局，以space-between为例：

<style>
    div {
        display: flex;
        width: 800px;
        height: 300px;
        background-color: #c1f4fe;
        justify-content: space-between;
    }
    
    div span {
        width: 150px;
        height: 100px;
        background-color: #ffcccc;
    }
</style>

运行结果如下图所示：
space-between属性举例

2.4 flex-wrap属性指定flex项目是否应该换行

（1）概念

flex-wrap属性指定flex项目是否应该换行。
注意：如果元素不是flex项，则flex-wrap属性无效。

（2）属性值

属性值说明
nowrap默认值。 指定flex项目不会换行
wrap指定在必要时将flex换行
wrap-reverse指定flex项目将根据需要以相反顺序换行

（3）下面以换行wrap为例：

<style>
    div {
        display: flex;
        width: 800px;
        height: 300px;
        background-color: #c1f4fe;
        flex-wrap: wrap;
    }
    
    div span {
        width: 150px;
        height: 100px;
        background-color: #ffcccc;
    }
</style>

<body>
    <div>
        <span style="background-color:coral;">1</span>
        <span style="background-color:lightblue;">2</span>
        <span style="background-color:khaki;">3</span>
        <span style="background-color:lightgrey;">4</span>
        <span style="background-color:lightgreen;">5</span>
        <span style="background-color:blueviolet;">6</span>
        <span style="background-color:orange;">7</span>
        <span style="background-color:pink;">8</span>
    </div>
</body>

运行结果如下图所示：
换行

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

（1）设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行)，在单行侠士没有效果的。

提示：使用 justify-content 属性对齐主轴上的各项（水平）。

注意：容器内必须有多行的项目，该属性才能渲染出效果。

（2）属性

属性值说明
flex-start默认值在侧轴的头部开始排列
flex-end在侧轴的尾部开始排列
center在侧轴中间开始排列
space-around子项在侧轴平分剩余看空间
space-between子项在侧轴先分布在两头，再平分剩余空间
stretch设置子项元素高度平分父元素高度
（3）举例：

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

（1）该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项的时候使用。
（2）属性值：

属性值说明
flex-start默认值，从上到下
flex-end从下到上
center挤在一起居中，垂直居中
stretch默认，项目被拉伸以适合容器

扩展 align-content 和 align-items区别

  • align-items 适用于单行情况下，只有上对齐，下对齐，剧中和拉伸
  • align-content 适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐，下对齐，居中，拉伸以及平均分配剩余空间等属性值
  • 总结就是单行找align-items，多行找align-content

3 felx布局子属性常见属性

3.1 flex属性

概念：flex属性定义子项目剩余分配空间，用flex来表示占多少份数
语法

.item{
	flex:<number>; //default:0
}
flex实现圣杯布局

圣杯布局：如下图所示，两边固定，中间可任意伸缩。
在这里插入图片描述

<style>
    section {
        display: flex;
        width: 60%;
        height: 150px;
        background-color: aliceblue;
        margin-left: 20%;
        margin-top: 10%;
    }
    section div:nth-child(1) {
        width: 100px;
        height: 150px;
        background-color: plum;
    }
    section div:nth-child(2) {
        flex: 1;
        background-color: aquamarine;
    }
    section div:nth-child(3) {
        width: 100px;
        height: 150px;
        background-color: pink;
    }
</style>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

运行结果如下所示：
在这里插入图片描述
当你操作网页大小，两边保持大小不动，中间按照比例缩小
在这里插入图片描述

flex实现平分

（1）设计p中含有三个span，现在使用flex平分每一个span,只需要书写以下代码即可

p span {
        flex: 1;
}

完整代码如下所示：

<style>
    p {
        display: flex;
        width: 60%;
        height: 150px;
        background-color: aliceblue;
        margin-left: 20%;
        margin-top: 10%;
    }
    
    p span {
        flex: 1;
    }
    
    p span:nth-child(1) {
        background-color: antiquewhite;
    }
    
    p span:nth-child(2) {
        background-color: skyblue;
    }
    
    p span:nth-child(3) {
        background-color: pink;
    }
</style>

<body>
    <p>
        <span></span>
        <span></span>
        <span></span>
    </p>
</body>

无论如何拉伸浏览器的大小，三个span始终平分。运行结果如下图所示。
在这里插入图片描述
（2）现在要使中间的span占两份，只需要修改以下代码

    p span:nth-child(2) {
        flex: 2;
        background-color: skyblue;
    }

运行结果如下所示：
在这里插入图片描述

3.2 了解

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

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

（2）举例：现在我们让三个子盒子沿着侧轴底侧对齐。

<style>
    div {
        display: flex;
        width: 80%;
        height: 300px;
        background-color: aliceblue;
        /* margin-left: 20%;
        margin-top: 10%; */
        align-items: flex-end;
    }
    
    div span {
        width: 150px;
        height: 100px;
        background-color: aquamarine;
        margin-right: 5px;
    }
</style>

<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

运行结果如下图所示。
在这里插入图片描述

现在我们单独操作3号盒子，使得其沿着侧轴顶侧对齐。
只需添加如下代码

    div span:nth-child(3) {
        align-self: flex-start;
        background-color: antiquewhite;
    }

运行结果如下所示。
在这里插入图片描述

3.2.2 order 属性定义项目的排列顺序

数值越小，排列越靠前，默认为0。
注意：和z-index不一样。

（1）举例：
现在有如下排了顺序的盒子，如图所示。
在这里插入图片描述
现在的目的是将2号盒子排到1号盒子之前。只需添加如下代码。

    div span:nth-child(2) {
        order: -1;
    }

在这里插入图片描述

练习

用flex布局做的code如下

<style>
    .mainbox {
        display: flex;
        width: 60%;
        height: 500px;
        background-color: #f5f5f5;
        margin-left: 20%;
        margin-top: 10%;
    }
    .mainbox div:nth-child(1) {
        display: flex;
        flex-direction: column;
        justify-content:space-between;
        flex: 3;
        background-color: #f5f5f5;
    }
    .mainbox div:nth-child(2) {
        flex: 5;
        background-color: #f5f5f5;
    } 
     .mainbox div:nth-child(3) {
        display: flex;
        flex-direction: column;
        justify-content:space-between;
        flex: 3;
        background-color: #f5f5f5;
    }
    .mainbox .left span:nth-child(1),.mainbox .right span:nth-child(1){
        height: 150px;
        margin-top: 10px;
        background-color: yellowgreen;
    }
    .mainbox .left span:nth-child(2),.mainbox .right span:nth-child(2){
        height: 150px;
        background-color: pink;
    }
    .mainbox .left span:nth-child(3),.mainbox .right span:nth-child(3){
        height: 150px;
        margin-bottom: 10px;
        background-color: skyblue;
    }

</style>
<body>
    <section class="mainbox">
        <div class="left"> 
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </div>
        <div></div>
        <div class="right">
            <span>4</span>
            <span>5</span>
            <span>6</span>
        </div>
    </section>
</body>

在这里插入图片描述

心得体会:     如果想让span子盒子按着主轴平均分散，一定要让它的父盒子 .left 有高度，才能够排开,但是span有高度，但是不能有宽度，整体是因为flex子盒子有 3:5:3 的比例分配。

且.为.乐
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex学习步骤
yangfeng9754的专栏
02-26 794
 本篇文章转自：http://ria.richtechmedia.com/2007/08/09/flex-%E5%AD%B8%E7%BF%92%E8%B3%87%E6%BA%90%E6%9B%B4%E6%96%B0/最近由於種種緣故又要開始做點教育訓練的事，先趁現在有空把手邊的資料整理一下。＊Flex 的基礎架構關於 flex 基本上常被問到的不外乎就是「如何可以學好它？」，要瞭解這個
前端响应式布局笔记-flex
06-05
Flex布局，全称为Flexible Box，是CSS3引入的一种布局模型，专为了解决复杂的网页布局问题，特别是在响应式设计中。本笔记将深入探讨flex布局中的一些关键属性及其应用场景。 一、`display`属性 Flex布局的开启始于...
Flex学习笔记(flex必知必会).doc
12-02
Flex学习笔记(flex必知必会).docFlex学习笔记(flex必知必会).doc
如何学习flex
叶知秋
10-24 91
原来有人问我：怎样学好Flash？我的回答一般就是：仔细看帮助、多做练习、多看优秀的源码、多上专业论坛参加讨论。 可是Flex来了，于是又有人问：怎样学好Flex？ 我不知如何回答，因为我也是Flex新手，也在“仔细看帮助、做练习、看源码、上论坛……”。现在d.CAT的这篇优秀的文章，详细的回答了这个问题。 下面的文章转自d.CAT RIA Blog，由于原文是繁体中文的，所以转载过来的时候我对...
Flex学习
weixin_46273779的博客
02-19 88
*Flex容器属性 （父容器属性）*/ .parent {/* 改变主轴方向 */ flex-direction : row;/* 子元素超出是否|如何换行 */ flex-wrap : wrap;/* 前俩个属性结合 */ flex-flow : column wrap;/* 子元素在主轴的对其方式和分布 */ justify-content : left;/* 交叉轴子元素对其方式 和分布*/ align-items : center;
flex学习
qq_42964711的博客
05-13 140
移动web开发流式布局 1.0 移动端基础 1.1浏览器现状 PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。 总结：兼容移动端主流浏览器，处理Web
CSS基础_css_笔记
09-23
**CSS基础：开启网页设计之旅** CSS，全称Cascading Style Sheets，是用于描述HTML或XML（包括如SVG、Math...随着技能的提升，可以深入学习更复杂的布局技术、动画、过渡效果以及CSS框架，如Bootstrap和Foundation等。
JavaScript基础学习笔记
10-25
JavaScript 基础学习笔记 本资源摘要信息基于黑马视频记录的学习笔记，涵盖了 JavaScript 基础知识点，包括 HTML、CSS、JavaScript、DOM、事件处理等内容。 HTML 和 CSS 基础 * HTML 结构：head、body、title、...
CSSDemo:CSS学习笔记
04-08
【CSSDemo:CSS学习笔记】 在网页设计领域，CSS（Cascading Style Sheets）是用于控制网页元素样式和布局的重要工具。本学习笔记将深入探讨CSS的基础知识、选择器、盒模型、布局方式以及响应式设计等多个方面，帮助...
CSS样式学习笔记之一：基础知识
05-24
在CSS（层叠样式表）的学习中，基础知识是构建网页美观和功能性的基石。这篇学习笔记将引导我们深入了解CSS的...通过阅读这篇"CSS样式学习笔记之一：基础知识"，以及参考提供的博客链接，相信你会对CSS有更深入的理解。
关于flex的学习中文资料
12-08
ActionScript 3.0 语言Adobe Flex 2 Language Reference《ActionScript 3.0 语言和组件参考》下面的Adobe Flex 2 Language Reference《ActionScript 3.0 语言和组件参考》是 Flash® Player 和 Adobe® AIR® 应用程序编程接口 (API) 的参考手册。 下面的Adobe Flex 2 Language Reference《ActionScript 3.0 语言和组件参考》提供 ActionScript 语言中所支持元素的语法和用法信息。其中包括以下部分： 语言元素，如全局变量、运算符、语句、关键字、指令和特殊类型 包 按字母顺序排列的类元素条目 包含所有条目的索引 附录，比较 ActionScript 2.0 与 ActionScript 3.0 的某些关键语言和 API 的改动 有关错误和警告的附录（带注释） 提供有关使用 XML 支持补间动画和 FLVPlayback 字幕的参考信息的附录。 提供有关将数据库用于 Adobe AIR 的参考信息的附录。
flex 学习笔记
m0_52704461的博客
10-26 365
flex分为两部分，轴和容器。轴：主轴，交叉轴。容器：子容器，父容器。
flex学习经验
zhangbin3的专栏
05-14 486
最近一直在做有关JSP开发的网站，重复的登陆验证页面，重复的语法以及重复的跳转页面，熟悉的不能再熟悉的struts构建流程。 做项目的期间，还自己学习了HIBERNATE,ajax，等等 所以在写JSP代码的同时，也考虑到了JSP可以不可以和特效结合起来，于是在工作完成的时候，自己会去看一些flex的东西，很有好的界面，很炫的组件，真是被flex所深深吸引。 1. Flex结合tomcat Fle
FLex学习文档
来来往往MGD的专栏
07-30 499
1.   Flex比Flash更高效，能够应对大量数据的交互。 2.   Flex相对Xcode，控件层级不好控制。不能够通过在框架图中拖动改变层级。 3.   ControlBar控件为容器控件的通用组件，控制容器的下部。 4.   输入Mx时不要先输入，要最后输入，结束部分才能自动添加。 5.   组件id不能够与对象重名。 6.   mx：Application，程
Flex编程学习基础
Tony Chen的专栏
11-08 5258
Flex是Adobe公司推出的一项RIA（Rich Internet Application富互联网应用程序）开发技术，和Ajax一样都是Web2.0非常流行的前台开发技术，Flex比Ajax的优势是所有的浏览器的效果都一样，做出来的效果更炫，通常用于许多基于Web游戏开发。其缺点是浏览器必须安装Flash插件，因为Flex编译过后会生成Flash格式的文件在浏览器中运行，同时由于Flex生成的文件一般比较大，如果优化的不好，会影响应用速度。我在上一家公司中，因为项目需要，我曾经学习和使用了半年时间的Fle
Flex 布局学习
M_ik_Z的博客
02-23 212
Flex 布局学习1.Flex 布局体验1.1 传统布局与 Flex 布局2.Flex 布局原理2.1 布局原理3.Flex 布局父项常见属性3.1 常见父项属性3.2 flex-direction 设置主轴方向3.3 justify-content 设置主轴上子元素排列方式3.4 flex-wrap 设置子元素是否换行3.5 align-items 设置侧轴上的子元素排列方式（单行）3.6 align-content 设置侧轴上的子元素的排列方式（多行）3.7 flex-flow4.Flex 布局子项常见
flex布局初步学习
guxiansheng1991的博客
08-15 412
flex学习 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 一.容器以
Flex学习笔记（1）——入门，HelloFlex
熊出没注意！
02-22 1390
稍微有些资历的Web程序员想必都还记得Macromedia这个公司吧，想当初网页编程三剑客：Dreamweaver、Flash、Fireworks是多么的红火，可惜现在Macromedia已经是一个过去式了，实力强大的Adobe已经收购了Macromedia。不过Macromedia还是为我们留下了一个伟大的遗产，就是Flex1.0。现在看来，幸亏Macromedia被Adobe收购，Flex才能
Flex学习总结
fhuan123的专栏
11-19 204
2008-10-7 11:35---------------addEventListener（参数类型，处理函数）---------------myMenu.addEventListener(MenuEvent.ITEM_CLICK,menuClickHandler);上边表示把myMenu对象的MenuEvent.ITEM_CLICK事件交给menuClickHandler函数来处理------...
css flex 和inline-flex差别
最新发布
06-17
CSS中的`flex`布局和`inline-flex`布局都是用于创建响应式、灵活的容器布局，但它们之间存在一些关键区别： 1. **基础用法**： - `display: flex;`：这是一个块级布局，适用于需要沿主轴（默认为水平方向）进行...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值