哈喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！

志同道合的小伙伴跟我一起学习交流哦！

第二阶段 CSS322 CSS3伸缩布局及应用

1 传统布局三等份

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向。

侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的方向：默认主轴从左向右，侧轴默认从上到下主轴和侧轴并不是固定不变的，通过 flex-direction可以互换。

2 伸缩布局三等份

Flex布局的语法规范经过几年发生了很大的变化，也给 Flexbox的使用带来一定的局限性，因为语法规范版本众多，浏览器支持不一致，致使Flexbox布局使用不多

各属性详解

1 flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

min-width最小值 min-width：280p× 意思是最小宽度不能小于280。

max-width：1280X 最大宽度不能大于1280。

3 伸缩布局固定宽度

4 伸缩布局排列方式

flex-direction调整主轴方向（默认为水平方向）

flex- direction:column垂直排列

flex-direction:row水平排列

12 justify- content调整主轴对齐（水平对齐）

13 align-items调整侧轴对齐（垂直对齐）

单行的用的比较多

14 flex-wrap属性 控制是否换行

当我们子盒子内容宽度多于父盒子的时候如何处理

15 aign- content属性

align-content堆栈（由fex-Wrap产生的独立行）对齐

align-content，是针对fex容器里面多轴（多行）的情况 align-items是针对一行的情况进行排列。

必须对父元素设置自由盒属性 display:flex，并且设置排列方式为横向排列 flex-direction :row;并且设置换行， flex-wrap:wrap;这样这个属性的设置才会起作用。

16 order属性

ordera控制子项目的排列顺序，正序方式排序，从小到大。

用css来控制盒子的前后顺序。用 order就可以

用整数值来定义排列顺序，数值小的排在前面。可以为负值。默认值是0​

此知识点重在理解，要明确找出主轴、侧轴、方向，各属性对应的属性值。

看不懂的小伙伴不要气馁，后续的分享中将持续解释，只要你跟着我分享的课程从头到尾去学习，每篇文章看三遍，一个月后，回过头来看之前的文章就会感觉简单极了。

本章已结束，下篇文章将分享《23 BFC》小伙伴们不要错过哟！