弹性盒模型之flex属性
这一章节学习flex弹性盒子模型,根据下面的例子来理解一下:
实现上图效果,我们需要输入以下代码:
<style> /*给父级元素的display属性设置为fle即可*/ .box{ height:400px; background:skyblue; display:flex; } .box1{ width:200px; height:200px; background:red; } .box2{ width:200px; height:200px; background:red; } .box3{ width:200px; height:200px; background:green; } </style>
<body> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </body>
上面的代码:
三个块元素设置大小以及背景色,在父容器中添加flex。
技术点的解释:
1、设置display: flex属性可以把块级元素在一排显示。
2、flex需要添加在父元素上,改变子元素的排列顺序。
3、默认为从左往右依次排列,且和父元素左边没有间隙。
14-2 使用justify-content属性设置横轴排列方式
justify-content属性,本属性定义了项目在主轴上的对齐方式。结合上一节的布局例子进行理解,属性值分别为:
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start:交叉轴的起点对齐
.box { background: blue; display: flex; justify-content: flex-start; }
flex-end:右对齐
.box{ background: blue; display: flex; justify-content: flex-end; }
center: 居中
.box { background: blue; display: flex; justify-content: center; }
space-between:两端对齐,项目之间的间隔都相等。
.box { background: blue; display: flex; justify-content: space-between; }
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
.box { background: blue; display: flex; justify-content: space-around; }
14-3 使用align-items属性设置纵轴排列方式
align-items属性,本属性定义了项目在交叉轴上的对齐方式。属性值分别为:
align-items: flex-start | flex-end | center | baseline | stretch;
结合右侧编辑器中的布局以及下面的样式设置进行理解:
flex-start:默认值,左对齐
.box { height: 700px; background: blue; display: flex; align-items: flex-start; }
flex-end:交叉轴的终点对齐
.box { height: 700px; background: blue; display: flex; align-items: flex-end; }
center:交叉轴的中点对齐
.box { height: 700px; background: blue; display: flex; align-items: center; }
baseline:项目的第一行文字的基线对齐。
.box { height: 700px; background: blue; display: flex; align-items: baseline; }
三个盒子中设置不同的字体大小,可以参考右侧编辑器中的代码进行测试。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
.box { height: 300px; background: blue; display: flex; align-items: stretch; } .box div { /*不设置高度,元素在垂直方向上铺满父容器*/ width: 200px; }
14-4 给子元素设置flex占比
flex属性,设置子元素相对于父元素的占比。
可以参考右侧编辑器的代码,测试效果如下:
技术点的解释:
1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。
2、flex属性的值只能是正整数,表示占比多少。
3、给子元素设置了flex之后,其宽度属性会失效。