前端 HTML 弹性盒子flex布局

南极O 2024-10-23 17:03:02 阅读 75

Flex - 认识

Flex布局也叫弹性布局,是浏览器提倡的布局模型,非常适合结构化布局,提供了强大的空间分布对齐能力。

Flex模型不会产生浮动布局中脱离标准文档流的现象,布局网页更简单、更灵活

Flex - 组成

设置方式:给元素设置 display:flex元素可以自动挤压或拉伸

组成部分:

弹性容器

弹性盒子

主轴:默认在水平方向

侧轴 / 交叉轴:默认在垂直方向

案例:

<code><!DOCTYPE html>

<html lang="en">code>

<head>

<meta charset="UTF-8">code>

<meta name="viewport" content="width=device-width, initial-scale=1.0">code>

<title>Document</title>

<style>

/* 弹性容器 */

.box {

/* 父元素设置弹性布局 */

display: flex;

height: 300px;

border: 1px solid #000;

}

/* 弹性盒子:沿着主轴方向排列 */

.box div {

width: 200px;

height: 100px;

background-color: pink;

}

</style>

</head>

<body>

<div class="box">code>

<div></div>

</div>

</body>

</html>

Flex 布局

属性:

描述 属性
创建 flex 容器 display: flex
主轴对齐方式 justify-content
侧轴对齐方式 align-items
某个弹性盒子侧轴对齐方式 align-self
修改主轴方向 flex-direction
弹性盒子伸缩比 flex
弹性盒子换行 flex-wrap
行对齐方式 align-content

主轴对齐方式

属性名:justify-content

属性值:

属性值 效果
flex-start 默认值,弹性盒子从起点开始依次排列
flex-end 弹性盒子从终点开始依次排列
center 弹性盒子沿主轴居中排列
space-between 弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子之间
space-around 弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子两侧
space-evenly 弹性盒子沿主轴均匀排列,弹性盒子与容器之间间距相等
space-between

特点:弹性盒子之间的间距相等,父级剩余的尺寸分配成间距

space-around

特点:间距出现在弹性盒子两侧

视觉效果:弹性盒子之间的间距是两端间距的2倍

space-evenly

特点:各个间距都相等

侧轴对齐方式

属性名

align-items:当前弹性容器内所有弹性盒子的侧轴对齐方式(给弹性容器设置)

align-self:单独控制某个弹性盒子的侧轴对齐方式(给弹性盒子设置)

属性值:

属性值 效果
stretch 弹性盒子沿着侧轴线被拉伸至铺满容器(弹性盒子没有设置侧轴方向尺寸默认拉伸)
center 弹性盒子沿侧轴居中排列
flex-start 默认值,弹性盒子从起点开始依次排列
flex-end 弹性盒子从终点开始依次排列
stretch

特点:弹性盒子在侧轴方向没有尺寸(没有高度)才能拉伸

重点

在不设置宽度和高度的情况下,主轴默认水平方向,那么宽度由内容撑开,高度由侧轴进行拉伸到父级同等高度

在不设置宽度和高度的情况下,主轴设置垂直方向,那么高度由内容撑开,宽度由侧轴进行拉伸到父级同等宽度

修改主轴方向

主轴默认在水平方向,侧轴默认在垂直方向

属性名:flex-direction

属性值:

属性值 效果
row 水平方向,从左向右(默认)
column 垂直方向,从上向下
row-reverse 水平方向,从右向左
column-reverse 垂直方向,从上向下

案例:

<!DOCTYPE html>

<html lang="en">code>

<head>

<meta charset="UTF-8">code>

<meta name="viewport" content="width=device-width, initial-scale=1.0">code>

<title>Document</title>

<style>

.box {

display: flex;

/* 修改主轴方向为垂直方向,侧轴自动变换到水平方向 */

flex-direction: column;

/* 主轴在垂直方向   视觉效果垂直居中 */

justify-content: center;

/* 侧轴在水平   视觉效果:水平居中 */

align-items: center;

width: 150px;

height: 120px;

background-color: pink;

}

.box div {

width: 102px;

height: 62px;

background-color: skyblue;

}

</style>

</head>

<body>

<div class="box">code>

<div></div>

</div>

</body>

</html>

注意:如果修改了主轴的方向,那么侧轴会自动变成相反反向

例如

修改主轴为垂直,则侧轴变为水平

修改主轴为水平,则侧轴变为垂直(默认方向)

弹性盒子伸缩比

作用:控制弹性盒子的主轴方向的尺寸

属性名:flex

属性值:整数数字,表示占用父级剩余尺寸的份数

注意:如果主轴在水平方向,控制的就是宽度,在垂直方向控制的就是高度

案例:

<!DOCTYPE html>

<html lang="en">code>

<head>

<meta charset="UTF-8">code>

<meta name="viewport" content="width=device-width, initial-scale=1.0">code>

<title>Document</title>

