参考资料: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-directionflex-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布局的更多相关文章

  1. CSS 学习笔记 - Flex 布局

    传统布局方式的局限性 传统的网页布局方式,采用 display + position + float 的方式来实现.这种方式,无法实现一些复杂的布局,并且在实现某些布局时,会有一些局限性. 比如,最常 ...

  2. CSS学习笔记09 简单理解BFC

    引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  3. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  4. css学习笔记四

    广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...

  5. CSS学习笔记10 相对定位,绝对定位与固定定位

    文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position ...

  6. CSS学习笔记08 浮动

    从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...

  7. CSS学习笔记之选择器

    目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...

  8. 2022-07-10 第五小组 pan小堂 css学习笔记

    css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...

  9. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  10. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

随机推荐

  1. MySQL技术专题(X)该换换你的数据库版本了,让我们一同迎接8.0的到来哦!(初探篇)

    前提背景 MySQL关是一种关系数据库管理系统,所使用的 SQL 语言是用于访问数据库的最常用的标准化语言,其特点为体积小.速度快.总体拥有成本低,尤其是开放源码这一特点,在 Web应用方面 MySQ ...

  2. 【数据结构与算法】二叉树的 Morris 遍历(前序、中序、后序)

    前置说明 不了解二叉树非递归遍历的可以看我之前的文章[数据结构与算法]二叉树模板及例题 Morris 遍历 概述 Morris 遍历是一种遍历二叉树的方式,并且时间复杂度O(N),额外空间复杂度O(1 ...

  3. 从零入门 Serverless | Serverless 应用如何管理日志 & 持久化数据

    作者 | 竞霄 阿里巴巴开发工程师 本文整理自<Serverless 技术公开课>,关注"Serverless"公众号,回复"入门",即可获取 Se ...

  4. 10 月 30 日 北京 LiveVideoStack 阿里云视频云专场限量赠票 100 张

    10 月 30 日 | 北京 LiveVideoStack 将携手阿里云共邀 4 位技术大咖,一同探讨从上云到创新,视频云的新技术与新场景.阿里云视频云依托阿里云服务数百万开发者的卓越服务能力与实践, ...

  5. Linux——Docker安装

    1. 安装Docker i :环境准备:Linux要求内核3.0以上 ii:安装 #1.卸载旧版本 yum remove docker \ docker-client \ docker-client- ...

  6. (课内)信安数基RSA-level1&&2

    注:(不求甚解的)攻击原理 以及(浅层的)算法解释已在图片中给出:文字部分主要讲一些python语法的东西. 代码需要库 gmpy2和libnum:加密算法还需要Crypto.Util.number ...

  7. HttpClient.PatchAsJsonAsync - dotnet/runtime 项目贡献小记

    TL;DR 迫于 PatchAsJsonAsync 方法缺失,我给 dotnet/runtime 项目贡献了相关的 API,可惜要到 .NET7 才能用上. https://github.com/do ...

  8. 第四次Alpha Scrum Meeting

    本次会议为Alpha阶段第四次Scrum Meeting会议 会议概要 会议时间:2021年4月28日 会议地点:线上会议 会议时长:18min 会议内容简介:本次会议主要由每个人展示自己目前完成的工 ...

  9. skywalking实现分布式系统链路追踪

    一.背景 随着微服务的越来越流行,我们服务之间的调用关系就显得越来越复杂,我们急需一个APM工具来分析系统中存在的各种性能指标问题以及调用关系.目前主流的APM工具有CAT.Zipkin.Pinpoi ...

  10. Python中根据时间自动创建文件夹

    导语 ​ 电脑桌面文件太多查找起来比较花费时间,并且凌乱的电脑桌面也会影响工作心情,于是利用python根据时间自动建立当日文件夹,这样就可以把桌面上文件按时间进行存放. 代码实现 # _*_codi ...