CSS学习笔记:flex布局
参考资料:https://www.bilibili.com/video/BV1N54y1i7dG?p=4
一、Flex布局简介
1. Flex布局的主要作用
flex布局是flexible布局的缩写,字面意思就是弹性布局,它主要的作用是使用它可以非常方便地对html上的元素进行水平排布。
当flex布局还没有出现的时候,我们希望对网页元素进行水平布局往往是需要采用浮动(float)来实现的,但使用浮动会带来许多意想不到的问题:例如元素脱离标准流而造成父盒子坍缩,后面排列的元素需要使用clear:both
等方式消除浮动来避免前面浮动元素带来的影响等等,此外浮动也没有提供使水平排列的元素等分父盒子的功能,程序员手动编写这样的功能费时费力,使我们编写页面过程中出现了许多不必要的麻烦。
2. Flex布局应用场景
和前面所说的一样,Flex布局就是为了开发人员能够更简单地进行元素的排版而生的,可以看到,很多大网站上水平排布元素的方式都由float实现改成了flex实现,因而学习flex布局是有益且必要的。
b站的主页:
jetbrains官网:
从这些大网站上可以看出flex布局已经应用到了非常多的页面之上,熟练掌握Flex布局应该是当前前端开发人员的必备技能之一。
二、Flex布局的使用
1. Flex布局的两种相关元素
Flex布局中,有两种相关的元素,一个是父元素(flex-container),即用于存放被放置元素的容器,例如上面b站和jetbrains官网上包围住所有小项目的父级元素;二是子元素(flex-item),即希望被有条理放置的各个元素项(通常是水平排列),即上面b站的每个选项和jetbrains官网上的各个介绍卡片。
因为布局的结果和父元素和子元素都相关,因此,我们需要分别对父元素和子元素分别进行设置才能得到想要的结果。
2. 父项属性
属性 | 作用 |
---|---|
flex- direction | 设置主轴的方向 |
justify-content | 设置主轴上的子元素排列方式 |
flex-wrap | 设置子元素是否换行 |
align-content | 设置侧轴上的子元素的排列方式(多行) |
align-items | 设置侧轴上的子元素排列方式(单行) |
flex-flow | 复合属性,相当于同时设置了flex-direction和flex-wrap |
2.1 flex- direction
在flex布局中,是分为主轴和侧轴两个方向,同样的叫法有:行和列、x轴和y轴
- 默认主轴方向就是x轴方向,水平向右
- 默认侧轴方向就是y轴方向,水平向下
默认排列如下(从左到右):
此时修改flex-direction
属性为:
.flex-container {
display: flex;
flex-direction: column; /*竖直排列*/
...
}
其作用是修改主轴为y轴,因此元素竖直排列,效果如下:
flex- direction
的所有取值和效果:
属性值 | 说明 |
---|---|
row | 从左到右(默认值) |
column | 从上到下 |
row-reverse | 从右到左 |
column-reverse | 从下到上 |
2.2 justify-content
作用是设置主轴上的元素排列,具体效果如下:
常用属性值 | 说明 | 效果 |
---|---|---|
flex-start | 从轴的头部开始排列(默认值) | ![]() |
flex-end | 从轴的尾部开始排列 | ![]() |
center | 在主轴居中对齐 | ![]() |
space-around | 平分剩余空间 | ![]() |
space-between | 先两边贴边,再平分剩余空间 | ![]() |
space-evenly | 距离相等 | ![]() |
2.3 flex-wrap
可以发现,如果上面的元素如果再增加一个,绿色的容器的第一行就无法再装下了,但事实是怎样呢?
可以发现,加入这个元素之后,这个元素并没有放置在下一行,而是挤在了第一行,此外所有元素的宽度都被压缩了。
原因:默认情况下,item都排在一条线( 轴线) 上。flex-wrap属性定义 , flex布局中默认是不换行的(flex-wrap
默认值为no-wrap
)。
当排不下需要换行时,设置flex-wrap: wrap
即可:
.flex-container {
flex-wrap: wrap;
...
}
2.4 align-items
作用:设置侧轴上子元素的排列方式(单行)
属性值 | 说明 | 效果 |
---|---|---|
flex-start | 从上到下(默认值) | ![]() |
flex-end | 从下到上 | ![]() |
center | 挤到一起居中(垂直居中) | ![]() |
stretch | 拉伸(子元素不能设置高度) | ![]() |
2.5 align-content
和align-items
的作用非常类似,都是用于设置侧轴上子元素的排列方式,但align-content
是用于设置多行子元素的排列(单行元素无效),并且还有侧轴两边贴边等的效果。
属性值 | 说明 | 效果 |
---|---|---|
center | 多行元素居中 | ![]() |
space-around | 平分剩余空间 | ![]() |
space-between | 先上下行贴边,再平分剩余空间 | ![]() |
2.6 flex-flow
可以一次设置flex-direction
和flex-wrap
两个属性,如:
.flex-container {
flex-flow: wrap column;
}
3. 子项属性
属性名 | 作用 |
---|---|
flex | 子项目占的份数 |
align-self | 控制子项自己在侧轴的排列方式 |
order | 属性定义子项的排列顺序(前后顺序) |
3.1 flex
flex属性定义子项目分配剩余空间,用flex来表示占多少份数。
语法:
.item {
flex: <number>;
}
案例:模拟京东商城的搜索栏,即左右两个部分的宽度固定,而中间的宽度自适应。
<div class="flex-container">
<div></div>
<div></div>
<div></div>
</div>
.flex-container {
...
display: flex;
}
.flex-container > div:nth-child(1) {
width: 100px;
height: 100%;
background-color: plum;
}
.flex-container > div:nth-child(2) {
background-color: salmon;
flex: 1; /*这里取了全部的剩余空间*/
}
.flex-container > div:nth-child(3) {
width: 100px;
height: 100%;
background-color: #6ad281;
}
效果:
因为div1和div3分别占用了100px的宽度,而div2使用flex占据剩余空间,因此div2就占据了中间所有的空间。
此时改变页面的宽度,可以发现中间部分会自适应变化,而两边宽度不变。可见,使用flex布局非常容易就可以实现圣杯布局的核心部分。
因为flex可以按比例分,因此我们可以摆脱使用百分比分配的困扰:
.flex-container > div:nth-child(1) {
flex: 1;
background-color: plum;
}
.flex-container > div:nth-child(2) {
flex: 1;
background-color: salmon;
}
.flex-container > div:nth-child(3) {
flex: 2;
background-color: #6ad281;
}
效果如下:
可以看到紫色和橙色各占用一份空间,而绿色占用了两份的空间。
3.2 align-self
作用:改变单个元素在侧轴上的排列。
初始效果:
添加:
.flex-container > div:last-child {
align-self: flex-end;
}
效果:
3.3 order
子元素的order值都默认是0,设置的order值越小,就排列在flex容器的越前面的位置。
初始:
修改:
.flex-container > div:nth-child(3) {
order: -1;
}
效果:
CSS学习笔记:flex布局的更多相关文章
- CSS 学习笔记 - Flex 布局
传统布局方式的局限性 传统的网页布局方式,采用 display + position + float 的方式来实现.这种方式,无法实现一些复杂的布局,并且在实现某些布局时,会有一些局限性. 比如,最常 ...
- CSS学习笔记09 简单理解BFC
引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
- CSS学习笔记10 相对定位,绝对定位与固定定位
文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position ...
- CSS学习笔记08 浮动
从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...
- CSS学习笔记之选择器
目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...
- 2022-07-10 第五小组 pan小堂 css学习笔记
css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
随机推荐
- MySQL技术专题(X)该换换你的数据库版本了,让我们一同迎接8.0的到来哦!(初探篇)
前提背景 MySQL关是一种关系数据库管理系统,所使用的 SQL 语言是用于访问数据库的最常用的标准化语言,其特点为体积小.速度快.总体拥有成本低,尤其是开放源码这一特点,在 Web应用方面 MySQ ...
- 【数据结构与算法】二叉树的 Morris 遍历(前序、中序、后序)
前置说明 不了解二叉树非递归遍历的可以看我之前的文章[数据结构与算法]二叉树模板及例题 Morris 遍历 概述 Morris 遍历是一种遍历二叉树的方式,并且时间复杂度O(N),额外空间复杂度O(1 ...
- 从零入门 Serverless | Serverless 应用如何管理日志 & 持久化数据
作者 | 竞霄 阿里巴巴开发工程师 本文整理自<Serverless 技术公开课>,关注"Serverless"公众号,回复"入门",即可获取 Se ...
- 10 月 30 日 北京 LiveVideoStack 阿里云视频云专场限量赠票 100 张
10 月 30 日 | 北京 LiveVideoStack 将携手阿里云共邀 4 位技术大咖,一同探讨从上云到创新,视频云的新技术与新场景.阿里云视频云依托阿里云服务数百万开发者的卓越服务能力与实践, ...
- Linux——Docker安装
1. 安装Docker i :环境准备:Linux要求内核3.0以上 ii:安装 #1.卸载旧版本 yum remove docker \ docker-client \ docker-client- ...
- (课内)信安数基RSA-level1&&2
注:(不求甚解的)攻击原理 以及(浅层的)算法解释已在图片中给出:文字部分主要讲一些python语法的东西. 代码需要库 gmpy2和libnum:加密算法还需要Crypto.Util.number ...
- HttpClient.PatchAsJsonAsync - dotnet/runtime 项目贡献小记
TL;DR 迫于 PatchAsJsonAsync 方法缺失,我给 dotnet/runtime 项目贡献了相关的 API,可惜要到 .NET7 才能用上. https://github.com/do ...
- 第四次Alpha Scrum Meeting
本次会议为Alpha阶段第四次Scrum Meeting会议 会议概要 会议时间:2021年4月28日 会议地点:线上会议 会议时长:18min 会议内容简介:本次会议主要由每个人展示自己目前完成的工 ...
- skywalking实现分布式系统链路追踪
一.背景 随着微服务的越来越流行,我们服务之间的调用关系就显得越来越复杂,我们急需一个APM工具来分析系统中存在的各种性能指标问题以及调用关系.目前主流的APM工具有CAT.Zipkin.Pinpoi ...
- Python中根据时间自动创建文件夹
导语 电脑桌面文件太多查找起来比较花费时间,并且凌乱的电脑桌面也会影响工作心情,于是利用python根据时间自动建立当日文件夹,这样就可以把桌面上文件按时间进行存放. 代码实现 # _*_codi ...