Flex弹性布局
作为开发小白,写的第一篇博客,记录自己的学习,算是讲义,切勿直接复制粘贴,在写的过程中会忘记中英文切换,避免造成不必要的麻烦;如有问题,欢迎订正。谢谢。
在说Flex弹性布局前,先简单说下传统的布局,在未用弹性布局时,我们会通过用display、float、position等属性来达到效果,还有盒子模型;盒子模型需要提到box-sizing属性:
对于box-sizing属性值做下简单介绍:
content-box:这个属于普通盒子模型,之所以说普通,是因为当我们div这个元素添加padding、border等属性时,这个盒子会变大,向外扩展;(以div为例,div已经给过宽高)
border-box:相比于content-box对于我们的布局更友好,当我们给div这个元素添加padding、border等属性时,这个盒子不会变大,保持原有的大小,向内扩展;(以div为例,div已经给过宽高)
属性值 | 变化 |
---|---|
content-box | 盒子变大,向外扩展 |
border-box | 盒子不变,向内扩展 |
现在开始说Flex弹性布局属性
首先从父元素开始说起:当我们开始使用弹性布局时,display:flex;属性一定要加,对于不同浏览器兼容问题,可以加上display:-webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;解决兼容问题。
对于弹性盒子要说到主轴和交叉轴,后面会说到这个概念,为了有助于理解先贴一张图,主轴和交叉轴像数学里X轴与Y轴。
一、父元素
-
display:flex; 使用弹性布局时,display:flex;属性一定要加,对于不同浏览器兼容问题,可以加上display:-webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;解决兼容问题。
-
justify-content:主轴上的子元素排列方式(该属性作用在主轴上,默认情况下主轴为X轴);属性值有(该例子主轴为X轴):
center:子元素居中显示
space-between:子元素两端对齐显示
space-around:子元素拉手显示(就像小孩在站队一样,手拉手站,最外面的两个小朋友具外围只有一个手臂宽,中间手拉手的部分是两个手臂的宽,说不清楚,还是图解吧!)
flex-start:子元素居左显示;
flex-end:子元素居右显示;
CSS部分:.child { width: 50px; height: 50px; background-color: #127078; border: 1px solid #111111; text-align: center; font-size: 20px; line-height: 50px; color: #ffffff; } .box { width: 300px; height: 300px; border:1px solid #000000; display: flex; justify-content: flex-end; }
body部分:
<div class="box">
<div class="child">1</div>
<div class="child">2</div>