「这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战」
前言
先学习了一下HTML基本的知识，时间太长了忘记了，总结一下自己了解到基本知识总结一下。
块级元素和行内元素
块级元素
块级元素主要特点：都会占用一行的空间，在页面上默认从上向下排列。
最常见元素：div，p，form，ul，h1，h2
其他特点：
- 块级元素的高度、宽度、margin和padding设置有效，宽度没有设置时，默认为100%
- 块级元素中可以包含块级元素和行内元素，常见的div一般可以包含基本上所有的元素
行内元素
主要特点：不会占用一行空间，多个元素在一条水平线上。
常见的行内元素：span，a，textarea，script，img，input，select
其他特点：
- 行内元素设置的高度和宽度是无效的，由内容的大小长短决定。
- 一般情况下，行内元素只能包含数据和其他行内元素。
CSS传统布局模型
在网页中，CSS有三种传统的布局模型，分别为：
- 流动模型（Flow）
- 浮动模型（Float）
- 层模型（Layer）
简单的说明其特点：
- 流动模型就是默认的布局模型，根据块级元素和行内元素的特点按照自己需要的方式进行布局排列。
- 浮动模型是给元素加上
float属性，可以使块级元素浮动可在一行显示。 - 层模型采用三种定位关系，来定位元素之间的位置关系：
相对定位(position: relative),绝对定位(position: absolute),固定定位(position: fixed)
flex布局
传统的布局基于盒状模型，
display 属性 + position属性 + float属性来控制，
display控制元素显示状态，position控制元素之间位置关系，float控制元素的浮动特性。
2009年出了一个新方案，flex弹性布局方案，给一个元素上display: flex属性，让这个元素称为一个容器，这个容器里面的子元素一般叫项目。
容器默认存在两根轴：水平的主轴（main axis）和垂直竖直的交叉轴（cross axis）。
使用Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
flex重要属性总结
flex-direction 排列方向
这个是非常重要的特性，指定容器其中的排列方向（direction）。一共有四种方向：
row从左向右排列row-reverse从右向左排列column从上向下排列column-reverse从下向上排列 默认是在一行上进行排列
justify-content 对齐方式，额外空间分配
距离几个常用的，后面跟着了解再学学其他的：
flex-start： 默认的属性，从启点线开始顺序排列flex-end：相对终点线顺序排列center：居中排列，常用的space-between：所有项目均匀分布，第一个项目在启点线，最后一个项目在终点线，常用的
align-items
定义容器中项目交叉轴方向的对齐方式，从左至右方向
stretch：默认的，交叉轴方向拉伸项目，向主轴拉伸，横着占满空间flex-start：元素按交叉轴起点线对齐，只对齐，不向主轴拉伸flex-end：项目按交叉轴终点线对齐，以项目的下边缘为基准只对齐，不拉伸center：交叉轴方向项目中间对齐，所有项目的对于容器主轴中间对齐，对于容器来说所有项目作为单独个体上下空余的空间一样。
align-content
定义容器中元素在主轴方向的对其方式，从上至下方向，容器内必须有多行元素，这个属性才能有效果。
stretch：默认的，主轴方向拉伸项目，向交叉轴拉伸，竖着占满空间flex-start：元素按主轴起点线对齐，只对齐，不向交叉轴轴拉伸flex-end：项目按主轴终点线对齐，以项目的下边缘为基准只对齐，不拉伸center：居中排列，常用的，容器中所有项目的对于容器交叉轴中间对齐，对于容器来说所有项目作为一个整体左右空余的空间一样。
总结
现在流行的是flex布局，但是作为新手还是有一定的理解难度，之前只是稍微了解，现在重新学习了一下又了解到了很多新的功能，新的思想。
今天摸索总结了一下flex布局的重要属性，没有画图，单靠文字描述不够形象，只能接下来实际操作才能加深印象了。
