龙空技术网

前端学习第六天-flex布局

tianlongbabu 80

前言:

此时小伙伴们对“flex 布局”大致比较关切,小伙伴们都需要剖析一些“flex 布局”的相关文章。那么小编同时在网络上汇集了一些对于“flex 布局””的相关知识,希望我们能喜欢,各位老铁们快快来了解一下吧!

flex认识

flex布局初体验

display: flex;

justify-content: space-between;

效果如图

flex组成

flex布局

主轴对齐方式

侧轴对齐方式

效果如下

修改主轴方向

效果如下

弹性伸缩比

效果如下

弹性盒子换行

效果如下

案例

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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

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

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

li {

list-style: none;

}

.box {

margin: 50px auto;

width: 1200px;

height: 418px;

border: 1px solid #ddd;

border-radius: 10px;

}

.box ul {

display: flex;

/* 弹性盒子换行 */

flex-wrap: wrap;

/* 调整主轴对齐方式 */

justify-content: space-between;

/* 调整 行对齐方式 */

align-content: space-between;

padding: 90px 40px 90px 60px;

height: 418px;

}

.box li {

display: flex;

width: 500px;

height: 88px;

/* background-color: pink; */

}

.box .pic {

margin-right: 15px;

}

.box .text h4 {

line-height: 40px;

font-size: 20px;

font-weight: 400;

color: #333;

}

.box .text p {

font-size: 14px;

color: #666;

}

</style>

</head>

<body>

<div class="box">

<ul>

<li>

<div class="pic">

<img src="./images/1.svg" alt="">

</div>

<div class="text">

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

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

</div>

</li>

<li>

<div class="pic">

<img src="./images/2.svg" alt="">

</div>

<div class="text">

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

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

</div>

</li>

<li>

<div class="pic">

<img src="./images/3.svg" alt="">

</div>

<div class="text">

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

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

</div>

</li>

<li>

<div class="pic">

<img src="./images/4.svg" alt="">

</div>

<div class="text">

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

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

</div>

</li>

</ul>

</div>

</body>

</html>

效果如下

标签: #flex 布局