首页 > 其他分享> 文章详细

弹性盒布局CSS3

2020-12-03 23:01:51 阅读：195 来源： 互联网

标签：CSS3 flex 子项布局弹性 br 对齐 0px css

传统布局的局限性

1.清除浮动的额影响
2.很难实现居中
3.结构不灵活,不能随时添加盒子

弹性盒布局

非常灵活提供一套浏览器内置布局
特点:一位布局固定的CSS属性决定了这个布局一般用在移动端

加在弹性父盒子身上的属性

1.声明弹性盒子

-webkit-display:flex;
display:flex;

2.设置主轴方向

flex-direction:row 水平方向(默认)
row-reverse(水平反向)
column(垂直)
column-reserve(垂直反向)

3.设置主轴方向的排列顺序

justify-content:flex-start(左对齐)
flex-end(右对齐)
center(居中)
space-sround(两端间距等于中间的一半)
space-between(两端对齐中间间距等分)
space-evenly(间距等分)

4.设置交叉轴方向的排列方式(单行使用)

algin-items:flex-start(上对齐)/
flex-end(下对齐)
center(居中)
baseline(基线对齐)
stretch(延伸,占满)

5.换行属性
前提:不想自动收缩的时候,子盒子宽度>父盒子宽度

flex-wrap:wrap/nowrap/wrap-reverse(上下换行)


**6.复合写法**
flex-flow:flex-direction  flex-wrap;默认值 row nowrap


## 加在子项身上的属性
**flex属性**
```css
flex:flex-basis flex-shrink flex-grow;

flex-basis: 子项的宽度(auto)  基础宽度属性 

flex-shrink:子项占据弹性父盒子的溢出空间的比例 （子项宽度和>父盒子宽度的时候）  默认值为:1

flex-grow: 子项占据弹性父盒子的剩余空间的比例 （子项宽度和<父盒子宽度的时候）默认值:0


flex:auto 1 0;默认值

99%情况 剩余空间  flex:auto  1 n; ===> flex:n;

order排序属性

order:n;

子项自己在交叉轴的排列方式

align-self:flex-start上对齐/flex-end下对齐 /center居中/baseline基线对齐/stretch延伸，占满;

多行使用

所有子项在交叉轴的对齐方式

align-content:flex-start 左对齐
flex-end右对齐 
center居中
space-around两端间距等于中间的一半
space-between两端对齐中间间距等分
space-evenly间距等分;

LESS语言

介绍一下你自己: 我是css的升级我不是为了取代css 我是为了扩展css语言我是动态语言具有编程语言特性的语言我比css好在我可以计算，可以预定义一些你今后要用的值，嵌套，传参，----》

好处:编码速度会提高,维护相对容易主旨： less is more

新建 .less —> 浏览器不认识.less —>编译(.less—>.css)—>浏览器认识啦！

编译方式:

Koala 考拉

缺点：弹框提示错误

EasyLess

缺点：设置一下.css文件路径稍微有点卡重新导入

1. 变量

方便的去保存和获取数据 —>其实就是一个名字保存一个值这个名字就叫变量

@变量名:变量值;
@w:1000px;
@maincolor:skyblue;

使用:
.box {
    width:@w;
    height:200*2px;
    background-color:@maincolor;
}

2.类混入

级别1:
.a {
    width:200px;
    height:200px;
    bgc:red;
    .br;
}
.b {
    .a;
    bgc:blue;
    opacity:0.8;
    .br;
}

定义一个圆角边框类

.br {
    border-radius:50%;
}

级别2：
.br(@a) {
    border-radius:@a;
}


.b {
    .a;
    bgc:blue;
    opacity:0.8;
    .br(10px);
}

级别3:
.br(@a:50%) { //@a:50% 默认值 调用.br()不传递参数相当于使用默认值
    border-radius:@a;
}


.b {
    .a;
    bgc:blue;
    opacity:0.8;
    .br();//采用的默认值 50%
}
.c {
    .br(3px);//3px 
}

例子：

定义盒子阴影类 
.bs(@h,@v,@blur,@size,@color) {
   // box-shadow:@h @v @blur @size @color;
      box-shadow:@arguments;//实际参数列表 代表上面的5个实参
}

.box {
    .bs(0px ,0px ,10px,0px,red);
}


.bs(@str,@color) {
 
      box-shadow:@arguments;
}
// @str: 0px 0px 10px 0px
    
.bs(0px 0px 10px 0px,red)

标签：CSS3,flex,子项,布局,弹性,br,对齐,0px,css
来源： https://blog.csdn.net/zhangyiyang111/article/details/110583302

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9