flex布局

flex布局

与传统布局相对比

1.pc端依旧使用传统布局，传统布局的兼容性较好，但是结构比较复杂。

flex布局适用于手机端的网页设计，兼容性对好多浏览器都不太友善，但是结构比较简单，整体代码不会过于繁杂。其中主要掌握父级属性和子级属性

2.flex属性必须写在父级的css结构中

     display:flex;

父级属性

1. 确定主轴方向

    flex-direction 元素跟着主轴来排列​
    flex-direction：row；​默认元素是跟着x轴进行排列。

    flex-direction：column；也可以修改为跟着y轴进行排列

2. justify-content 设置主轴上子元素的排列方式

   默认是 justify-content：flex-start；靠左对齐 ​       justify-content：flex-end；靠右对齐​

  justify-content：center；居中 对齐​

  justify-content：space-around；平分剩余空间

​  justify-content：space-between；先两边贴再        平分剩余空间​

注意：使用这个属性之前一定要先确定好主轴的方向

3.  flex-wrap设置子元素是否在一行    

默认是 flex-wrap：wrap；自动换行      

可以修改为flex-wrap：nowrap ；

注意:如果设置不换行属性，父级盒子如果装不下子盒子，则装不下的子盒子会挤开其他的子盒子使每个子盒子的宽度或者高度缩放从而挤在一行或者一列。

4. align-items设置侧轴子元素排列（只适合于单行或者一行）    

align-items：center 侧轴垂直居中  

flex-start从上到下  

flex-end从下到上

5. align-content：center设置侧轴子元素排列（只适合于*多行*）  

 只有出现flex-wrap：wrap多行的时候才能起作用，单行不起作用  

注意：多行并不是意义上多行，而是出现换行标志

的时候才叫做多行

6. flex-flow是复合属性，相当于同时设置了flex-

direction和flex-wrap   flex-flow: column wrap;

注意: 中间没有空格

子级属性

1. flex：number；分配剩余空间，用flex表示多少份

多用于一行导航栏布局

与传统布局相比，与ul中li有相似之处

2. align-self 控制子项自己在侧轴的排列方式

可控制任意子盒子的位置

3. order属性定义项目的排列方式 默认是0，数值越

小排列越靠前。

 

这是自己对flex布局的知识总结，如有不正确的地方还请各位大佬指出，感谢🥰