css弹性布局与layui

前言

正式去公司实习了，这才发现学校里学的东西和企业里的有很大的区别。在实习生的上岗培训过程中学习到了很多知识，记了些笔记，方便进行复习和总结

css弹性布局

Flex布局原理

通过父盒子添加flex属性，来控制子盒子的位置和排列方式

父项常见属性

1. flex-direction 设置主轴方向

    row 默认主轴
    Row-reverse 简单了解即可
    Column 主轴为Y轴，X轴为侧轴 上-下
    Column-reverse
   

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

    flex-start 默认
    flex-end 从尾部
    center 在主轴居中对齐
    Space-around 平分剩余空间
    Space-between 两边贴边，剩余平分
   

3. Flex-wrap 设置子元素是否换行
   默认项目在一条轴线，不换行，会缩小

    nowrap默认，不换行
    wrap 自动换行
   

4. align-content 设置侧轴的子元素排列 多行/换行 单行无效

    flex-start 头部开始
    flex-end
    center 侧轴中间显示
    space-around 侧轴平分剩余空间
    space-between 两边贴牢，剩余平分
    stretch 子元素高度平分父元素
   

5. align-items 设置侧轴的子元素排列 单行

    flex-start 默认
    flex-end 
    center 居中
    stretch 拉伸 子盒子不要给高度
    flex-flow 复合属性 把设置主轴方向和是否换行，进行结合
   

元素是跟着主轴来排列的

子项常见属性

1. Flex子项目占的份数 剩余空间中分配

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

    默认auto  表示继承父的align-items
    如果没有父 则类似于stretch
   

3. order属性定义子项的排列顺序 前后

    默认是0 数值越小，排列越靠前
   

Layui

layui是一个很方便使用的第三方组件，需要知道它的存在，会改会用就行。
下面是从其他博主那边发现的镜像网站，目前足够学习和使用了。
开源模块化前端 UI 框架 Layui