【前端进阶学习】CSS属性之Flex 弹性布局基础学习～Flex 是 Flexible Box 的缩写，意为"弹性布局"

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第19天，点击查看活动详情

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。块级元素和行内块级元素都可以使用flex布局

flex-direction：决定主轴的方向

flex-direction属性，通过row，column可以调整排列方向，如果不设置每个元素的width，height，则自适应调整

// flex 横向排列，主轴水平方向，从左往右
.flex_row {
 display: flex !important;
 flex-direction: row !important;
}

//flex 纵向排列，主轴为垂直方向，从上往下
.flex_column {
 display: flex !important;
 flex-direction: column !important;
}

flex-wrap：轴线上排列不下换行

flex-wrap 属性来控制单行显示换行和不换行

默认情况不换行，即使容器无法承受所有项目，会按照等比例压缩，强制在主轴方向显示

flex-wrap: nowrap：默认不换行
flex-wrap: wrap：换行，第一行在上方，从上到下
flex-wrap: wrap-reverse：逆方向换行，第一行在下方，从下到上

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

写在最后

重新开始更文啦！最近忙了一段时间，终于继续可以学习！感谢大家的支持！我会继续努力坚持学习！养成了好习惯，每天必定会抽出时间多多少少学习前端知识～

以上习题&笔记从大佬们的论坛学习而来，特感谢大佬们的知识分享～（学习技术知识，果然要看大佬们的技术博客，大家有好的推荐也欢迎指引我这个小白哈，感恩！）

附上学习链接，感谢这些大佬出题和解答：