弹性盒子flex的基本操作及属性！ -

弹性盒子基本的设置

第一步：display:flex;

代码	说明
display:flex	设置弹性盒子
flex:auto	自动伸缩

注意事项:将元素设置成弹性盒子之后,里面的所有的子元素只会是块级元素.并且只对子元素有效果,而且可以设置里面子元素的宽和高

<style>
.container{
    display:flex;
    width:300px;
    border:1px solid red;
}
.container >a {
    width:50px;
    border:1px solid blue;
    height:50px;
    line-height:50px;
}
</style>
<div class="container">
    <a>你好</a>
    <em>我不好</em>
    <span>我最好</span>
</div>

以上代码可见,原本不属于块级元素的标签,都变成了可以自由设置宽高的项目,happy,确实好用，在上图中有一些划线的区域，我们称之为；剩余空间（弹性盒子的剩余空间）；为了占满剩余空间，提供了一个属性设置；
flex:auto; 在行内，不管多少项目，都会自动伸缩。

以上所说；为单行容器！

多行容器的概念

主轴 ：理解为X轴所有项目必须沿主轴排列；
交叉轴：理解为Y轴与主轴垂直的轴，称为交叉轴；

代码	说明
flex:-wrap:wrap	容器自动换行

<style>
*{
padding:0px;
margin:0px;
border-sizing:border-box;
}
.container{
    display:flex;
    width:300px;
    border:1px solid red;
    flex-wrap:wrap;
}
.container > a{
    width:150px;
    height:50px;
    line-height:50px;
}
</style>
<div class="container">
    <a>你好</a>
    <a>我不好</a>
    <a>我最好</a>
</div>

如何将子项目在容器中对器分

针对项目从主轴即 从左到右 justify-content 本质是设置容器中的剩余空间在所有项目之间的分配方案
针对项目从交叉轴 从上到下 align-items
从左到右 justify-content

单行容器的排列方

语法	关键字	说明	备注
justify-content:flex-start	flex-start	左对齐	默认值
justify-content:end	flex-end	右对齐
justify-content:center	center	居中对齐
justify-content:space-between	space-between	两端对齐，项目之间的间隔都相等
justify-content:space-around	space-around	每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍。
align-content:space-evenly	space-evenly	每个项目之间的间隔相等。

多行容器的排列方式

语法	关键字	说明	备注
align-content:stretch	stretch	左对齐	默认值
align-content:flex-start	flex-start	从顶部开始
align-content:flex-end	end	从底部
align-content:center	center	从中间
align-content:space-between	space-between	两端对齐，项目之间的间隔都相等
align-content:space-around	space-around	每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍。
align-content:space-evenly	space-evenly	每行项目之间的间隔相等。

设置项目在交叉轴上的排列方式用到的属性是align-items:

语法	关键字	说明	备注
align-items:stretch	stretch	从左边开始	默认值
align-items:flex-start	flex-start	从顶部开始
align-items:flex-end	flex-end	从右边开始
align-items:center	center	从中间开始

简写:
flex-flow: column wrap;
总结:通过这一课的反复视频观看,总结了一下flex弹性盒子的概念及排列顺序,理解了主轴和交叉轴的排列方式,学习了单行项目和多行项目!并且稍微记了一下flex的属性区分.align-items 是设置交叉轴的其他的属性都是设置单行或多行容器的区别, align-content,justify-content;等

关于后面的手机端主页设置和星期三的作业,准备在完全学完grid布局之后在慢慢研究，争取把作业交出来.想先学一下老师对布局的纵横谋划