前篇,我们了解了浮动和定位,但是页面千千万,那两种布局方式可以满足我们许多的想法吗?今天我再给大家分享第三种布局方式,那就是弹性盒子
文章目录
前言
通过设置display属性值为flex或flex item将其定义为弹性容器,设置flex布局以后,子元素的float,clean和vertical-align属性将会失效,那么具体怎么使用呢,我一起来看看叭~
一、弹性盒子是什么?
弹性盒子:让元素随页面大小自适应
弹性容器:display值为flex
弹性元素:弹性容器的子元素
一个元素既可以是弹性容器也可以是弹性元素
主轴:弹性元素排列的方向
辅轴:与主轴垂直的方向
webkit内核浏览器必须加上-webkit-前缀
二、基本属性
1.
1.flex-direction :设置弹性元素排列方向
可选值:
a.水平方向
row 自左向右 默认值
row-reverse 自右向左
b.垂直方向
cloumn 向下
cloumn-reverse 向上
2.flex-wrap:设置弹性元素是否转行
可选值:
wrap:沿辅轴换行
wrap-reverse:沿辅轴反方向换行
nowrap:不自动换行,默认值
3.justify-content:主轴上空白空间分配
可选值:
flex-start:主轴起边排列
flex-end:主轴终边排列
center:居中排列
space-around:空白分布在弹性元素二侧,中间元素距离相加
space-between:空白分布在弹性元素之间
space-evenly:空白分布在弹性元素一侧,元素之间距离相同
left/right/start/end
4.align-content:辅轴空白空间分配;多根轴线对齐方式(多行或多列)
可选值
flex-start:辅轴起边排列
flex-end:辅轴终边排列
center:居中排列
space-around:空白分布在弹性元素二侧,中间元素距离相加
space-between:空白分布在弹性元素之间
space-evenly:空白分布在弹性元素一侧,元素之间距离相同
left/right/start/end
5.align-items:弹性元素在辅轴上排列,元素之间(单行或单列)
可选值:
stretch:将同一水平的弹性元素辅轴高度一样,未设高度时元素会拉伸
center:辅轴中间
flex-start:辅轴起边对齐
flex-end:辅轴终边对齐
6.将justify-content和align-items同时设置center,弹性元素居中
四、弹性元素
1.flex-grow:弹性元素的伸展系数
2.flex-shrink:弹性元素的收缩系数
3.flex-basis;弹性元素在主轴上的基础长度,默认值auto
可简写:flex:grow/shrink basis
4.align-self:用来覆盖容器的align-items
可选值:
stretch:将同一水平的弹性元素辅轴高度一样,元素会拉伸
center:辅轴中间
flex-start:辅轴起边对齐
flex-end:辅轴终边对齐
5.order:设置弹性元素(有order属性弹性元素的)的排列顺序,
代码如下(示例):
以下元素展示了弹性子元素在一行内显示,从左到右:
代码段:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
当然我们可以修改排列方式。
如果我们设置 direction
属性为 rtl
(right-to-left),弹性子元素的排列方式也会改变,页面布局也跟着改变:
代码段:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
body {
direction: rtl;
}
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
2.flex-direction
flex-direction
属性指定了弹性子元素在父容器中的位置。
justify-content 属性
内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。
justify-content 语法如下:
justify-content: flex-start | flex-end | center | space-between | space-around
各个值解析:
- flex-start:
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线,而后续弹性项依次平齐摆放。
- flex-end:
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线,而后续弹性项依次平齐摆放。
- center:
弹性项目居中紧挨着填充。(如果剩余的自由空间是负的,则弹性项目将在两个方向上同时溢出)。
- space-between:
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项,则该值等同于flex-start。否则,第1个弹性项的外边距和行的main-start边线对齐,而最后1个弹性项的外边距和行的main-end边线对齐,然后剩余的弹性项分布在该行上,相邻项目的间隔相等。
- space-around:
弹性项目平均分布在该行上,两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项,则该值等同于center。否则,弹性项目沿该行分布,且彼此间隔相等(比如是20px),同时首尾两边和弹性容器之间留有一半的间隔(1/2*20px=10px)。
总结:常见问题
1.当设置display:flex时,width:100%,不能完全与父元素一致原因,
应为父元素设置了弹性盒子,使子元素等比例缩放
2.若父元素设置display:flex,子元素的高度和宽度失效,可将子元素设置flex-shrink为0
好啦,今天的分享就到这里辣,学习无止境,在学习的过程中要不断调整自己的状态呀,将知识巩固,最后,祝愿屏幕前的你呀,生活愉快,万事胜意!