引导记忆 CSS Flex布局（容器属性篇）

前言

hey, 大家好，我是迪迪，今天带大家轻松入门CSS Flex布局
授人以鱼不如授人以渔，在文章中讲到个别知识点会附上小编的学习思路~
希望能带给同行朋友们一些帮助，废话不多说，咱们开始吧！

首先，理解一下什么是Flex Box布局
Flex是Flexible的缩写，意为伸缩的、灵活的
Box不用多说，就是盒子的意思
所以Flex Box布局可以理解成伸缩布局盒模型

接着，我们直接上手

2.1 先写一个简单的html结构

<div class="container"><!--这是一个容器-->
	<!--以下这些都是容器里的子元素-->
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

2.2 再给一些简单的样式

/*容器样式*/
.container {
	width: 600px;
	height: auto;
	border: 1px solid #000;
}
/*容器下的子元素样式*/
.container>div{
	height: 50px;
	font-size: 45px;
}
/*容器下为奇数的子元素*/
.container>div:nth-child(odd){
	background: rgba(128,128,128,0.1);/*较浅色*/
}
/*容器下为偶数的子元素*/
.container>div:nth-child(even){
	background: rgba(128,128,128,0.5);/*较深色*/
}

效果图如下：
简单效果图

一个容器，要成为flex的盒子，从何而起？
当然是通过定义它成为一个flex盒子:

display: flex;

通过display的方式，让你想要的容器成为flex盒子
为了兼容webkit内核的浏览器，我们最好再加上第一句

display: -webkit-flex;

将其放入代码

.container {
	display: -webkit-flex;
	display: flex;
}

效果图：
在这里插入图片描述
这时，你会发现设置为flex的容器里的子元素都变成类似于行内元素的行为
为什么说类似，因为真正的行内元素是这样的 ↓ ↓ ↓
可以看出行内元素之间有条缝隙

若不想水平排列，可以换成别的排列么？
答案是当然可以
给容器添加以下属性 ↓ ↓ ↓

flex-direction: row | row-reverse | column | column-reverse;

direction 意为方向则flex-direction我们可以理解为flex容器的方向
row 是默认值，row意为行，则控制容器内的元素水平排列
column 意为列，则控制容器内的元素垂直排列
reverse 意为颠倒的、相反的
– 则我们可以理解row-reverse为水平倒叙排序
– column-reverse为垂直倒叙排序，就是将元素颠倒过来排序

/*水平排列*/
.container {
	flex-direction: row;
}
/*垂直排列*/
.container {
	flex-direction: row-reverse;
}
/*水平翻转排列*/
.container {
	flex-direction: column;
}
/*垂直翻转排列*/
.container {
	flex-direction: column-reverse;
}

效果图：
flex-direction

在水平排列中，元素都没有宽度，我们试着给元素添加不同的宽度，看看会发现什么
（PS：容器（container）宽度为600px，一共5个元素）

/*子元素宽度为100px*/
.container>div{
	width: 100px;
}
/*子元素宽度为150px*/
.container>div{
	width: 150px;
}
/*子元素宽度为200px*/
.container>div{
	width: 200px;
}
/*子元素宽度为500px*/
.container>div{
	width: 500px;
}

效果图：
在这里插入图片描述
容器的宽度没有改变，当所有的子元素加起来的宽度超过元素，似乎也没有没什么改变，没有撑开容器，亦没有换行
我们打开浏览器调试工具去找找原因：

在浅色的属性中，我们发现有个flex-wrap属性值为nowrap
wrap 意为包裹，
那nowrap 意思是不包裹？那逻辑似乎不对
为了谨慎起见，我们先将直译的意思放一边，去MDN查阅一下这个属性，链接：flex-wrap
我们可以看到这段话：
在这里插入图片描述
嗯，没错，就是这个属性了，原来nowrap 意为不换行，去查翻译也是词义（感谢有道词典）↓

我们去MDN官网里flex-wrap下的例子也可看得清清楚楚：↓ ↓ ↓

