Web前端自学记录（九） （flex）（less）

弹性盒（Flex）

1.flex(弹性盒、伸缩盒)

flex是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局，
flex可以使元素具有弹性，让元素可以根据页面的大小改变而改变

弹性容器

 要使用弹性盒，必须先将一个元素设置为弹性容器
 我们通过display来这是弹性容器
     display:flex 设置为块级弹性容器
     display:inline-flex 设置为行内的弹性容器

弹性元素

弹性容器的子元素是弹性元素(弹性项)
一个元素可以同时是弹性容器和弹性元素

2.弹性容器的样式

flex-direction 指定容器中弹性元素的排列方式

可选值：
    row 默认值 弹性元素在容器中水平排列
    row-reverse 弹性元素水平反向排列
    column 弹性元素纵向排列
    column-reverse 弹性元素纵向反向排列

主轴：
    弹性元素的排列方向称为主轴
侧轴：
    与主轴垂直方向的称为侧轴

flex-wrap:设置弹性元素是否在弹性容器中自动换行

可选值：
    nowrap 默认值 元素不会自动换行
    wrap 元素沿着侧轴方向自动换行
    wrap-reverse 元素沿着侧轴反方向换行

flex-flow: wrap和direction的简写属性

justify-content: 如何分配主轴上的空白空间(主轴上的元素如何排列)

可选值：
    flex-start：元素沿着主轴的起边排列
    flex-end：元素沿着主轴的终边排列
    center：元素居中排列
    space-around；空白分配的元素两侧
    space-evenly：空白分布到元素的单侧
    space-between：空白均匀分布到元素间

align-items: 元素在侧轴上如何对齐

可选值：
    stretch：默认值，将元素的长度设置为相同的值
    flex-start：元素不会拉伸，沿着侧轴起边对齐
    flex-end：沿着侧轴的终边对齐
    center：居中对齐
    baseline：基线对齐

align-content: 侧轴空白空间的分布

用法与justify-content一致

align-self: 用来覆盖当前弹性元素上的align-items

3.弹性元素的样式

flex-grow: 弹性的增长系数

flex-shrink: 弹性的缩减系数

flex-basis: 元素基础长度

指定的是元素在主轴上的基础长度
默认值是auto表示参考元素自身的高度或宽度

flex 可以设置弹性元素所有的三个样式

flex 增长 缩减 基础值：
initial:"felx:0 1 auto"
auto:"flex:1 1 auto"
none:"flex:0 0 auto"

order 决定弹性元素的排列顺序

Less

less是一门css的预处理语言
less是css的增强版，通过less可以编写更少的代码实现更强大的样式
在less中添加了许多的新特性，像对变量的支持，对mixin的支持…
less的语法大体上和css语法一致，但是less中增添了许多对css的扩展
所以浏览器无法直接执行less代码，要执行必须先将less转换为css，然后再由浏览器执行

注释

//less中的单行注释，不会被解析到css文件中
/*
css中的注释，会被解析到css文件中
*/

//变量，在变量中可以存储一个任意的值
//并且我们可以在需要时，任意的修改变量中的值
//变量的语法 @变量名
@a:100px;
@b:box6;

.box5{
width: @a;
}
//使用变量时，如果是直接使用则以@变量名的形式使用即可

//作为类名，或者一部分值使用时必须以@{变量名}的形式使用

.@{b}{
width: @a;   
}
// 变量发生重名时，会优先使用比较近的变量
// 可以在变量声明前就使用变量

基本使用方法

.box1{
    .box2{
        color:red;
    }
    >.box3{
        color: red;
    }
    //为box1设置一个hover
    //& 表示外层的父元素
    &:hover{
        color: red;
    }
}

.p1{
    width: 100px;
    height: 200px;
}

.p2{
    width: 100px;
    height: 200px;
    color: red;
}
//extend() 对当前选择器扩展指定选择器的样式（选择器分组）
.p2:extend(.p1){
    color: red;
}

.p3{
    //直接对指定的样式进行引用
    //mixin 混合
    .p1();
}

//使用类选择器时可以在选择器后面添加一个()，这时我们实际上就创建了一个mixin

.test(@w:100px,@h,@color){
    width: @w;
    height: @h;
    background-color: @color;
}

div{
    //调用混合函数，按顺序传递参数
    //.test(200px,300px,#bfa);
    .test(@w:200px, @h:100px, @color:#bfa)
}

后续会持续更新