【九月打卡】第17天 flex弹性盒模型

课程名称：初识HTML(5)+CSS(3)-升级版

课程章节： flex弹性盒模型

主讲老师：五月的夏天

课程内容：

今天学习的内容包括： flex的使用？justify-content属性如何使用？align-items属性如何使用？

课程收获：

设置display: flex属性可以把块级元素在一排显示。flex需要添加在父元素上，改变子元素的排列顺序。默认为从左往右依次排列,且和父元素左边没有间隙。

justify-content属性，可以用于项目在主轴上的对齐方式。属性值为flex-start时表示交叉轴的起点对齐。属性值为flex-end表示右对齐。属性值为center表示居中。属性值为space-between表示两端对齐，项目之间的间隔都相等。属性值为space-around表示每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items属性可以用于项目在交叉轴上的对齐方式。属性值为flex-start表示左对齐而且也是默认值。属性值为flex-end表示交叉轴的终点对齐。属性值为center表示交叉轴的中点对齐。属性值为aseline表示项目的第一行文字的基线对齐。属性值为stretch（默认值）表示如果项目未设置高度或设为auto，将占满整个容器的高度。

如果我们给子元素设置flex属性，从而可以设置子元素相对于父元素的占比。我们需要注意的是flex属性的值只能是正整数,表示占比多少。除此之外，我们给子元素设置了flex之后,其宽度属性会失效。

今天学习了flex弹性盒模型的14-1到14-4的4个小结，花费了35分钟，今天主要学习了弹性盒模型flex的使用与属性。flex布局是我们在移动端和pc端用到比较多的，因为兼容绝大多数浏览器，而且可以在不同屏幕下进行适配。我们可以使用不同的属性让元素进行横排或者竖排，从而实现我们需要的排版布局，除此之外，我们还可以将flex和前面的百分比进行一起使用，再结合文本和样式一起来实现设计图的效果。