<style>

/* 默认情况下,主轴方向尺寸是靠内容撑开:侧轴默认拉伸 */

.box {

display: flex;

height: 300px;

border: 1px solid #000;

}

.box div {

/* height: 100px; */

background-color: pink;

}

.box div:nth-child(1) {

width: 200px;

}

.box div:nth-child(2) {

flex: 1;

}

.box div:nth-child(3) {

flex: 1;

}

</style>

</head>

<body>

<div class="box">code>

<div>1</div>

<div>2</div>

<div>3</div>

</div>

</body>

</html>

解释:上述代码中,设置了弹性容器,且主轴朝水平方向,弹性盒子没有设置高度,那么侧轴(垂直方向)方向自动拉伸高度,然后把弹性容器的剩余尺寸分成了2分,分给了第2、3个弹性盒子一边一份。

弹性盒子换行

弹性盒子可以自动挤压或拉伸,默认情况下,所有弹性盒子都在一行显示

作用:不会自动挤压弹性盒子,即便弹性容器撑不下也会换行显示

属性名:flex-wrap

属性值

wrap:换行

nowrap:不换行(默认)

行对齐方式

属性名:align-content

注意:需要添加flex-wrap属性让弹性盒子换行

属性值与主轴的对齐属性值相同:

属性值 效果
flex-start 默认值,弹性盒子从起点开始依次排列
flex-end 弹性盒子从终点开始依次排列
center 弹性盒子沿主轴居中排列
space-between 弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子之间
space-around 弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子两侧
space-evenly 弹性盒子沿主轴均匀排列,弹性盒子与容器之间间距相等

注意:调整 行对齐方式 对单行弹性盒子不生效

综合案例

<!DOCTYPE html>

<html lang="en">code>

<head>

<meta charset="UTF-8">code>

<meta name="viewport" content="width=device-width, initial-scale=1.0">code>

<title>抖音解决方案</title>

<style>

* {

/* 清除外边距 */

margin: 0;

/* 清除内边距 */

padding: 0;

/* 清除列表项符号 */

list-style: none;

/* 开启盒子模型解析方式:內减模式 */

box-sizing: border-box;

/* 清除文本的装饰效果,下划线 */

text-decoration: none;

}

/* 设置最外面的盒子样式 */

.box {

margin: 50px auto;

width: 1200px;

height: 420px;

background-color: #fff;

border: 1px solid #ddd;

border-radius: 10px;

box-shadow: 5px 5px 10px 3px #ccc;

}

/* 设置ul列表的样式 */

.box ul {

display: flex;

/* 弹性盒子换行效果 */

flex-wrap: wrap;

/* 主轴对齐方式 */

justify-content: space-between;

/* 行对齐的方式 */

align-content: space-between;

padding: 90px 60px;

height: 100%;

}

/* 设置列表项的样式 */

.box ul li {

display: flex;

width: 500px;

height: 80px;

background-color: white;

}

/* 设置列表项当中图片的样式 */

.box ul li img {

width: 80px;

height: 80px;

}

/* 设置列表项中文本样式 */

.box ul li .text {

margin-left: 15px;

}

/* 设置列表项中文本标题的样式 */

.box ul li .text h4 {

line-height: 40px;

font-size: 20px;

font-weight: 400;

color: #333;

}

/* 设置列表项中文本段落的样式 */

.box ul li .text p {

font-size: 14px;

color: #666;

}

</style>

</head>

<body>

<div class="box">code>

<ul>

<li>

<div class="pic">code>

<img src="./images/小火箭.png" alt="小火箭" title="小火箭">code>

</div>

<div class="text">code>

<h4>一键发布多端</h4>

<p>发布视频到抖音短视频、西瓜视频及今日头条</p>

</div>

</li>

<li>

<div class="pic">code>

<img src="./images/防护盾.png" alt="防护盾" title="防护盾">code>

</div>

<div class="text">code>

<h4>管理视频内容</h4>

<p>支持修改已发布稿件状态和实时查询视频审核状态</p>

</div>

</li>

<li>

<div class="pic">code>

<img src="./images/小飞机.png" alt="小飞机" title="小飞机">code>

</div>

<div class="text">code>

<h4>发布携带组件</h4>

<p>支持分享内容携带小程序、地理位置信息等组件,扩展内容及突出地域性</p>

</div>

</li>

<li>

<div class="pic">code>

<img src="./images/数据.png" alt="数据" title="数据">code>

</div>

<div class="text">code>

<h4>数据评估分析</h4>

<p>获取视频在对应产品内的数据表现、获取抖音热点,及时进行表现评估</p>

</div>

</li>

</ul>

</div>

</body>

</html>

上面综合案例当中需要用到的图片,自行下载添加到 img 标签即可啦。

欧了,到这里我应该解释的差不多啦,我是南极,大胆做自己,活出精彩的人生👊👊👊



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。