废话不多说了，还是照例上代码

.container{
	flex-wrap: nowrap;
}
.container{
	flex-wrap: wrap;
}
.container{
	flex-wrap: wrap-reverse;
}

在这里插入图片描述

flex-flow是什么

flex-flow: <flex-direction> | <flex-wrap>;

flex-flow是flex-direction和flex-wrap的复合属性
flow 意为流、流动，则flex-flow可以理解为盒模型的流动
默认值为 row nowrap

我们可以通俗的这么记忆：将flex-flow理解为水流，是水流就需要有流动的方向（flex-direction）以及流动的路径flex-wrap（是否一直往前nowrap，还是路径蜿蜒wrap）

案例这里就不做示范啦~

在写前端页面时，总会涉及到元素的对齐，flex盒模型也有管理子项目对齐的方式

justify-content: flex-start | flex-end | center | space-between | space-around;
align-content: flex-start | flex-end | center | stretch | space-between | space-around;
align-items: flex-start | flex-end | center | stretch | baseline;

– justify 意为两端对齐、对齐， align 意为排列、对齐
– content 意为内容， item 意为项目、项
– start 意为开始、起点， end 意为结束、终点， center 意为居中、中心
– stretch 意为伸展、延伸， space 意为空间、间隔、隔开
– between 意为之间，在中间，around 意为周围
– baseline 意为基线

一下解释这么多词汇，对英文不敏感的人，想必会有点晕
小编整理了成一个速记图方便大家记忆↓ ↓ ↓
flex容器对齐速记图
在图片中，我们会看到两个陌生的词：交叉轴和主轴
那什么是交叉轴和主轴呢？
小编给大家找来了一个示意图（源w3c.org）：（图中侧轴也为交叉轴之意）
主轴与交叉轴
简单理解：
- 当flex-direction为列（垂直排列）时，垂直方向为主轴，水平方向为交叉轴，起点为左端，终点为右端
- 当flex-direction为行（水平排列）时，水平方向为主轴，垂直方向为交叉轴，起点为顶部，终点为底部
- 若方向为列相反、行相反时，起点亦将反过来，变成右起左终、底起顶终

知识点讲完，趁热打铁，我们来写几个实例：

.container{
	width: 500px;
	height: 300px;
}
.container>div:nth-child(odd){
	width: 100px;
	height: 50px;
}
.container>div:nth-child(even){
	width:160px;
	height: 100px;
}

效果图：
在这里插入图片描述
justify-content：

/*flex-start*/
.container{
	justify-content: flex-start;
}
/*flex-end*/
.container{
	justify-content: flex-end;
}
/*center*/
.container{
	justify-content: center;
}
/*space-between*/
.container{
	justify-content: space-between;
}
/*space-around*/
.container{
	justify-content: space-around;
}

效果图如下：
justify-content
align-items:

.container>div:nth-child(odd){
	border-top: 10px solid #000;
}
/*flex-start*/
.container{
	align-items: flex-start;
}
/*flex-end*/
.container{
	align-items: flex-end;
}
/*center*/
.container{
	align-items: center;
}
/*baseline*/
.container{
	align-items: baseline;
}
/*stretch*/
.container>div{
	height: auto;
}
.container{
	align-items: space-around;
}

效果图：
align-items
align-content:

/*flex-start*/
.container{
	align-content: flex-start;
}
/*flex-end*/
.container{
	align-content: flex-end;
}
/*center*/
.container{
	align-content: center;
}
/*space-around*/
.container{
	align-content: space-around;
}
/*space-between*/
.container{
	align-content: space-between;
}
/*stretch*/
.container>div{
	height: auto;
}
.container{
	align-content: stretch;
}

效果图：
align-content

后话

好啦~ 关于flex布局的容器属性就讲到这里，其他Flex相关的属性可以戳以下链接：

来源：CSDN

作者：桑迪_clock

链接：https://blog.csdn.net/weixin_41178632/article/details/86758393

标签

flex布局

box

css