学习记录之flex布局

Css中的flex布局是常用的布局方式之一，优点就是弹性，自适应等等。

flex布局中 常见的父级元素的几个属性如下：

①flex-direction： 设置主轴的方向（默认x轴）

②justify-content：就是子元素在主轴上的排列方式，如居中、两边对齐等

③flex-wrap：设置子元素是否换行

⑤align-content：设置侧轴上子元素的排列方式（多行的）

⑥align-items： 效果同上（单行）   不过 他们的最大区别就是对侧轴行数上的区别   也就是说align-content 在一行显示不下 会自动换行，而align-items则不换行，无论添加多少元素，会在一行均等显示

⑦flex-flow： 复合属性  相当于同时这只了flex-direction和flex-wrap

子元素的三个常见的属性

①flex: x ;x就是一个数字，就是该子元素分配剩余未分配的空间

②align-self： 控制子元素在侧轴上的排列方式

③order： 定义子元素的排列顺序（默认为0）比如第二个子元素要排在第一位  则 改为order：-1；里面的数值需要比前面子元素的要小

接下来就是一个经典的骰子布局题目

问：如何把该图布局成显示骰子中三点的那个图形

上源码：

一开始的效果

 

如何实现下图效果呢

 

实现该效果的源码

 

先给父元素设置flex布局及子元素的排列方式

再给单独的子元素设置想要的排列位置就可以了

以上就是这次的分享内容（小白 ，轻喷）

转载需告知