flex布局容器和项目的基本属性

flex布局筛子案例

首先在VScode中创建一个筛子模型

筛子的页内样式 .container{ border: 1px solid red; width: 100px; height: 100px; border-radius: 10px; background-color: #ffffff; box-shadow: 3px 3px 3px 0px #999999; display: flex; } .item{ width: 30px; height: 30px; border-radius: 50%; background-color: gold; box-shadow: 1px 1px 1px 1px blue; }

使用flex布局首先清楚在盒子中加上display:flex，盒子就是容器，引用flex后，须清楚四个概念，容器，项目，主轴，交叉抽概念。
flex布局主要有俩个属性，容器的属性和项目的属性。
容器属性：(1)flex-direction:改变主轴方向属性
flex-direction:row;默认主轴从左向右；
flex-direction:row-reverse;主轴方向从右向左；
flex-direction:column;主轴方向从上到下;
flex-direction:column-reverse;主轴方向从下到上；
（2）flex-direction-wrap:当一行代码装不下时，是否换行；
flex-wrap:nowrap;不换行；
flex-wrap:wrap;换行；
flex-wrap:wrap-reverse;从下到上反方向换行；
（3）flex-flow：（1）（2）的简写模式
（4)justify-content:项目在主轴排列的方式；
justify-content:flex-start;表示项目从主轴的左边开始排列，
justify-content:flex-end;表示项目从主轴的右边开始排列，
justify-content:center;表示项目从中间开始排列，
justify-content:space-between;表示富余空间在项目和项目之间排序；
justify-content:space-around;表示富余空间环绕在项目之间；

（5）align-items:表示项目在交叉轴上如何排列；
align-items:flex-start;默认值；
align-items:flex-end;项目在交叉轴的终点位置开始排列；
align-items:center;项目在交叉轴的中间位置开始排列；
align-baseline;第一行文字的基线对齐；
(6)align-content:用来设置多跟主轴的关系；
align-content:flex-start;默认值多根主轴从上到下开始排列；
align-content:flex-end;多根主轴从下到上开始排列；
align-content:center;多根主轴从中间开始排列；
align-content:space-between;富余空间在多根主轴之间开始排列；
align-content:space-around;富余空间环绕在多根主轴之间；
项目属性（1）order定义项目的排列顺序，值越小越先排列；
（2）flex-grow;表示如果有多余的空间项目按照设置的比列生长；
（3）flex-shrink:在不换行的情况下，一行装不下是进行压缩；
（4）flex-basis：设置项目在主轴上占多少的比列；
（5）flex (2) (3) (4) 简写模式；
（6）align-self:处理单个项目在交叉轴的富余空间；
以上就是有关容器和项目的属性，属性有很多种，但常用的熟练掌握住这几种就OK了。
github

随后我把项目整理一下发送到github上