Flex布局
百分比布局(以前用的)
百分比布局也叫流式布局
效果:宽度自适应,高度固定
width: 100%;
height: 50px;
Float浮动布局
- 最初为了实现文字环绕
- Float 布局会造成浮动的盒子脱标,不能撑开父级容器
Flex布局
Flex 布局: 弹性布局
- 浏览器提倡的布局模型
- 布局网页更简单,灵活
- 避免浮动脱标的问题
- 非常适合结构化布局
Flex 布局示例
.box {
display: flex;
}
查看 web 技术浏览器兼容性:
https://caniuse.com/
Flex 布局组成部分
- 弹性容器: 直接父级
- 弹性盒子:直接子级
- 主轴:默认 x 轴
- 侧轴/交叉轴:默认 y 轴
flex 容器下的元素默认水平排列:默认主轴在 x 轴,弹性盒子沿着主轴排列
主轴对齐方式justify-content
Flex 布局模型中,可以调节主轴或侧轴的对齐方式来设置盒子之间的间距
属性值 | 作用 |
---|---|
flex-start | 默认值,起点开始依次排列 |
flex-end | 终点开始依次排列 |
center | 沿主轴居中排列 |
space-around | 弹性盒子沿主轴均匀排列,空白间距均分在弹性[盒子两侧] |
space-between | 弹性盒子沿主轴均匀排列,空白间距均分在相邻[盒子之间] |
space-evenly | 弹性盒子沿主轴均匀排列,弹性盒子与容器之间[间距相等] |
示例:
<style>
h3 {
text-align: center;
}
.box-wrap {
display: flex;
margin: 0 auto;
width: 500px;
border: 1px solid #eee;
}
.box-wrap+.box-wrap {
margin-top: 20px;
}
.box {
width: 100px;
height: 100px;
font-size: 20px;
line-height: 100px;
text-align: center;
background-color: skyblue;
}
/* 居中 */
.box-center {
justify-content: center;
}
/* 间距在盒子之间 */
.box-between {
justify-content: space-between;
}
/* 间距在子两侧,视觉效果:子级之间的距离是两头距离的 2 倍 */
.box-around {
justify-content: space-around;
}
/* 盒子和容器所有间距相等 */
.box-evenly {
justify-content: space-evenly;
}
</style>
<h3>默认</h3>
<div class="box-wrap">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<h3>justify-content: center;</h3>
<div class="box-wrap box-center">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<h3>justify-content: space-between;</h3>
<div class="box-wrap box-between">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<h3>justify-content: space-around;</h3>
<div class="box-wrap box-around">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<h3>justify-content: space-evenly;</h3>
<div class="box-wrap box-evenly">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
侧轴对齐方式align-items
容器属性 align-items 元素属性 align-self
属性值 | 作用 |
---|---|
flex-start | 默认值,起点开始依次排列 |
flex-end | 重点开始依次排列 |
center | 沿侧轴居中排列 |
stretch | 默认值,弹性盒子沿着主轴线被拉伸至铺满容器 |
示例:
<!DOCTYPE html>
<html lang="en">
<body>
<style>
h3{
text-align: center;
}
.box-wrap {
width: 500px;
margin: 0 auto;
display: flex;
height: 200px;
border: 1px solid #666;
}
.box {
width: 100px;
background-color: skyblue;
}
.box-wrap-height .box {
height: 100px;
}
/* 拉伸 */
.stretch {
align-items: stretch;
}
/* 顶对齐 */
.flex-start {
align-items: flex-start;
}
/* 底对齐 */
.flex-end {
align-items: flex-end;
}
/* 上下居中 */
.center {
align-items: center;
}
.child-center .box:nth-child(2){
align-self: center;
}
</style>
<h3>子元素没有设置高度,默认撑开和父级一样高</h3>
<div class="box-wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h3>子元素没有设置高度,默认:align-items: stretch;</h3>
<div class="box-wrap stretch">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h3>子元素设置高度,默认</h3>
<div class="box-wrap box-wrap-height">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h3>子元素设置高度,默认:align-items: flex-start;</h3>
<div class="box-wrap box-wrap-height flex-start">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h3>align-items: flex-end;</h3>
<div class="box-wrap box-wrap-height flex-end">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h3>align-items: center;</h3>
<div class="box-wrap box-wrap-height center">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h3>设置单独子元素 align-self: center</h3>
<div class="box-wrap box-wrap-height child-center">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
伸缩比flex
语法
flex: 数值;
数值是子级平分父级剩余尺寸的份数
示例:
<!DOCTYPE html>
<html lang="en">
<body>
<style>
.box-wrap {
width: 500px;
margin: 0 auto;
display: flex;
height: 200px;
border: 1px solid #666;
}
/* 固定尺寸 */
.box-1 {
width: 100px;
background-color: skyblue;
}
/* 占 3/4 */
.box-2 {
flex: 3;
background-color: yellow;
}
/* 占 1/4 */
.box-3 {
flex: 1;
background-color: green;
}
</style>
<div class="box-wrap">
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
</div>
</body>
</html>
主轴方向flex-direction
修改主轴方向,实现改变元素排列方向
主轴默认是水平方向,侧轴默认是垂直方向
属性值 | 作用 |
---|---|
row | 默认值,行,水平 |
column | 列,垂直 |
row-reverse | 行,从右往左 |
column-reverse | 列,从下到上 |
示例:
<!DOCTYPE html>
<html lang="en">
<body>
<style>
.box-wrap {
margin: 0 auto;
display: flex;
/* 修改主轴方向为垂直方向 */
/* 先确定主轴方向,再设置主轴或侧轴对齐 */
flex-direction: column;
/* 视觉效果:垂直居中 */
justify-content: center;
/* 视觉效果:水平居中 */
align-items: center;
width: 500px;
height: 200px;
border: 1px solid #666;
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
<div class="box-wrap">
<div class="box"></div>
</div>
</body>
</html>
弹性盒子换行flex-wrap
实现多行排列效果
语法
flex-wrap: nowrap/wrap;
属性值 | 作用 |
---|---|
nowrap | 默认值,不换行 |
wrap | 换行 |
行对齐方式align-content
取值和 justify-content 基本相同
示例:
<!DOCTYPE html>
<html lang="en">
<body>
<style>
.box-wrap {
margin: 0 auto;
display: flex;
/* 换行显示 */
flex-wrap: wrap;
/* 行对齐方式 */
align-content: space-between;
width: 200px;
height: 500px;
border: 1px solid #666;
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
<div class="box-wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
Flex溢出隐藏
示例:
<!DOCTYPE html>
<html lang="en">
<body>
<style>
.box-wrap {
margin: 0 auto;
display: flex;
align-items: center;
width: 500px;
}
.box-left {
width: 200px;
height: 100px;
background-color: skyblue;
}
/* 重要点1:*/
/* 溢出的时候显示省略号 */
/* 因为弹性盒子的尺寸可以被内容撑开,
不换行的文字可以撑开这个盒子的尺寸 */
/* 给盒子一个为0的宽度,文字宽度就是盒子宽度
但是溢出盒子就会被隐藏 */
.box-right {
flex: 1;
width: 0;
border: 1px solid #666;
}
.box-right__content {
/* ellipsis:当对象内文本一处时显示省略标记(...)*/
text-overflow: ellipsis;
/* 文字不换行 */
white-space: nowrap;
/* 上面的width是给这里的hidden使用的 */
overflow: hidden;
}
</style>
<div class="box-wrap">
<div class="box-left"></div>
<div class="box-right">
<div class="box-right__title">长恨歌 白居易 〔唐代〕</div>
<div class="box-right__content">天生丽质难自弃,一朝选在君王侧。回眸一笑百媚生,六宫粉黛无颜色。</div>
</div>
</div>
</body>
</html>
(...)*/
text-overflow: ellipsis;
/* 文字不换行 */
white-space: nowrap;
/* 上面的width是给这里的hidden使用的 */
overflow: hidden;
}
</style>
<div class="box-wrap">
<div class="box-left"></div>
<div class="box-right">
<div class="box-right__title">长恨歌 白居易 〔唐代〕</div>
<div class="box-right__content">天生丽质难自弃,一朝选在君王侧。回眸一笑百媚生,六宫粉黛无颜色。</div>
</div>
</div>
</body>
</html>